How does Critical Rendering Path affect your WPO?

[tongfkymm44]

What is the Critical Rendering Path?
It is simply the sequence of steps that our browser follows to convert the html, css and javascript elements into the final rendered page.

So, if we focus on optimizing these steps, we will greatly improve the investor leads email database performance of our website.

Progressive page rendering - From Google Developers
What steps are they?
When the browser requests a page from our server, it returns the HTML document. The browser begins the first step with the processing of the document it has received to first build the DOM tree (Document Object Model) .

It turns HTML tags into nodes in a tree. The larger the tree, the longer the overall processing time. One metric we look at in both Page Speed ​​Insight and WebPageTest is the number of nodes. Too many nodes increases complexity and rendering time .

In turn, it obtains all the derived resources, CSS, Javascripts, images, etc. When it finishes processing the HTML and finalizes the DOM, the second step begins . Generating the CSS Object Model . This is the same as a DOM but for the styles it is also in the form of a tree.

When it has both, the browser moves on to the third step . It generates the Render Tree , calculating the final style for all visible elements. It uses the DOM and CSSOM to calculate which styles apply to each of the visible nodes. The invisible ones are not inside the Render Tree.

The fourth step, Layout , consists of, once the Render Tree is complete and based on the device screen, seeing where the elements should be placed, what height, what width, what relationship between the elements, (above, below, etc.)

This point is the most complex of all and if we have too many elements on the page it can be the one that causes the greatest delay.

Finally the last step, the fifth one . Once the layout is calculated, simply start painting the pixels of the page on the device screen.

How can we optimize this process?
We have to try to focus on three specific points .

The number of critical elements
The length of the Critical Path
The number of critical bytes
A critical element is one that blocks the rendering of the HTML. For example, javascript. Making these load in async mode or, if possible, eliminating them. Not all Javascript is always used on all pages.

Elements that depend on each other to generate the page make parallelization impossible. Let's try to minimize this effect by reorganizing the page code so that it loads all critical content first.

Reduce the number of critical bytes by making critical elements non-critical, e.g. script async, or by reducing the code so that it flushes sooner.

Conclusions
Knowing how the browser converts text into the final result, we can attack the critical points to ensure that our user perceives an improvement in page loading.

Reducing the total number of elements, their size and controlling the loading order will achieve great results.