Gerador de Critical CSS.

Gere o Critical Path CSS e acelere seu site

⚙

Critical CSS em 3 passos simples

  1. Insira a URL da página para a qual você deseja criar 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 é frequentemente chamada de 'conteúdo acima da dobra' (above the fold). É a parte de uma página da web que você pode ver no navegador sem precisar rolar. Como a viewport visível é a primeira coisa que um visitante vê, você deve priorizar sua renderização. O Critical CSS pode ajudá-lo com isso!

Por que devo usar Critical CSS

Em resumo: porque é muito mais rápido! O Critical path CSS (acima da dobra) é uma das técnicas mais importantes e impactantes disponíveis para otimizar a entrega de CSS. Devido à forma como todos os navegadores modernos funcionam, todos os estilos de arquivos externos são considerados bloqueadores de renderização (render blocking). Isso significa que um navegador não começará a renderizar (gerar a árvore de renderização, para ser mais específico) até que tenha baixado todos os arquivos CSS externos no head da página. Quando um navegador precisa baixar 1 ou mais arquivos CSS, uma página pode facilmente bloquear 100ms ou mais. O Google PageSpeed Insights sugere a eliminação de recursos que bloqueiam a renderização para ajudar sua página a carregar mais rápido.
Uma maneira de evitar isso é usar o Critical CSS. O Critical CSS é um conjunto de CSS necessário para exibir apenas a parte visível da página. Esse Critical CSS é frequentemente exibido inline, no head da página. Como resultado, um navegador não precisa baixar 1 ou mais arquivos CSS antes de poder começar a renderizar. Enquanto isso, enquanto a página é exibida, seu navegador baixa os arquivos CSS finais em segundo plano.

Como uso o gerador de Critical CSS?

Primeiro de tudo, você precisa gerar o Critical Path CSS para sua página da web. Basta inserir 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-o no <head> da página, dentro de uma tag <style> na sua página, logo abaixo de <title>
O próximo passo é adiar seu CSS original. Existem 3 métodos para adiar seu 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 sua página

Fazendo cache de CSS não crítico

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

Devo combinar minhas folhas de estilo?

É mais rápido, após implementar o Critical CSS, combinar suas folhas de estilo? Não há uma resposta fácil para essa pergunta. Às vezes é mais rápido combinar suas folhas de estilo e às vezes não. Isso tem a ver com o caminho de renderização crítico (critical rendering path). 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 personalizada. Basicamente, visitamos sua página da web com um navegador real baseado no Chrome. Avaliamos seu site em diferentes viewports e determinamos quais partes de suas folhas de estilo são usadas para a renderização da viewport visível (a parte visível da sua página). Em seguida, limpamos e minificamos o CSS necessário para a renderização.

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

Sim, existe. Ele é chamado de plugin Core Web Vitals, projetado especificamente para funcionar em conjunto com nosso extrator de Critical Path.

Feedback / status beta

Atualmente, o gerador de Critical CSS está em status beta. Isso significa que ainda estou fazendo experimentações 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 sentindo falta de um recurso? Avise-me