Performance Pré JS

PERFORMANCE PRÉ JS

Ricardo Gouveia Front-end dev @ Accenture Ciência da Computação @
UFOPA Fã da Tulla Luana e Amy Winehouse do Pânico Ex morador do Pará About me @ricardogouveia3 rcrd.me

Pré JS? Desde que HTML → CSS → JS E
peMormance não é só JS

80% do tempo de carregamento vem do front

HTML Em excesso causa consumo de memória e banda No
carregamento causa resource blocking

Chrome com 98% da memória E a culpa é de
quem?

HTML Tenha no máximo 1500 nós no DOM Profundidade máxima
de 32 nós Use o Lighthouse pra contar

HTML Entregue HTML gradativamente via: • Paginação • “Ver mais"

CSS Carregamento causa render-blocking Seleções absurdas

CSS Mate CSS não utilizado Coloque CSS crítico inline*

Seleções inteligentes #id .classe <tag> irmão + adjacente filho >
filho descendente descendente * [attr=x] :pseudo* body div .main ul li {…} 1. Encontrar todos os li 2. Destes, os que estão dentro de ul 3. Destes, os que estão dentro da classe .main 4. Destes, os que estão dentro de uma div 5. Que estão no body +rápido +lento

div:nth-of-type(3) ul:last-child li:nth-of-type(odd) * { font-weight: bold; } Navegador

CSS Inline Fim do <body>

Geral Use uma metodologia para organizar o CSS BEM

Geral Use as fontes do sistema (se o designer deixar).
Só joga system font stack no google body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol”; }

hgps://willianjusten.com.br/peMormance-web-evite-escrever-html-demais/ hgps://willianjusten.com.br/peMomance-web-critical-css-e-jekyll/ hgp://getbem.com/naming/ hgps://css-tricks.com/snippets/css/system-font-stack/ CSS Ejciente: técnicas e ferramentas que
fazem a diferença nos seus estilos - Tárcio Zemel hgps://developers.google.com/web/tools/lighthouse/

Performance Pré JS

Performance Pré JS

Ricardo Gouveia

More Decks by Ricardo Gouveia

Other Decks in Programming

Featured

Transcript