Gerador de Critical CSS.

Gere o Critical Path CSS e aumente a velocidade do seu site

⚙

Critical CSS em 3 passos simples

  1. Insira a URL da página para a qual você quer gerar o Critical CSS
  2. Cole os resultados em uma tag <style> na sua página, logo abaixo de <title>
  3. Adie o carregamento das folhas de estilo originais
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

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 'above the fold'. É a parte da página que você vê no navegador sem precisar rolar. Como a viewport visível é a primeira coisa que o visitante vê, você deve priorizar a renderização dela. O Critical CSS resolve isso.

Por que usar o Critical CSS?

Em resumo: é muito mais rápido. O CSS do critical path (above-the-fold) é uma das técnicas mais importantes e de maior impacto para otimizar a entrega de CSS. Pela forma como os navegadores modernos funcionam, os estilos de arquivos externos são render blocking. Isso significa que o navegador não inicia a renderização (a geração da render tree) até baixar todos os arquivos CSS externos no head da página. Quando o navegador precisa baixar um ou mais arquivos CSS, a página bloqueia por 100ms ou mais. O PageSpeed Insights sugere eliminar recursos render blocking para acelerar o tempo de carregamento da página.
Evite isso usando o Critical CSS. O Critical CSS é o conjunto de CSS necessário para exibir apenas a parte visível da página. Esse Critical CSS geralmente fica inline, no head da página. Assim, o navegador não precisa baixar arquivos CSS antes de iniciar a renderização. Enquanto a página é exibida, o navegador baixa os arquivos CSS finais em segundo plano.

Como usar o gerador de Critical CSS?

Primeiro, gere o Critical Path CSS da página. Insira a URL e clique em 'Gerar Critical CSS'. O CSS extraído aparece em segundos.
Copie esse CSS e insira em uma tag <style> no <head> da página, logo abaixo de <title>.
O próximo passo é adiar o CSS original. Existem 3 métodos para adiar o CSS:

  1. Use preload no CSS e troque o atributo 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 novos visitantes que ainda não têm os arquivos CSS no cache do navegador. Para visitantes recorrentes, o Critical CSS é pouco necessário. Os arquivos CSS podem ser carregados do cache do navegador.

Devo combinar minhas folhas de estilo?

Combinar as folhas de estilo deixa o carregamento mais rápido após implementar o Critical CSS? Não existe uma resposta simples. Às vezes é mais rápido, às vezes não. Isso envolve o critical rendering path. Se houver mais de 5 recursos de alta prioridade, combinar algumas folhas de estilo faz sentido.

Como o gerador de Critical CSS funciona?

O gerador de Critical CSS funciona em uma plataforma NodeJs customizada. Acessamos a 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 na renderização da 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 de WordPress para o gerador de Critical CSS?

Sim. Ele se chama Core Web Vitals plugin e foi desenhado para funcionar com o nosso extrator de Critical Path.

Feedback / status beta

O gerador de Critical CSS está em beta. Isso significa testes constantes. O gerador de Critical CSS não funcionou para você? Não se preocupe... tente de novo em 5 minutos!

Tem feedback ou quer uma funcionalidade nova? Fale comigo