Extrator de critical CSS: estilos inline acima da dobra | We.Inc
Cole seu HTML e CSS, escolha um tamanho de tela e fique só com as regras que estilizam o que aparece antes da rolagem. Copie um bloco style inline e o padrão de preload.
Extrator de critical CSS
Critical CSS é o pequeno conjunto de regras necessário para desenhar o que o visitante vê antes de rolar a página. Cole aqui o HTML e a folha de estilos de uma página, escolha um tamanho de tela, e esta ferramenta monta a página em um quadro fixo, mantém as regras que correspondem aos elementos visíveis e entrega um bloco style inline mais um link de stylesheet adiado.
O que o extrator mantém
Tipo de regra
Mantida quando
Por quê
Regra de estilo
O seletor corresponde a um elemento cuja borda superior está dentro da altura escolhida
Esse elemento é pintado na primeira visualização
html, body, :root, *
Sempre
Fontes base, cores e custom properties afetam tudo o que está visível
Bloco @media
Mantido só com as regras internas que correspondem
Outros tamanhos de tela continuam recebendo a primeira pintura certa
@font-face
Sempre (pode ser desligado)
O texto visível precisa da sua fonte declarada
@keyframes
O nome é usado por uma regra mantida
Animações em elementos visíveis continuam funcionando
Os navegadores esperam todas as folhas de estilo do head antes de desenhar qualquer coisa. Colocar inline as poucas regras de que a primeira tela precisa e depois carregar o arquivo completo sem bloquear faz a página aparecer mais cedo. Esta ferramenta faz essa seleção para você a partir do código que você cola. Ela roda no seu navegador e nunca busca uma URL, então cole o HTML e o CSS finais da página em vez de um link.
Cole o HTML da página (o conteúdo do body basta) e o CSS da folha de estilos.
Escolha um tamanho de tela pronto ou digite uma largura e uma altura de dobra em pixels.
A ferramenta renderiza seu HTML em um quadro isolado nesse tamanho, com scripts desligados, e depois confere cada seletor contra os elementos na tela.
Copie o bloco style inline para o head e o link de preload que carrega a folha de estilos completa depois. As estatísticas mostram quantas regras foram mantidas e o tamanho do resultado.
Rode em um tamanho de celular e em um de desktop, e junte os dois resultados, porque a dobra fica em um lugar diferente em cada um.
Estados interativos como :hover e :focus são comparados com o próprio elemento, então um botão visível mantém sua regra de hover. Remova-as à mão se quiser o menor resultado possível.
Conteúdo adicionado por JavaScript depois do carregamento não está no HTML colado, então seus estilos não são detectados. Cole o HTML como ele fica depois de renderizado se a sua página se monta no navegador.
Mantenha o bloco inline pequeno. O web.dev sugere manter o conteúdo acima da dobra em cerca de 14 KB comprimidos para que ele chegue nas primeiras idas e voltas da rede.
Refaça a extração sempre que o topo da página mudar. Critical CSS desatualizado causa um flash de conteúdo sem estilo no primeiro carregamento.
Perguntas frequentes
Isto é o mesmo que os pacotes Critical ou Penthouse?
Segue a mesma ideia de um jeito mais simples. Essas ferramentas de linha de comando controlam um navegador headless de verdade contra as suas páginas compiladas. Esta página usa o seu próprio navegador e o código colado, então trate o resultado como uma boa aproximação e teste a página depois.
Por que o link de preload precisa de onload?
rel=preload com as=style baixa a folha de estilos sem aplicá-la. O handler onload troca o rel para stylesheet quando o arquivo chega, o que a aplica sem bloquear a primeira pintura. A cópia em noscript cobre visitantes com scripts desativados.
Colocar CSS inline prejudica o cache?
As regras inline são reenviadas com cada página HTML, e é por isso que o bloco deve ser pequeno. A folha de estilos completa continua sendo um arquivo separado, então fica em cache normalmente depois da primeira visita.
Ela consegue ler o meu site no ar?
Não. Uma página estática no seu navegador não pode carregar o código de outro site, então nada é buscado. Abra sua página, veja o código-fonte e a folha de estilos, e cole os dois. Nada do que você cola é enviado.
E se o meu CSS usa um framework como Tailwind?
Cole o arquivo CSS compilado que o seu build gera, não o código-fonte com linhas @tailwind ou @import. O extrator trabalha com regras finalizadas, e as classes utilitárias no seu HTML são comparadas como qualquer outro seletor.
Onde a dobra realmente fica
Não existe uma dobra única. Um celular na vertical pode mostrar 650 pixels de altura, enquanto um notebook mostra 800 e um monitor grande mostra mais. Escolha os tamanhos que seus visitantes mais usam e deixe uma margem abaixo da linha, porque as pessoas muitas vezes começam a rolar imediatamente.
O extrator considera um elemento visível quando a borda superior dele fica acima da altura escolhida. Um hero alto que começa na tela e termina abaixo dela é mantido, que é o que você quer.
Colocando o resultado na sua página
Coloque o bloco style inline no head antes de qualquer outra coisa que renderize. Troque o seu link normal de stylesheet pelo padrão de preload para que o resto do CSS carregue sem segurar a primeira pintura.
Confira o resultado com a rede limitada nas ferramentas de desenvolvedor do navegador. Se algo pular ou mudar de estilo quando o arquivo completo chegar, faltou uma regra para um elemento visível; adicione-a ao bloco inline.
O padrão de carregamento que a ferramenta escreve
Regras críticas inline, depois o resto sem bloquear
Este é o padrão descrito no web.dev. O bloco style guarda as regras extraídas; o link de preload busca o arquivo completo e o aplica no carregamento, e a linha noscript é o plano B.
Limites conhecidos de um extrator no navegador
O que conferir à mão
Situação
O que acontece
O que fazer
Estilos adicionados por scripts
Não são vistos, os scripts não rodam no quadro
Cole o HTML renderizado em vez do template
Imagens sem width e height
Podem ficar com altura zero e puxar o conteúdo seguinte para cima
Adicione os atributos width e height às imagens
Web fonts
Não são baixadas, então o texto pode quebrar de outro jeito
Deixe uma margem abaixo da altura da dobra
Seletores que o navegador rejeita
Descartados pelo navegador antes da verificação
Corrija a sintaxe; as estatísticas mostram quantas regras foram lidas
Páginas muito longas
Só a primeira tela é mantida, como esperado
Rode de novo em cada tamanho de tela que importa para você
Extrair critical CSS
A ferramenta abre com a página de exemplo de uma padaria para você ver o resultado antes de colar seu próprio código.
HTML da página
CSS da folha de estilos
Tamanho de tela
Tablet 820 x 1000
Notebook 1366 x 768
Desktop 1920 x 1000
Largura (px)
Altura da dobra (px)
Sempre manter regras @font-face
Sua página no tamanho escolhido, scripts desligados
A linha tracejada marca a dobra.
{read} regras lidas, {kept} mantidas. O critical CSS tem {bytes} bytes antes da compressão.
Montando a página...
Nenhuma regra correspondeu. Confira se o HTML e o CSS são da mesma página.