<aside> ūüí° Aprendizados sobre performance CSS dos artigos Optmizing CSS for faster page loads e CSS and Network Performance

</aside>

Critical CSS inline

Adicionar somente o css above the fold inline no <head>

Para o insti, esse critical geralmente é o header(com nav) e Heros, ter esses estilos bem componentizados faz com que as páginas não carreguem css desnecessário com vários estilos de headers e heros diferentes.

Lazy-load stylesheets

Carregar stylesheets no onload.

<!-- Stylesheet sendo carregado como lazyload -->
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
<!-- Fallback quando JS n√£o est√° ativado -->
<noscript>
	<link rel="stylesheet" href="/path/to/my.css" media="screen">
</noscript>

Code splitting

Se vemos na aba 'Coverage' na maioria das vezes temos mais CSS carregado do que de fato utlizamos nas p√°ginas

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/153f00bd-693e-4ac8-832f-d8785cc966a5/Captura_de_Tela_2020-08-16_as_12.11.49.png

Maneiras de fazer um code-splitting eficiente:

PurgeCSS

O purgeCSS remove css que n√£o est√£o sendo utilizados nas p√°ginas. Pensando no nosso caso, como utilizamos twig, podemos usar nos arquivos .tpl principais e nos includes desse aquivo, ex.: home.tpl + header.tpl + footer.tpl. Needs to test.

CSS Split baseado em componente (n√£o testado ainda)

Carregar o css com base nos components que são utilizados na página, se o componente não é utilizado, esse CSS não é carregado. Isso causa um render progressivo na página. Esse método já é possível ser utilizado nos browsers mais utilizados desde 2018+. Reference

<link rel="stylesheet" href="site-header.css" />
  <header class="site-header">

    <link rel="stylesheet" href="site-nav.css" />
    <nav class="site-nav">...</nav>

  </header>

N√£o colocar css antes de JS async

Caso o css esteja antes de um código JS async, o navagedor só irá carregar esse script depois do css. Então caso o script não tenha nenhum dependência de css, o ideal é que ele seja colocado antes do carregado. Reference

<script>
	console.log('eu n√£o dependo do CSS para ser carregado ūüėä');
</script>

<link rel="stylesheet" href="app.css" />

Imagens

Para otimizar o carregamento das imagens, utilizamos o formato .webp e .jpg de fallback Assim garantimos qualidade e performance sem impactar na experiência do usuário.

<picture>
    <source srcset="./hero-image.webp" type="image/webp">
    <source srcset="./hero-image.jpg" type="image/jpeg">
    <img src="./hero-image.jpg" alt="Texto alternativo">
</picture>

Preload de imagens, fonts, scripts critical

Para evitar que as imagens do hero demorem a carregar, podemos usar a tag <link> para fazer o pre-carregamento dessas imagens de forma prioritária para que sejam carregadas o quanto antes possível

<link rel="preload" as="image" href="path-da-image/image.webp" type="image/webp">

Para evitar carregar imagens grandes em resolu√ß√Ķes menores:

<!-- Essa imagem ser√° carregada em resolu√ß√Ķes com largura at√© 768px -->
<link media="(max-width: 768px)" rel="preload" as="image" href="path-da-image/[email protected]" type="image/webp">

<!-- Essa imagem ser√° carregada em resolu√ß√Ķes com largura a partir de 769px -->
<link media="(min-width: 768px)" rel="preload" as="image" href="path-da-image/[email protected]" type="image/webp">