Gerador de Critical CSS.

O que é Critical CSS

O Critical CSS é uma coleção de declarações CSS usadas para renderizar o viewport visível. O viewport visível costuma ser chamado de conteúdo 'acima da dobra'. É a parte da página que você vê no navegador sem precisar rolar. Como o viewport visível é a primeira coisa que o visitante vê, você deve priorizar sua renderização. O Critical CSS ajuda você a fazer isso!

Por que devo usar o Critical CSS

Em resumo: porque é muito mais rápido! O CSS do caminho crítico (acima da dobra) é uma das técnicas mais importantes e de maior impacto disponíveis para otimizar a entrega do CSS. Devido à forma como todos os navegadores modernos funcionam, todos os estilos de arquivos externos são considerados render blocking. Isso significa que o navegador não começa a renderizar (gerar a render tree, para ser específico) até baixar todos os arquivos CSS externos no head da página. Quando o navegador precisa baixar 1 ou mais arquivos CSS, a página pode facilmente bloquear por 100ms ou mais. O Google PageSpeed Insights sugere eliminar recursos render blocking para ajudar a página a carregar mais rápido.
Uma forma de evitar isso é usar o Critical CSS. O Critical CSS é uma coleção de CSS necessária para mostrar apenas a parte visível da página. Esse Critical CSS geralmente aparece inline, no head da página. Como resultado, o navegador não precisa baixar 1 ou mais arquivos CSS antes de começar a renderizar. Enquanto a página é exibida, o navegador baixa os arquivos CSS finais em segundo plano.

Como eu uso o gerador de Critical CSS?

Primeiro, você precisa gerar o Critical Path CSS da sua página. Basta informar a URL da sua página e clicar em 'Gerar Critical CSS'. Após alguns segundos, você verá o CSS extraído
Copie esse CSS e coloque no <head> da sua página em uma tag <style>, logo abaixo do <title>
O próximo passo é adiar seu CSS original. Existem 3 métodos para adiar o CSS.

1. Faça o preload do CSS e troque o rel no load
2. Carregue o CSS com media=print e no load troque o elemento media
3. Coloque os links do CSS original no rodapé da página

Cache de CSS não crítico

O Critical CSS é incrivelmente rápido para visitantes da primeira vez que ainda não possuem seus arquivos CSS armazenados no cache do navegador. Para visitantes recorrentes, geralmente há pouca necessidade de Critical CSS, já que os arquivos CSS podem ser carregados do cache do navegador.

Devo combinar minhas folhas de estilo?

É mais rápido combinar as folhas de estilo após implementar o Critical CSS? Não existe uma resposta fácil para essa pergunta. Às vezes é mais rápido combinar as folhas de estilo, e às vezes não é. Isso tem a ver com o caminho crítico de renderização. Se houver mais de 5 recursos de alta prioridade, geralmente faz sentido combinar algumas folhas de estilo.

Como o gerador de Critical CSS funciona?

O gerador de Critical CSS funciona em uma plataforma NodeJs customizada. Basicamente, visitamos a sua página com um navegador real baseado em Chrome. Avaliamos seu site em diferentes viewports e determinamos quais partes das folhas de estilo são usadas para a renderização do viewport visível (a parte visível da página). Em seguida, limpamos e minificamos o CSS necessário para a renderização.

Existe um plugin de WordPress para o seu gerador de Critical CSS?

Sim, existe. Ele se chama plugin Core Web Vitals, projetado especificamente para trabalhar junto com nosso extrator de Critical Path.

Feedback / status beta

Atualmente, o gerador de Critical CSS está em status beta. Isso significa que ainda experimento o tempo todo. O gerador de Critical CSS não está funcionando para você? Não se preocupe... tente novamente em 5 minutos!

Feedback ou falta algum recurso? Me avise