KakapoWP KakapoWP
Entrar Testar grátis
Kakapo Performance

CSS crítico

O que a parte de cima da página precisa fica no head. O resto vem depois.

Para cada template, o kakapo busca uma página de exemplo real do seu site, lê do disco as folhas de estilo locais ali vinculadas e verifica cada regra contra o documento. O que é preciso lá em cima vai inline para o head; as folhas de estilo avaliadas carregam depois, sem bloquear a renderização. Nenhum navegador participa disso: “visível lá em cima” é uma aproximação declarada a partir da ordem dos elementos e, na dúvida, ela mantém a regra. Por isso existem pré-visualização, modo de teste e uma chave por template.

Experimenta gratuitamente durante 24 horasTodos os recursos do Performance

CSS crítico

7 templates · cada template com sua execução, sua chave e sua pré-visualização

Modo de testePré-visualização

O que o CSS crítico oferece

7 templates, cada um analisado e aprovado separadamente
CSS crítico inline no head, as folhas de estilo analisadas com carga adiada
Relatório: regras que não atingiram nenhum elemento
Pré-visualização da mesma página com e sem tratamento
Modo de teste: só administradores logados veem a mudança
Lista de exclusão para URLs, lista de exceções para folhas de estilo

É assim que funciona

1

Analisar o template — buscar uma página de exemplo, conferir as regras

2

Comparar a pré-visualização com e sem tratamento

3

Aprovar o template e depois passar do modo de teste para o ativo

Perguntas frequentes sobre CSS crítico

É medido o que realmente aparece na parte de cima?
Não. Não há navegador nem viewport. Todos os elementos abaixo de body são numerados; como “lá em cima” valem os primeiros 30 % (ajustável entre 5 e 90) mais tudo o que estiver dentro dos marcos registrados — cabeçalho, navegação, primeiro h1 e o que você acrescentar. Onde o procedimento esbarra num limite, a regra conta como acertada: alguns kilobytes a mais são mais inofensivos do que uma regra faltando.
Posso mandar remover daqui as regras não utilizadas?
A lista é um relatório, não uma ferramenta. A contagem é feita contra uma página de exemplo por template — classes que o JavaScript só define no clique, ou um formulário em outra página, não aparecem ali. Convém apagar no código-fonte do theme, onde fica rastreável.
O que a análise precisa e o que acontece depois?
A extensão do PHP dom/libxml e um loopback funcionando — o site precisa alcançar a si mesmo por HTTP. Se faltar um dos dois, a análise nem começa; o motivo aparece ali mesmo. Se depois mudar um arquivo CSS analisado ou o theme, o tratamento é suspenso em vez de entregar um CSS crítico possivelmente errado.

Mais recursos de performance

Assets & scripts →Minify →Preload & DNS →
Pronto?

Teste o Performance grátis por 24 horas.

Sem cartão de crédito, sem riscos. Pronto a começar em 2 minutos.

Experimenta agora de graça