Como remover CSS não utilizado no WordPress (item do PageSpeed ​​Insights)

Deseja remover CSS não utilizado no WordPress para melhores pontuações do PageSpeed ​​Insights?

A remoção de CSS não utilizada pode ser feita usando plug-ins de carregamento de ativos como Asset CleanUp ou Perfmatters, sites de remoção de CSS e até mesmo plug-ins de remoção de CSS especializados. No entanto, uma boa maneira de remover CSS não utilizado é evitar plug-ins e builders com CSS pesado para começar.

CSS pesado e JavaScript podem afetar vários itens no PageSpeed Conhecimentos. Reduzir os tamanhos dos arquivos pode melhorar as pontuações para “remover CSS não utilizado”, bem como outros itens no PageSpeed ​​Insights. Os principais elementos vitais da web do Google enfatizam fortemente a otimização de CSS e JavaScript.

1. Remover CSS não utilizado na limpeza ou no desempenho de ativos

Limpeza de ativos e Perfmatters são plug-ins populares para remover CSS no WordPress.

Escolha um plug-in para remover CSS não usado

A limpeza de ativos é gratuita enquanto o Perfmatters é pago, mas a UI/UX é melhor. Asset CleanUp tem uma versão pro que permite descarregar CSS personalizado (etapa 11) enquanto a versão gratuita e o Perfmatters não. Eu escrevi uma comparação em Perfmatters vs. Asset CleanUp -mas eu pessoalmente uso Perfmatters.

Ative o Gerenciador de scripts

Se estiver usando Perfmatters, ative o gerenciador de script nas configurações. Existem também configurações para remover inchaço, dicas de recursos do navegador e outras configurações que podem melhorar a velocidade. Se estiver usando Asset CleanUp, ative Modo de teste nas configurações que permite testar a remoção de CSS sem interromper seu site. Perfmatters não tem um modo de teste, então você precisará criar um site de teste ou verificar se há erros visíveis em seu site após descarregar cada arquivo CSS (tentativa e erro).

Remova CSS de onde não for necessário carregar

Alguns plug-ins, criadores de páginas e arquivos CSS são carregados em todo o seu site WordPress. Se alguns arquivos estiverem sendo usados ​​apenas em áreas específicas do seu site, desative-os em todas as outras áreas. Dependendo do plug-in de carregamento de ativos usado, você pode desativar os arquivos CSS em qualquer lugar, exceto URLs atuais, postagens, páginas, desativá-los em um único URL ou usar regex para desativar arquivos CSS usando padrões de URL.

• Desative o plug-in de formulário de contato em páginas que não possuem um formulário de contato.
• Desative o plug-in de gerenciamento de link de afiliado em páginas que não usam links afiliados.
• Desative o plug-in de compartilhamento social em todas as páginas (já que normalmente é para postagens de blogs).
• Desative a funcionalidade não utilizada em seu construtor de página (consulte esta postagem para Elementor).

2. Gerar CSS Crítico

Se você estiver usando WP Rocket ou outro plug-in de cache, provavelmente viu uma opção para otimizar entrega CSS (ou similar).

Isso gera CSS de caminho crítico e carrega todos os outros CSS de forma assíncrona, sem bloqueio de renderização. Embora possa não ajudar a remover CSS, pode ajudar a entregá-lo mais rápido.

Às vezes, ativar a entrega de CSS causa FOUT (flash de texto não estilizado) e contribui para mudança cumulativa de layout (CLS). Se isso acontecer com você, tente as seguintes soluções:

• Ative a otimização da entrega de CSS.
• Verifique se há “rocket-critical-css” em seu código-fonte para ter certeza de que está funcionando.
• Se não estiver funcionando, gere novamente o CSS crítico no WP Rocket e nos construtores de páginas (se estiver usando um).
• Examine o seu site usando PurifyCSS .
• Baixe o CSS combinado, purificado e reduzido.
• Cole o código em seu plug-in de cache (CSS crítico de fallback).
• Exclua arquivos da entrega CSS usando o plugin auxiliar .
• Se isso não funcionar, o plugin FlyingPress de Gijo Varghese tem ótimas críticas.

3. Use ferramentas de remoção de CSS

Existem muitas ferramentas online gratuitas para remover CSS não utilizado.

PurifyCSS -ferramenta gratuita de remoção de CSS. Adicione seu site, clique em “limpar CSS” com a saída de redução ativada. Assim que a varredura for concluída, baixe seu arquivo CSS combinado, purificado e minimizado.

Unused-CSS -ferramenta de remoção de CSS freemium. Você pode executar uma página por meio da ferramenta e ela diz que muito CSS será removido (e a porcentagem de seletores CSS usados). Você precisará fornecer a eles seu e-mail e se inscrever em um plano pago se quiser baixar o CSS para todo o seu site.

UnCSS -ferramenta de remoção de CSS mais tediosa que requer copie/cole seu HTML e CSS em sua ferramenta e faça o download. KeyCDN diz que é mais preciso do que PurgeCSS, pois olha para o real páginas da web em vez de arquivos individuais, mas também é mais lento e requer mais configuração manual.

4. CSS crítico inline e CSS não crítico adiado

Otimização automática e JavaScript assíncrono geralmente faz um trabalho melhor na otimização de CSS e JavaScript do que plug-ins de cache, incluindo WP Rocket.

WP Rocket permite reduzir/combinar CSS e otimizar a entrega de CSS (para gerar CSS crítico e embuti-lo). No entanto, o Autoptimize pode produzir resultados ainda melhores do que o WP Rocket-como aconteceu comigo.

Instale a otimização automática e ative as configurações para otimizar/agregar arquivos CSS e JavaScript. Em seguida, instale Async JavaScript e clique em “aplicar adiar” nas configurações. Se você testar novamente seu site, poderá ver melhores pontuações não apenas para remover CSS não utilizado, mas também problemas de bloqueio de renderização também.

5. Minificar e combinar CSS

O Minify CSS quase sempre deve estar ativado e remove os caracteres desnecessários dos arquivos CSS, tornando-os menores.

É discutível se a combinação de arquivos CSS é benéfica, mas WP Johnny sugere ativar isso para sites menores e desativá-lo para sites grandes. Você deve habilitá-lo em seu site e nos resultados do teste.

Se você estiver usando a otimização automática para minimizar CSS (chamado de “otimizar CSS” nas configurações), deve ser desabilitado em seu plug-in de cache. WP Rocket faz isso automaticamente quando habilitado em Autoptimize.

6. Veicular CSS de um CDN

Se você estiver usando um CDN, certifique-se de que os arquivos CSS (e outros recursos) sejam veiculados a partir do CDN. Às vezes, os CDNs não regravam automaticamente os ativos, de modo que eles estão sendo veiculados a partir do CDN. Uma reconfiguração do CDN pode garantir que sim. Isso pode ser ativado em Perfmatters ou WP CDN Rewrite .

Sem CDN:
https://example.com/style.css

Com CDN:
http://cdn.example.com/style.css

7. Desativar estilos WooCommerce em páginas que não sejam de comércio eletrônico

Por padrão, o WooCommerce carrega estilos em todo o seu site.

Se você usar esses estilos apenas em páginas de comércio eletrônico, poderá desativá-los em qualquer outro lugar. WooCommerce tem documentação ou usa Perfmatters ou Desative o aumento do WooCommerce .

8. Evite criadores de páginas pesadas

Construtores de páginas pesadas (especificamente Elementor e Divi ) adicione muitos CSS extra para seu site .

No mínimo, considere codificar seu cabeçalho, menu, rodapé e barra lateral do blog. Você ainda pode usar seu construtor de páginas para projetar outro conteúdo, mas essas áreas carregam em todo o seu site e podem melhorar significativamente as pontuações de PSI. O código rígido é muito mais leve do que os criadores de páginas.

Contratei WP Johnny para remova Elementor e substitua-o por Gutenberg. A primeira coisa que ele fez foi codificá-los e eu imediatamente vi uma melhoria. Se você deseja remover Elementor ou Divi todos juntos, as alternativas populares são Oxygen Builder, GeneratePress e Gutenberg.

Só para ter uma ideia de tudo carregado com Elementor (Divi não é melhor):

9. Evite plug-ins que injetam CSS

Alguns plug-ins (formulários, controles deslizantes e outros) injetam CSS que carrega em todo o site.

Revise esta lista de plug-ins lentos a serem evitados ou use ferramentas como Query Monitor para encontrar seus plug-ins de carregamento mais lento. A Extensão WP Hive do Chrome permite que você navegue no WordPress repositório enquanto visualiza se um plug-in causa alto uso de memória ou tem um impacto significativo no PageSpeed ​​Insights. Instale a extensão e ela adiciona uma seção à direita das informações do plug-in.

10. Remova CSS não utilizado com RapidLoad

RapidLoad é um plugin premium desenvolvido pela equipe Autoptimize.

Até onde sei, é o único plug-in totalmente automatizado que remove CSS não utilizado no WordPress. A única razão pela qual tem análises negativas é porque as pessoas o instalam pensando que é um plug-in gratuito, mas depois são solicitadas a comprar um assinatura . Caso contrário, haverá pouca ou nenhuma reclamação sobre isso.

Baixe o plug-in, compre uma assinatura e o plug-in fará o resto. Ele irá processar automaticamente cada URL. Em média, o RapidLoad removeu cerca de 80% do CSS de todo o meu conteúdo.

11. Descarregue CSS personalizado com Asset CleanUp Pro

Se você precisar descarregar CSS codificado (não enfileirado), Asset CleanUp Pro permite que você faça isso, enquanto a versão gratuita do Asset CleanUp (e do Perfmatters) não.

O Asset CleanUp Pro também permite alterar a localização do CSS para HEAD/BODY, bem como descarregar o CSS em outras páginas, como taxonomias, autor, pesquisa, pesquisa WooCommerce, 404 e arquivos de data.

Teste novamente seu site para CSS não utilizado

Execute o seu site WordPress por meio do PageSpeed ​​Insights ou Lighthouse e verifique se há erros CSS não utilizados. Esperançosamente, este guia ajudou você a otimizá-lo o suficiente para finalmente passar na auditoria.

Perguntas frequentes

Atenciosamente,
Tom

Source link