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

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">