Entendendo o CSS do WordPress
Antes de nos aprofundarmos, vamos entender como o CSS regular funciona no WordPress.
Cada tema do WordPress consiste em style.css que contém todo o código necessário para estilizar seu site. Os desenvolvedores de temas devem suportar todos os recursos do WordPress que incluem postagens de blog, comentários, página de produtos, página de associação, formulários, etc. Outros plugins que você instala também podem adicionar folhas de estilo CSS semelhantes.
Isso pode tornar os arquivos CSS inchados e grandes em tamanho de 200kb ou até mais.
O que é CSS de caminho crítico?
À medida que seus arquivos CSS crescem, seu navegador precisa baixar esses arquivos grandes, analisá-los e renderizá-los. Também conhecido como bloqueio de renderização. Ele também incrementará a primeira renderização significativa e a primeira renderização significativa.
Critical Path CSS é o CSS necessário para renderizar o conteúdo acima em cada página da web. Como o nome sugere, CSS "crítico", que ajuda o navegador a desenhá-lo e renderizá-lo rapidamente antes de carregar arquivos CSS completos.
Normalmente, o css do caminho crítico é incorporado no cabeçalho e o arquivo css de origem é carregado de forma assíncrona ou no rodapé para facilitar o uso.
Por que o CSS do Caminho Crítico é tão importante?
Você já deve ter visto um aviso de ferramentas como Google PageSpeed Insights ou GTmetrix dizendo "otimizar entrega de css" ou "adiar css não utilizado".
CSS crítico não tem nada a ver com o tempo de carregamento da página. Não aumenta/diminui o tempo de carregamento. Mas dá uma experiência de usuário muito melhor. Ajuda a "renderizar" ou "colorir" rapidamente uma página da web.
- Melhora o primeiro sorteio de conteúdo (FCP)
- Melhora o primeiro pagamento significativo (FMP)
- Remova o CSS não utilizado (tecnicamente não o remova, mas priorize o CSS "útil")
Aqui estão duas capturas de tela do meu blog com e sem CSS crítico.
Como você pode ver na seção "nenhum caminho css crítico", demorou quase 5 segundos para mostrar ao usuário algo útil em um dispositivo móvel. O navegador precisa fazer uma solicitação HTTP adicional ao arquivo css, baixá-lo, analisá-lo para iniciar a renderização. Mas ao usar CSS crítico, todo CSS necessário deve estar embutido e o navegador pode começar a renderizar imediatamente após carregar o arquivo HTML em um segundo ou menos.
Como criar CSS crítico no WordPress?
Existem várias maneiras de gerar CSS crítico no WordPress.
Usando plugins de cache
WP Rocket é um plugin de cache premium que funciona muito bem.
Uma das razões pelas quais eu uso o WP Rocket em todos os sites é a própria geração crítica de CSS. Eles geram CSS crítico separadamente para página inicial, página de postagens, página de categoria, página de produto, etc. e o incorporam. Eles restaurarão o CSS crítico se houver alterações no tema ou na configuração.
Tudo pode ser feito com o toque de um botão.
Outros plugins de cache que podem gerar CSS crítico
Swift Performance e LiteSpeed (requer servidor LiteSpeed/OpenLiteSpeed) são plugins semelhantes que podem gerar CSS Crítico. Ambos os plugins têm nuvem e cache completo embutidos em seus servidores.
Usando Autoptimize + Gerador de CSS Crítico Gratuito
Existem ferramentas online de terceiros que fornecem CSS importante ao inserir o URL do seu site. pegasaas é uma ótima ferramenta gratuita.
Aqui está como fazê-lo:
Passo 1. Acesse https://pegasaas.com/critical-path-css-generator/ e insira sua URL. Copie o "Critical Path CSS" gerado.
Passo 2 Nas configurações de otimização automática (ativar configurações avançadas), em "Opções de CSS", marque "Inline and Defer CSS" e cole o CSS copiado.
Prós:
- É grátis
Desvantagens:
- Nenhum CSS crítico separado para diferentes tipos de página (por exemplo: página inicial, página de postagens, página de categoria, página de produto etc.)
- Não reconstrua automaticamente na mudança de tema/configuração
Por que o próprio WordPress não pode gerar CSS crítico?
Como você deve ter notado, criar um caminho crítico css habilita serviços externos. Então, por que o próprio WordPress não pode gerá-lo?
A criação de Critical CSS é possibilitada por projetos de código aberto, como Critical (do Google), CriticalCSS ou penthouse. Todos esses projetos são baseados em NodeJS, não em PHP. Então, você precisa instalar o NodeJS em seu servidor. A maioria dos provedores de hospedagem compartilhada/gerenciada não permite isso por vários motivos.
