Critical CSS em 3 passos simples
- Introduza o URL da página para a qual quer criar o Critical CSS
- Cole o resultado numa tag <style> na página, logo abaixo de <title>
- Adie o carregamento das stylesheets originais
<link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>
O que é o Critical CSS
O Critical CSS é um conjunto de declarações CSS usadas para renderizar o viewport visível. O viewport visível é muitas vezes chamado "conteúdo above the fold". É a parte da página web que se vê no browser sem ter de fazer scroll. Como o viewport visível é a primeira coisa que o visitante vê, deve priorizar a sua renderização. O Critical CSS ajuda a fazer isso.
Porque deve usar Critical CSS
Resumindo: porque é muito mais rápido! O Critical Path CSS (above-the-fold) é uma das técnicas mais importantes e com maior impacto para otimizar o carregamento de CSS. Pela forma como todos os browsers modernos funcionam, todos os estilos em ficheiros externos são considerados render blocking. Isto significa que o browser não começa a renderizar (mais especificamente, a gerar a render tree) até ter descarregado todos os ficheiros CSS externos no head da página. Quando o browser tem de descarregar 1 ou mais ficheiros CSS, a página pode facilmente bloquear 100 ms ou mais. O Google PageSpeed Insights sugere eliminar os recursos render blocking para ajudar a página a carregar mais rápido.
Uma forma de o evitar é usar Critical CSS. O Critical CSS é o conjunto de CSS necessário para mostrar apenas a parte visível da página. Este Critical CSS é muitas vezes incluído inline, no head da página. Como resultado, o browser não tem de descarregar 1 ou mais ficheiros CSS antes de poder começar a renderizar. Entretanto, enquanto a página é apresentada, o browser descarrega os ficheiros CSS finais em segundo plano.
Como usar o gerador de Critical CSS?
Primeiro, tem de gerar o Critical Path CSS da página web. Basta introduzir o URL da página e carregar em 'Gerar Critical CSS'. Após alguns segundos, verá o CSS extraído
Copie esse CSS e coloque-o numa tag <style> no <head> da página, logo abaixo de <title>
O passo seguinte é adiar o carregamento do CSS original. Existem 3 métodos para adiar o CSS.
- Fazer preload do CSS e trocar o rel no load
- Carregar o CSS com media=print e trocar o atributo media no load
- Colocar os links do CSS original no footer da página
Cache de CSS não crítico
O Critical CSS é extremamente rápido para visitantes que chegam pela primeira vez e ainda não têm os ficheiros CSS guardados na cache do browser. Para visitantes recorrentes, o Critical CSS raramente é necessário, já que os ficheiros CSS podem ser carregados a partir da cache do browser.
Devo combinar as stylesheets?
Depois de implementar o Critical CSS, é mais rápido combinar as stylesheets? Não há uma resposta simples para essa pergunta. Por vezes é mais rápido combinar as stylesheets; outras vezes não. Isto está relacionado com o critical rendering path. Se existirem mais de 5 recursos de alta prioridade, costuma fazer sentido combinar algumas stylesheets.
Como funciona o gerador de Critical CSS?
O gerador de Critical CSS funciona sobre uma plataforma NodeJs personalizada. No essencial, visitamos a página web com um browser real baseado no Chrome. Avaliamos o site em diferentes viewports e determinamos que partes das stylesheets são usadas para renderizar o 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 WordPress para o gerador de Critical CSS?
Sim, existe. Chama-se plugin Core Web Vitals e foi concebido especificamente para funcionar em conjunto com o nosso extrator de Critical Path.
Feedback / estado beta
Atualmente, o gerador de Critical CSS está em estado beta. Isto significa que continuo constantemente a fazer experiências. O gerador de Critical CSS não está a funcionar para si? Não se preocupe... tente novamente dentro de 5 minutos!
Feedback ou alguma funcionalidade em falta? Diga-me