Gerador de Critical CSS.

Gere Critical Path CSS e acelere o 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 da tag <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

Critical CSS é uma coleção de declarações CSS que são usadas para renderizar a janela de visualização visível (viewport). A janela de visualização visível é frequentemente chamada de conteúdo 'above the fold' (acima da dobra). É aquela parte de uma página da web que você pode ver no seu navegador sem precisar rolar. Como a janela de visualização visível é a primeira coisa que um visitante vê, você deve priorizar a renderização da janela de visualização visível. O Critical CSS pode ajudá-lo a fazer isso!

Por que devo usar o Critical CSS

Em resumo: porque é muito mais rápido! O Critical Path (above-the-fold) CSS é 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 de bloqueio de renderização (render blocking). Isso significa que um navegador não começará a renderizar (gerar a árvore de renderização, para ser específico) até que tenha baixado todos os arquivos CSS externos no cabeçalho (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 de bloqueio de renderização para ajudar a sua página a carregar mais rápido.
Uma maneira 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. Este Critical CSS é frequentemente mostrado inline, no cabeçalho da página. Como resultado, um navegador não precisa baixar 1 ou mais arquivos CSS antes de começar a renderizar. Enquanto isso, enquanto a página é exibida, o seu navegador baixa os arquivos CSS finais em segundo plano.

Como uso o gerador de Critical CSS?

Antes de mais nada, você precisa gerar o Critical Path CSS para a sua página da web. Basta fornecer a URL da sua página e depois pressionar '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 da tag <title>
O próximo passo é adiar (defer) o seu CSS original. Existem 3 métodos para adiar o seu CSS.

  1. Pré-carregar o CSS e trocar o rel no carregamento (on load)
  2. Carregar o CSS com media=print e no carregamento trocar o elemento media
  3. Colocar os links CSS originais no rodapé (footer) da sua página

Armazenamento em cache de CSS não crítico

O Critical CSS é incrivelmente rápido para visitantes de primeira viagem que ainda não têm os seus arquivos CSS armazenados no cache de seus navegadores. Para visitantes recorrentes, geralmente há pouca necessidade de 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 outras vezes não é. Isso tem a ver com o Critical Rendering Path. 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 personalizada. Basicamente, visitamos a sua página da web com um navegador real baseado em Chrome. Avaliamos o seu site em diferentes viewports e determinamos quais partes de suas folhas de estilo são usadas para a renderização do viewport visível (a parte visível de 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 trabalhar em conjunto com nosso extrator Critical Path.

Feedback / status beta

Atualmente, o gerador de Critical CSS está em status beta. Isso significa que ainda estou experimentando 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