Speeding Up the Critical Rendering Path
I recently did a talk at my place of work on the process that the browser goes through to render a page, following a subject that I’ve recently been researching. Part of the talk is summed up in my previous post Browser Rendering or: How I Learned to Stop Wondering and Understand the CSSOM.
In the talk I highlighted how a web developer could use this knowledge to implement improvements to the Critical Rendering Path (CRP). The CRP is the steps that a browsers need to take before any visual change can be shown to the user.
A simplified version of these steps would be:
- Parse HTML and build DOM
- Parse CSS and build CSSOM
- Build Render Tree using the DOM and CSSOM
- Execute first render
The question is how can we optimise the CRP to speed up the time to first render?
Minimise the amount of bytes to be downloaded
It seems obvious to say, but if the browser is given less things to parse, then it will take less time to do so.
- Using common sense, reduce and simplify your content as much as is practical so that you only use HTML, CSS and images that are absolutely required
- Reduce the size and amount of files that are implemented by the page - make use of optimisation steps such as minification, concatenation, image optimisation and compression, caching, sprites, etc
Reduce the length and complexity of the CRP
If page content is prioritised, it can be ensured that the CRP only contains content that the first render is reliant on.
- Consider styling above-the-fold content with inline CSS (in the head) to ensure that the first render is not dependant on construction of the CSSOM
To summarise, once you’ve streamlined your content, ensure that it is prioritised to deliver the first render sooner. The CRP has to be executed every time a webpage is visited, so it makes sense to ensure that it is as slight and also as relevant as possible.