Remover CSS não usado

A seção "Oportunidades" do relatório do Lighthouse lista todas as folhas de estilo com CSS não usado com uma possível economia de 2 KiB ou mais. Remova o CSS não utilizado para reduzir o consumo desnecessário de bytes pela atividade de rede:

Captura de tela da auditoria "Remover CSS não utilizado" do Lighthouse

Como o CSS não usado prejudica a performance

Usar uma tag <link> é uma maneira comum de adicionar estilos a uma página:

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet" />
    ...
  </head>
</html>

O arquivo main.css que o navegador faz o download é conhecido como uma folha de estilo externa, porque é armazenado separadamente do HTML que a usa.

Por padrão, um navegador precisa fazer o download, analisar e processar todas as folhas de estilo externas encontradas antes de poder mostrar ou renderizar qualquer conteúdo na tela de um usuário. Não faz sentido que um navegador tente exibir conteúdo antes que as folhas de estilo tenham sido processadas, porque elas podem conter regras que afetam o estilo da página.

Cada folha de estilo externa precisa ser transferida por download da rede. Essas viagens extras de rede podem aumentar significativamente o tempo que os usuários precisam esperar antes de ver qualquer conteúdo na tela.

O CSS não usado também diminui a velocidade da construção da árvore de renderização do navegador. A árvore de renderização é como a árvore do DOM, mas inclui os estilos de cada nó. Para construir a árvore de renderização, um navegador precisa percorrer toda a árvore do DOM e verificar quais regras CSS se aplicam a cada nó. Quanto mais CSS não utilizado houver, mais tempo um navegador poderá precisar calcular os estilos para cada nó.

Como detectar CSS não usado

A guia "Cobertura" do Chrome DevTools pode ajudar você a descobrir CSS críticos e não críticos. Consulte Conferir o CSS usado e não usado com a guia "Cobertura".

Chrome DevTools: guia &quot;Coverage&quot;
Chrome DevTools: guia "Coverage".

Incluir CSS essencial inline e adiar o CSS não essencial

Semelhante ao código in-line em uma tag <script>, os estilos essenciais inline necessários para a first paint dentro de um bloco <style> no 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 inserção in-line do CSS "Acima da dobra" usando a ferramenta Crítica.

Saiba mais em Adiar o carregamento de CSS não essenciais.

Orientações específicas para a pilha

Drupal

Remova as regras não utilizadas do CSS e anexe apenas as bibliotecas Drupal necessárias à página ou ao componente relevante. Consulte a documentação da Drupal para mais detalhes.

Para identificar bibliotecas anexas que estão adicionando CSS externo, execute a cobertura de código no Chrome DevTools. É possível identificar o tema ou módulo responsável pelo URL da folha de estilo quando a agregação do CSS está desativada no seu site Drupal.

Procure temas e módulos que tenham várias folhas de estilo listadas e muito vermelho na cobertura do código. Os temas e módulos só precisam anexar uma biblioteca de folhas de estilo se ela for realmente usada na página.

Joomla

Reduza ou troque o número de extensões do Joomla que carregam CSS não utilizado na sua página.

WordPress

Reduza ou troque o número de plug-ins do WordPress que carregam CSS não utilizado na sua página.

Recursos