A seção Oportunidades de seu relatório Lighthouse lista todas as folhas de estilo com CSS não utilizado com uma economia potencial de 2 KiB ou mais. Remova o CSS não utilizado para reduzir bytes desnecessários consumidos pela atividade de rede:
Como CSS não utilizado diminui o desempenho
O uso de uma tag <link> é uma forma comum de adicionar estilos a uma página:
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet">
...O arquivo main.css que o navegador baixa é chamado de folha de estilo externa, porque é um arquivo armazenado separadamente do HTML que o utiliza.
Por default, um navegador deve baixar, analisar e processar todas as folhas de estilo externas que encontrar antes de exibir ou renderizar qualquer conteúdo na tela de um usuário. Não faria sentido para um navegador tentar exibir o conteúdo antes que as folhas de estilo tivessem sido processadas, porque as folhas de estilo podem conter regras que afetam o estilo da página.
Cada folha de estilo externa precisa ser baixada da rede. Essas viagens extras de rede podem aumentar significativamente o tempo que os usuários precisam esperar antes de ver qualquer conteúdo em suas telas.
O CSS não utilizado também retarda a construção da árvore de renderização pelo navegador. A árvore de renderização é como a árvore DOM, exceto que também inclui os estilos para cada nó. Para construir a árvore de renderização, um navegador precisa percorrer toda a árvore DOM e verificar quais regras CSS se aplicam a cada nó. Quanto mais CSS não utilizado houver, mais tempo um navegador irá potencialmente precisar gastar calculando os estilos de cada nó.
Como detectar CSS não utilizado
A aba Cobertura do Chrome DevTools pode ajudá-lo a descobrir qual o CSS que é crítico e qual o que não é crítico. Veja Exibir CSS usado e não usado com a aba Cobertura.
Você também pode extrair essas informações do Puppeteer. Veja page.coverage.
Incorpore o CSS crítico e adie o CSS não crítico
De forma semelhante ao código incorporado em <script>, insira estilos críticos necessários para a primeira renderização dentro de um bloco <style> na head da página HTML. Em seguida, carregue o restante dos estilos de forma assíncrona usando o link preload.
Considere automatizar o processo de extração e incorporação de CSS "Acima da Dobra" usando a ferramenta crítica.
Saiba mais em Adie CSS não crítico.
Orientações para pilhas específicas
Drupal
Considere a remoção de regras CSS não utilizadas e apenas anexe as bibliotecas Drupal necessárias à página ou componente relevante em uma página. Veja Definindo uma biblioteca para mais detalhes.
Joomla
Considere reduzir ou trocar o número de extensões Joomla que carregam CSS não utilizado em sua página.
WordPress
Considere reduzir ou trocar o número de plug-ins do WordPress carregando CSS não utilizado em sua página.
Resources
Updated on • Improve article