A seção "Oportunidades" do relatório do Lighthouse lista todas as folhas de estilo com CSS não utilizado com uma possível economia de 2 KiB ou mais. Remover o CSS não usado para reduzir bytes desnecessários consumidos pela atividade da 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 transferido pelo navegador é conhecido como folha de estilo externa.
porque são armazenados separadamente do HTML que os utiliza.
Por padrão, um navegador deve fazer o download, 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 um navegador tentar exibir conteúdo antes do processamento das folhas de estilo, porque as folhas de estilo podem conter regras que afetam o estilo da página.
É necessário fazer o download de cada folha de estilo externa a partir da rede. Essas viagens extras de rede podem aumentar significativamente o tempo que os usuários precisam esperar antes de ver qualquer conteúdo nas telas deles.
O CSS não utilizado também retarda a construção do navegador árvore de renderização. 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 deve percorrer toda a árvore do DOM e verificar quais regras de CSS se aplicam a cada nó. Quanto mais CSS não utilizado houver, mais tempo pode ser gasto pelo navegador calculando os estilos de cada nó.
Como detectar CSS não usado
A guia "Cobertura" do Chrome DevTools pode ajudar você a descobrir CSSs essenciais e pouco críticos. Consulte Conferir o CSS usado e o não utilizado na guia "Cobertura".
Integrar CSS essenciais e adiar CSS não essencial
Assim como ao código in-line em uma tag <script>,
estilos críticos em linha necessários para a first paint
em 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 de "Acima da dobra" CSS. usando a ferramenta Crítica.
Saiba mais em Adiar CSS não essenciais.
Orientação específica da pilha
Drupal
Remova regras de CSS não usadas. Anexe apenas as bibliotecas Drupal necessárias à página ou componente relevante de uma página. Consulte a seção 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.