Demystifying the critical rendering path
How the browser turns HTML, CSS and JavaScript into pixels, and where WordPress themes and page builders break the critical rendering path. DevFest Catarinense 2023.
Desvendando o Critical Rendering Path, or demystifying the critical rendering path, is my talk about how the browser turns HTML, CSS and JavaScript into pixels, and where WordPress themes and page builders break that process. I gave it at DevFest Catarinense 2023 on December 2, 2023. The critical rendering path is the sequence of steps the browser must finish before it can show the first content, so anything that blocks it delays what visitors see, and usually the LCP too.
Where I gave this talk
| Date | Event | Session | Link |
|---|---|---|---|
| December 2, 2023 | DevFest Catarinense 2023 | Desvendando o Critical Rendering Path | Official session page |
What the talk covers
The first part follows the browser step by step:
- The browser downloads the HTML and parses it into the DOM.
- It finds stylesheets and builds the CSSOM. CSS is render blocking: the page cannot paint until the CSS in the critical path has loaded.
- Classic scripts in the head stop the parser until they download and run, unless they use defer or async.
- The DOM and CSSOM combine into the render tree, then the browser calculates layout and paints.
The second part looks at the same steps on a WordPress site. This is where most of the time goes in my audits:
- Themes and plugins that enqueue their CSS and JavaScript on every page, even on templates that never use them.
- Page builders that add large stylesheets and deep DOM trees, which make style calculation and layout slower.
- Scripts in the head without a loading strategy. Since WordPress 6.3,
wp_enqueue_script()accepts defer and async strategies, so plugin and theme code can stop blocking the parser. - A hero image the browser discovers late, because it is a CSS background or lazy-loaded. WordPress 6.3 added
fetchpriority="high"for the image it expects to be the LCP. - Web fonts that hold back text rendering.
The talk ends with how to see the critical path yourself in the Performance panel of Chrome DevTools and in the Lighthouse diagnostics of PageSpeed Insights, and what to change first.
Who it is for
Front-end developers and WordPress developers who already build themes or sites and want to understand why a page feels slow before it shows anything. Basic HTML and CSS are enough to follow along.
Related articles and guides
The critical rendering path shows up in the field as LCP. The written guide LCP in WordPress: causes and fixes covers render-blocking resources, fetchpriority and lazy loading in detail. For the wider view, see how to speed up WordPress and Core Web Vitals for WordPress. My other sessions are on the talks page.