Adiar CSS não essencial

Demián Renzulli

Os arquivos CSS são recursos que bloqueiam a renderização: elas devem ser carregadas e processadas antes que o navegador processe a página. Páginas da Web que contêm folhas de estilo desnecessariamente grandes levam mais tempo para serem renderizados.

Neste guia, você aprenderá a adiar CSS não essenciais para otimizar caminho crítico de renderização e melhorias First Contentful Paint (FCP, na sigla em inglês).

Exemplo: carregamento de CSS abaixo do ideal

O exemplo a seguir contém um acordeão com três parágrafos ocultos de texto, cada um sendo estilizado com uma classe diferente:

Esta página solicita um arquivo CSS com oito classes, mas nem todas são necessário para renderizar o conteúdo conteúdo.

O objetivo deste guia é otimizar a página para que somente os estilos críticos são carregados de modo síncrono, enquanto o restante (incluindo os estilos de parágrafo), são carregados sem bloqueio.

Medir

Execute o Lighthouse. na página e navegue até Desempenho.

O relatório mostra a métrica First Contentful Paint com o valor "1s", e a oportunidade de Eliminar os recursos de bloqueio de renderização, apontando para a style.css:

O relatório do Lighthouse sugere que folha de estilo para acelerar o carregamento da página.

.

Observação: este site de demonstração usa uma folha de estilos muito pequena. Em cenários de produção, é comum precisar de arquivos CSS muito maiores. Se o Lighthouse detectar que uma página tem Pelo menos 2.048 bytes de regras de CSS que não foram usadas ao renderizar o acima da dobra, também mostra uma sugestão Remover CSS não usado.

Para visualizar como esse CSS bloqueia a renderização:

1. Abra a página no Chrome.
2. Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir o DevTools.
3. Clique na guia Desempenho.
4. No painel "Desempenho", clique em Atualizar.

No trace resultante, você verá que o marcador FCP foi colocado imediatamente Após o CSS terminar de carregar:

Na página de demonstração não otimizada, a FCP não pode acontecer até que o CSS termine de carregar.

Isso significa que o navegador precisa aguardar o carregamento e o processamento de todo o CSS. antes de pintar um único pixel na tela.

Otimizar

Para otimizar essa página, você precisa saber quais classes são consideradas críticas. Para determinar isso, use a Ferramenta de cobertura:

1. No DevTools, abra o Menu de comando. pressionando Control+Shift+P ou Command+Shift+P (Mac).
2. Digite "Cobertura" e selecione Mostrar cobertura.
3. Clique em Atualizar para recarregar a página e começar a capturar a cobertura.

.

O relatório de cobertura mostra quanto do seu CSS é usada no carregamento inicial da página.

Clique duas vezes no relatório para conferir os detalhes:

• As classes marcadas em verde são essenciais. O navegador precisa deles para renderizar conteúdo visível, incluindo o título, subtítulo e botões de accordion.
• As classes marcadas em vermelho são não críticas, somente afetar conteúdo que não é imediatamente visível, como parágrafos ocultos.

Com essas informações, otimize o CSS para que o navegador possa iniciar o processamento estilos críticos imediatamente após o carregamento da página e adiamento de CSS não essencial para mais tarde:

1. Extraia as definições de classe marcadas em verde no relatório de cobertura. Coloque essas classes em um bloco <style> no cabeçalho da página:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. Carregue o restante das classes de forma assíncrona aplicando o seguinte padrão:

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

Essa não é a maneira padrão de carregar CSS. Veja como funciona:

• link rel="preload" as="style" solicita a folha de estilo de forma assíncrona. Você pode saber mais sobre preload no guia de pré-carregamento de recursos críticos.
• O atributo onload em link permite que o navegador processe o CSS quando a folha de estilo for carregada.
• "anulando" o gerenciador onload após o uso ajuda alguns navegadores a evitar chamar novamente o gerenciador quando mudar o atributo rel.
• A referência à folha de estilo dentro do elemento noscript fornece uma substituto para navegadores que não executam JavaScript.

.

Observação:

Em um cenário de produção real, recomendamos o uso de funções que adiam CSS como loadCSS que pode encapsular esse comportamento e funcionar bem em vários navegadores, e com uma Política de Segurança de Conteúdo que talvez não permitir JavaScript onload inline.

Você também pode colocar o link do CSS na parte inferior da página, permitindo que o conteúdo antes da renderização sem esperar pela folha de estilo no Firefox e no Chrome. No entanto, o navegador ainda prioriza a folha de estilo nesse caso, por isso ainda poderá bloquear conteúdo crítico em todos os navegadores.

A página resultante é exatamente semelhante a a versão anterior, mesmo quando a maioria dos estilos é carregada de maneira assíncrona. Veja como o estilos embutidos e solicitação assíncrona ao arquivo CSS como no HTML arquivo:

Monitoramento

Use o DevTools para executar outro trace de desempenho no página otimizada.

O marcador FCP aparece antes da página solicitar o CSS, o que significa que navegador não precisa esperar o CSS carregar para renderizar a página:

Na página otimizada, a FCP pode começar antes do a folha de estilo é carregada.

Por fim, execute o Lighthouse na página otimizada.

No relatório, você verá que a página da FCP foi reduzida em 0,2 s (uma redução de 20% de melhoria!):

A nova FCP reduzida.

A sugestão Eliminar os recursos de bloqueio de renderização não aparece mais em Oportunidades e está na seção Auditorias aprovadas:

A página agora transmite os recursos de bloqueio auditoria.

Próximas etapas e referências

Neste guia, você aprendeu a adiar CSS não essencial extraindo manualmente o código não utilizado na página. Para ambientes de produção mais complexos, extrair guia essencial de CSS aborda alguns dos ferramentas mais populares para extrair CSS essencial e inclui um codelab para saber como eles na prática