Desvendando o Critical Rendering Path
Como o navegador transforma HTML, CSS e JavaScript em pixels, e onde temas e page builders do WordPress quebram o caminho crítico. DevFest Catarinense 2023.
Desvendando o Critical Rendering Path é a minha palestra sobre como o navegador transforma HTML, CSS e JavaScript em pixels, e onde temas e page builders do WordPress quebram esse processo. Apresentei no DevFest Catarinense 2023, em 2 de dezembro de 2023. O critical rendering path, ou caminho crítico de renderização, é a sequência de etapas que o navegador precisa concluir antes de mostrar o primeiro conteúdo. Tudo que bloqueia esse caminho atrasa o que o visitante vê, e normalmente o LCP junto.
Onde apresentei esta palestra
| Data | Evento | Sessão | Link |
|---|---|---|---|
| 2 de dezembro de 2023 | DevFest Catarinense 2023 | Desvendando o Critical Rendering Path | Página oficial da sessão |
O que a palestra cobre
A primeira parte acompanha o navegador etapa por etapa:
- O navegador baixa o HTML e monta o DOM.
- Encontra as folhas de estilo e monta o CSSOM. CSS bloqueia a renderização: a página não pinta nada até o CSS do caminho crítico carregar.
- Scripts clássicos no head param o parser até baixarem e rodarem, a não ser que usem defer ou async.
- DOM e CSSOM se juntam na render tree, e o navegador calcula o layout e pinta.
A segunda parte olha as mesmas etapas num site WordPress. É onde vai a maior parte do tempo nas minhas auditorias:
- Temas e plugins que carregam CSS e JavaScript em todas as páginas, até nos templates que nunca usam aquilo.
- Page builders que adicionam folhas de estilo grandes e árvores de DOM profundas, o que deixa o cálculo de estilo e o layout mais lentos.
- Scripts no head sem estratégia de carregamento. Desde o WordPress 6.3, o
wp_enqueue_script()aceita as estratégias defer e async, e o código de plugins e temas pode parar de bloquear o parser. - Imagem principal que o navegador descobre tarde, porque é background de CSS ou tem lazy load. O WordPress 6.3 passou a colocar
fetchpriority="high"na imagem que ele espera ser o LCP. - Fontes web segurando a renderização do texto.
No fim, a palestra mostra como enxergar o caminho crítico no painel Performance do Chrome DevTools e nos diagnósticos do Lighthouse no PageSpeed Insights, e o que mudar primeiro.
Para quem é
Devs front-end e devs WordPress que já criam temas ou sites e querem entender por que uma página parece lenta antes de mostrar qualquer coisa. HTML e CSS básicos bastam para acompanhar.
Artigos e guias relacionados
Nos dados de campo, o caminho crítico aparece como LCP. O guia LCP no WordPress: causas e correções trata em detalhe de recursos que bloqueiam a renderização, fetchpriority e lazy load. Para a visão geral, veja como acelerar o WordPress e Core Web Vitals no WordPress. As outras sessões estão na página de palestras.