Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
When we talk about providing users with an ultra-fast web experience, we often focus solely on what we, as website owners and web developers, should do.
But the truth is:
Delivering a fast web experience also requires a lot of work by the browser.
It receives our HTML, CSS, and JavaScript files and takes specific steps to convert them into pixels on the screen.
The secret to speeding up your performance lies in understanding what happens between receiving the resources and their processing to turn them into rendered pixels.
This process is also known as the critical rendering path (CRP).
And in this article, you’ll learn everything you need to know about CRP, and how to optimize it for faster rendering.
Let’s begin!
The Critical Rendering Path refers to the sequence of steps that a web browser takes to convert HTML, CSS, and JavaScript code into a visual representation on a user's screen.
It involves a series of processes, such as constructing the Document Object Model (DOM), generating the CSS Object Model (CSSOM), and combining both to create the Render Tree. The Render Tree is then used to calculate the layout and paint the pixels on the user's screen.
Critical Rendering Path optimization, on the other hand, refers to reducing the time spent by the web browser to execute each step of the sequence while prioritizing the content relevant to the user's current action.
To ensure your optimization efforts hit the nail on the head, you need to have an in-depth understanding of each step of the sequence. So the next couple of paragraphs are essential, and we strongly recommend reading them before taking action.
Here’s a quick overview of the steps performed by the browser when rendering a page:
Now let’s zone in on each step.
The Document Object Model (DOM) is the browser's internal representation of the HTML document.
When a web page is loaded, the browser parses the HTML and creates a tree-like structure of nodes that represent the elements in the document. Each node corresponds to an HTML element and has properties that describe its attributes, content, and position in the tree.
Important: The browser builds the DOM gradually, allowing us to optimize the rendering of the page by constructing an efficient structure and avoiding excessive DOM sizes.
While the DOM contains all the content of the page, the CSSOM includes all the information on how to style the DOM.
Another difference between DOM and CSSOM is that:
DOM construction is gradual, while CSSOM is not.
When a website is loaded, the browser has to process the CSS to apply the styles. Unlike HTML, which can be processed bit by bit, CSS needs to be processed all at once. This is because some styles might be overwritten by others later in the CSS file, so the browser needs to wait until it has read the whole CSS file before deciding which styles to apply.
This is done to avoid showing styles that will later be overwritten and wasting resources.
Simply put:
The browser blocks the rendering process until it receives and parses all the CSS.
That’s why CSS is considered a render-blocking resource.
The Render Tree is the combination of the DOM and CSSOM that the browser uses to create the visual representation of the web page.
The browser uses the Render Tree to calculate node dimensions and position as input for the painting process.
Important: Only visible content is captured in the render tree. Typically, the head section contains no visible information and is therefore excluded. Furthermore, If an element has a display: none property, neither the element nor its descendants are included in the render tree.
After the render tree is constructed, the next step is the layout. The layout establishes the placement and orientation of each element on the page by defining its dimensions, position, and interrelationships.
But here’s the thing:
The layout performance is impacted by the DOM.
In other words:
The greater the number of DOM nodes, the longer the layout process is.
The final stage is painting the pixels onto the screen, which follows the creation of the render tree and the layout.
Initially, the entire screen is painted during the load process. Subsequently, only the affected parts of the screen are repainted, as browsers are designed to repaint only the necessary area.
Keep in mind that the duration of the paint stage depends on the nature of the updates being implemented on the render tree.
Now let’s see what optimizations you can apply to help the browser and speed up some of the processes.
The time required for the browser to run through the entire process can vary. There are a lot of moving parts that contribute to the critical path length:
Nevertheless, there are three techniques that are considered to be the go-to options when it comes to CRP optimization:
Let’s dive a little deeper into how to implement each of the recommended optimization strategies:
You already know that when the browser encounters render-blocking CSS and JS resources, it must download, parse, and execute them before doing anything else, including rendering.
When it comes to optimizing CSS, you can implement the following techniques:
In terms of your JavaScript files, here’s what you can do:
There are a few optimizations you can apply to both CSS and JavaScript:
To reduce the amount of data the browser needs to download, we can employ techniques such as minification, compression, and caching of HTML, CSS, and JavaScript resources.
You already know what minification means, so let’s focus on the other two:
In general, browsers are pretty good at prioritizing the most important resources and fetching them first. However, in some cases, you could help them load your site even faster by manually prioritizing the most crucial resources.
You can use resource hints to tell the browser how to handle specific resources or web pages.
Here are the three main ones:
Important: Prefetch and preconnect are resource hints, and they are executed as the browser sees fit. The preload directive is a command which is mandatory for the browsers. Learn more about how to implement resource hints.
Now that you know how to handle Critical Rendering Path optimization, let’s look at some WordPress plugins that can automate the process.
All of the abovementioned optimizations can be done manually. However, some of them require technical knowledge to ensure you won’t break your site during the process.
Luckily for all WordPress users, there are plugins that can help with CRP optimization. Let’s check the top 3 candidates, in our opinion:
NitroPack is the leading all-in-one site speed optimization solution that combines more than 35+ web performance features. When it comes to optimizing your critical rendering path, NitroPack will automatically handle optimizations like:
But the optimization features don’t end here. You’ll also get the complete performance toolkit:
WP Super Cache is a caching plugin that primarily offers caching features and HTTP compression but falls short on resource minification and optimizing JavaScript with async and defer attributes.
Most notable features include:
Swift Performance is another plugin that you may find useful in your pursuit of optimized CRP. Some of its features include:
We’ve covered a lot of ground in this article, so here’s a handy checklist of all the optimizations we mentioned:
And last but not least - don’t forget to test before and after every optimization!
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.
