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 da atividade de rede:
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 folha de estilo externa,
porque é armazenado separadamente do HTML que o usa.
Por padrão, o navegador precisa fazer o download, analisar e processar todas as folhas de estilo externas encontradas antes de exibir ou renderizar qualquer conteúdo na tela de um usuário. Não faria sentido para um navegador tentar exibir conteúdo antes do processamento das folhas de estilo, porque elas podem conter regras que afetam o estilo da página.
É necessário fazer o download de cada folha de estilo externa da rede. Essas viagens extras de rede podem aumentar significativamente o tempo que os usuários precisam esperar antes de ver um conteúdo na tela.
O CSS não usado também atrasa a construção da árvore de renderização pelo navegador. A árvore de renderização é como a árvore DOM, exceto por incluir os estilos de cada nó. Para construir a árvore de renderização, o navegador deve percorrer toda a árvore do DOM e verificar quais regras CSS se aplicam a cada nó. Quanto mais CSS não usado houver, mais tempo o navegador poderá precisar gastar calculando os estilos de cada nó.
Como detectar CSS não usado
A guia "Cobertura" do Chrome DevTools pode ajudar você a descobrir CSS crítico e não essencial. Consulte Conferir o CSS usado e não utilizado na guia "Cobertura".
CSS essencial inline e adiar CSS não essencial
Assim como o código inline em uma tag <script>,
estilos essenciais inline necessários para a primeira exibição
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.
Automatize o processo de extração e inserção in-line do CSS "acima da dobra" usando a ferramenta Essencial.
Saiba mais em Adiar CSS não essencial.
Orientação específica da pilha
Drupal
Remova as regras de CSS não usadas. Anexe apenas as bibliotecas Drupal necessárias à página ou ao componente relevante em uma página. Consulte Como definir uma biblioteca para mais detalhes.
Joomla
Reduza ou troque o número de extensões 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.