Melhorando seu LCP

Quando você quer levar a sério a velocidade do seu site mas suas páginas exigem o carregamento de arquivos CSS que são muito grandes, imagina se você conseguisse separar apenas o CSS necessário para renderizar a primeira tela e poder adiar o restante. Adiar o carregamento de um script CSS oferece a capacidade de carregar arquivos CSS após o carregamento completo da sua página (DOM).

O que é o LCP?

Largest Contentful Paint (LCP) é uma das três métricas Core Web Vitals e representa a rapidez com que o conteúdo principal de uma página da web é carregado. Especificamente, o LCP mede o tempo desde o momento em que o usuário inicia o carregamento da página até que a maior imagem ou bloco de texto seja renderizado na janela de visualização.

Para proporcionar uma boa experiência ao usuário, os sites devem se esforçar para ter um LCP de 2,5 segundos ou menos para pelo menos 75% das visitas à página.

Por exemplo, após eu fazer algumas otimizações em meu código:

Quais arquivos CSS devo adiar o carregamento?

Você deve adiar o carregamento de todos os arquivos CSS que estão bloqueando a renderização da sua página. Você pode testar seu site com o teste de velocidade para ver quais arquivos estão bloqueando a renderização.

Como determinar qual parte CSS eu preciso adiar o carregamento?

Antes de decidir adiar o carregamento de seu(s) script(s) CSS, você deve aprender como otimizar a entrega de CSS. Depois de extrair o CSS do caminho crítico de renderização, você deve agora ter um script CSS menor para o conteúdo acima da dobra, ou seja, a primeira parte da página exibida ao usuário. Incorpore este script CSS no cabeçalho da sua página e adie o carregamento do CSS restante.

Não adie o carregamento de um CSS pequeno

Quando sua página da web carrega um script CSS de pequeno a médio, você não deve se preocupar muito em adiar o carregamento do script. Você se beneficiará mais, no sentido de velocidade da página, ao incorporar todo o seu CSS direto no código.

Adie apenas o carregamento de grandes arquivos CSS

Quando se trata de velocidade da página, adiar o carregamento de scripts CSS é mais benéfico quando suas páginas da web carregam CSS grandes. Agora, você não pode simplesmente colocar todo o seu CSS em um arquivo, adiar o carregamento e esperar que suas páginas da web tenham um bom desempenho. A primeira visualização que seus visitantes (especialmente aqueles com conexões lentas à Internet ou em dispositivos móveis) podem obter do seu site será uma página em branco ou terá uma aparência horrível porque suas páginas da web não terão estilo, simplesmente porque o CSS ainda não foi carregado . Esta é a razão pela qual adiar o carregamento de todo o seu CSS não é uma opção.

Conforme explicado aqui acima, a solução para isso é descobrir qual parte do seu CSS é usada para a visualização inicial acima da dobra da sua página. Depois de saber disso, você deve incorporar esse script CSS no cabeçalho HTML e adiar o carregamento do restante do seu CSS.

Como adiar o carregamento de CSS usando Javascript

Para adiar o carregamento de arquivos JavaScript, existem métodos puros baseados em HTML disponíveis, nomeadamente defer e async. Infelizmente, esses métodos HTML não funcionam para arquivos CSS. No entanto, o trecho abaixo, que usa apenas um pouquinho de JavaScript, ele adiará o carregamento de qualquer arquivo CSS que você desejar:

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Copie e cole o script acima em sua página. Substitua style.css pelo caminho do arquivo CSS cujo carregamento você deseja adiar. Quando você quiser adiar o carregamento de mais de um arquivo CSS, basta copiar o snippet rel do link e continuar colando cópias do snippet em sua página, enquanto substitui style.css pelo(s) nome(s) de arquivo de sua preferência.

Não se esqueça de incluir a tag noscript na tag head, isso garantirá que dispositivos ou navegadores que não suportam Javascript também possam carregar os arquivos CSS.

Você também pode usar a documentação oficial do web.dev para executar o passo-a-passo.