Como corrigir o aviso de CSS não utilizado no WordPress

Significa que a página baixou folhas de estilo cujas regras ela não aplica, desperdicando download e atrasando a renderizacao. O relatório estima quantos KiB poderiam ser economizados. A causa comum e o tema e os plugins enfileirarem o CSS inteiro em toda página, mesmo onde a maioria das regras não vale.

Use o Remove Unused CSS do Perfmatters para gerar o Used CSS por página, mantendo o Stylesheet Behavior em Delay no inicio. Assim o estilo usado e servido e o restante e adiado, não apagado de vez. Adicione excecoes para os componentes que ficarem sem formatacao e regenere o Used CSS.

Porque o gerador considerou uma folha de estilo usada como não usada e a removeu, ou porque o componente so injeta o CSS após interacao e não foi capturado. Troque o Stylesheet Behavior de Remove para Delay, adicione o arquivo .css em Excluded Stylesheets e o seletor em Excluded Selectors, e limpe o Used CSS.

Inline coloca o CSS usado no inicio do HTML, o que costuma render a melhor nota de PageSpeed mas aumenta o tamanho da página. File grava o CSS usado em um arquivo separado, que pode ser cacheado em visitas repetidas e reduz o HTML. Inline e bom para a nota; File e melhor para a performance percebida em retorno.

Não totalmente. O Autoptimize agrega, minifica e pode adiar o CSS, o que ajuda, mas ele não calcula o Used CSS por página como o Perfmatters. Por isso o PageSpeed pode continuar acusando CSS não utilizado mesmo com o Autoptimize ativo. Para zerar o aviso, gere o Used CSS por página.

Sim, sempre que alterar o Customizer, trocar o tema ou atualizar um page builder. O Used CSS e um snapshot por página e fica em cache; se o estilo mudou e o cache não, a página pode sair com layout antigo ou quebrado. Limpe o Used CSS em Perfmatters Tools e também o cache do plugin de cache.

Você esta logado como administrador e recebe o CSS completo, enquanto o visitante recebe a versão otimizada do cache com o Used CSS. Por isso o teste final tem de ser numa janela anonima e também no mobile, já que o Used CSS e gerado separado para desktop e celular.

Comece com Delay, que adia o CSS original como rede de segurança e raramente quebra o layout. Async tende a um LCP um pouco maior, mas evita pop-in. Remove e a mais agressiva: apaga as folhas originais e quase sempre exige excecoes, entao deixe para sites simples já testados.