Gerador de Critical CSS.

O que é Critical CSS

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

Por que usar Critical CSS

Resumindo: porque é muito mais rápido! O CSS do caminho crítico (acima da dobra) é uma das técnicas mais importantes e eficazes para otimizar a entrega de CSS. Pelo modo 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 (mais especificamente, gerar a render tree) 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 Critical CSS. O Critical CSS é o conjunto de CSS necessário para exibir apenas a parte visível da página. Esse Critical CSS costuma ser incluído inline, no head da página. Com isso, 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 usar o gerador de Critical CSS?

Primeiro, você precisa gerar o Critical Path CSS da página. Basta informar a URL da página e clicar em 'Gerar Critical CSS'. Em poucos segundos, você verá o CSS extraído
Copie esse CSS e insira no <head> da página, dentro de uma tag <style>, logo abaixo do <title>
O próximo passo é adiar o carregamento do 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 troque o elemento media no load
3. Coloque os links do CSS original no rodapé da página

Cache de CSS não crítico

O Critical CSS é extremamente rápido para quem visita o site pela primeira vez e ainda não tem os arquivos CSS salvos no cache do navegador. Para visitantes que retornam, 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?

Depois de implementar o Critical CSS, é mais rápido combinar as folhas de estilo? Não existe uma resposta simples 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 funciona o gerador de Critical CSS?

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

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

Sim. É o plugin Core Web Vitals, desenvolvido especificamente para funcionar em conjunto com o nosso extrator de Critical Path.

Feedback / status beta

No momento, o gerador de Critical CSS está em status beta. Isso significa que ainda estou fazendo testes o tempo todo. O gerador de Critical CSS não funcionou para você? Não se preocupe... tente de novo em 5 minutos!

Tem feedback ou sentiu falta de algum recurso? Fale comigo