Adiar CSS não essencial

Demián Renzulli

Importante:este guia descreve uma técnica avançada que pode melhorar o desempenho, mas também pode levar a bugs se não for implementada corretamente. A maioria dos sites consegue atingir todas as metas de performance recomendadas sem implementar essa técnica.

Os arquivos CSS são recursos de bloqueio de renderização: eles precisam ser carregados e processados antes que o navegador renderize a página. Páginas da Web que contêm folhas de estilo grandes demais levam mais tempo para renderizar.

Neste guia, você vai aprender a adiar o CSS não crítico para otimizar o caminho crítico de renderização e melhorar a primeira pintura com conteúdo (FCP, na sigla em inglês).

Exemplo: carregamento de CSS subótimo

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

Esta página solicita um arquivo CSS com oito classes, mas nem todas elas são necessárias para renderizar o conteúdo "visível".

O objetivo deste guia é otimizar esta página para que apenas os estilos críticos sejam carregados de forma síncrona, enquanto o restante (incluindo os estilos de parágrafo) é carregado de forma não bloqueante.

Medir

Execute o Lighthouse na página e navegue até a seção Performance.

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

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

Observação: este site de demonstração usa uma folha de estilo 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 2048 bytes de regras de CSS que não foram usadas durante a renderização do conteúdo acima da dobra, ele também mostrará uma sugestão Remove Unused CSS.

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 as Ferramentas para desenvolvedores.
3. Clique na guia Performance.
4. No painel "Performance", clique em Reload.

No rastro resultante, você vai notar que o marcador FCP é colocado imediatamente após o carregamento do CSS:

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

Isso significa que o navegador precisa esperar que todo o CSS seja carregado e processado 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 Command Menu pressionando Control+Shift+P ou Command+Shift+P (Mac).
2. Digite "Cobertura" e selecione Mostrar cobertura.
3. Clique em Atualizar para atualizar a página e começar a capturar a cobertura.

O relatório de cobertura mostra quanto do seu CSS é realmente usado 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 o conteúdo visível, incluindo o título, o subtítulo e os botões de acordeão.
• As classes marcadas em vermelho não são críticas e afetam apenas o conteúdo que não está imediatamente visível, como os parágrafos ocultos.

Com essas informações, otimize seu CSS para que o navegador possa começar a processar estilos críticos imediatamente após o carregamento da página e adiar o CSS não crítico para depois:

1. Extraia as definições de classe marcadas em verde no relatório de cobertura e coloque essas classes em um bloco <style> na parte superior 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. Saiba mais sobre preload no guia de pré-carregamento de recursos essenciais.
• O atributo onload no link permite que o navegador processe o CSS quando a folha de estilo terminar de carregar.
• "Nullificar" o gerenciador onload depois que ele é usado ajuda alguns navegadores a evitar a chamada novamente do gerenciador quando eles mudam o atributo rel.
• A referência à folha de estilo dentro do elemento noscript oferece uma alternativa para navegadores que não executam JavaScript.

Observação:

Em um cenário de produção real, recomendamos o uso de funções de adiamento do CSS, como loadCSS, que podem encapsular esse comportamento e funcionar bem em todos os navegadores, além de oferecer suporte a uma política de segurança de conteúdo que pode não permitir JavaScript onload inline.

Também é possível colocar o link CSS na parte de baixo da página, permitindo que o conteúdo seja renderizado sem esperar pela folha de estilo no Firefox e no Chrome. No entanto, o navegador ainda prioriza a folha de estilo nesse caso, para que ainda possa bloquear conteúdo crítico em todos os navegadores.

A página resultante tem a mesma aparência da versão anterior, mesmo quando a maioria dos estilos é carregada de forma assíncrona. Confira como os estilos inline e a solicitação assíncrona para o arquivo CSS ficam no arquivo HTML:

Monitoramento

Use as Ferramentas do desenvolvedor para executar outro rastreamento de performance na página otimizada.

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

Na página otimizada, o FCP pode começar antes do carregamento da folha de estilo.

Como etapa final, execute o Lighthouse na página otimizada.

No relatório, você vai notar que a página FCP foi reduzida em 0,2s (uma melhoria de 20%).

A FCP nova e reduzida.

A sugestão Eliminar recursos que impedem a renderização não aparece mais em Oportunidades, mas na seção Auditorias aprovadas:

A página agora passa na auditoria de recursos de bloqueio.

Próximas etapas e referências

Neste guia, você aprendeu a adiar o CSS não crítico extraindo manualmente o código não usado na página. Para ambientes de produção mais complexos, o guia de extração de CSS crítico aborda algumas das ferramentas mais conhecidas para extrair CSS crítico e inclui um codelab para saber como elas funcionam na prática.