Modified on: Oct 1, 2022

What Is Critical Rendering Path And How To Optimize It?

The critical rendering path refers to the steps of converting the fundamental resource files such as CSS, JavaScript, and HTML into a webpage. To improve your website performance, you need to optimize the critical rendering path by minifying resources, reducing unused CSS, Deferring JavaScript files, and using other optimization techniques.

As a website owner or developer, your first priority should be providing a well-functioning website. To do so, you need to understand and optimize the critical rendering path. We will discuss the critical rendering path and explore optimization techniques.

What Is a Critical Rendering Path?

Critical rendering path (CRP) indicates the sequence of the process the web browser takes to convert your HTML files, CSS stylesheets, and scripts into a webpage that your user can see and interact with.

Before diving into the optimization process first you need to understand each process of the critical rendering path in sequence which includes:

Document Object Model (DOM).
CSS Object Model (CSSOM).
The Render Tree.
Layout.
Paint.

What is the Document Object Model (DOM)?

The Document Object Model (DOM) is an application programming interface for web documents. It allows you to add, modify, or delete elements from your web document. This DOM views your HTML elements as nodes.

Document Object Model, Critical rendering path

Let’s understand with an HTML code.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>DOM tree structure</title>

  </head>

  <body>

    <h1>DOM tree structure</h1>

    <p>Learn about the DOM constuction</p>

  </body>

</html>

Here, <html> is presented in the root note and contains two children: <head> and <body>
<head> node has two children: <meta> and <title>
<body> also consists two children: <H1> and <H2>

Notes: When you are adding any elements to your website, this DOM size will be increased automatically.

What is the CSS Object Model (CSSOM)?

CSS Object Model (CSSOM) is a set of Application Programming Interface (API) that allows CSS of the website to be manipulated from JavaScript files.

In simple words, it allows you to change the style rules of a document from a scripting file like JavaScript, enabling dynamic styling on your web page. Let’s understand with an example.

function css_object_model() {

 var button = document.getElementById(‘button’');

 button.style.color =”blue”;

}

In the above JavaScript file, we are changing the button color. When someone clicks the button, it will be blue. Therefore, this CSS object model makes dynamic staling possible on the web page.

What is the Render Tree?

The render tree is a combination of the DOM and CSS Object Model (CSSOM). If any style content is defined for a given node of DOM and CSSOM, then style properties are assigned to each node in the render tree.

It’s important to note that only the visible content is added to the render tree during its construction process. The head segment will not be present in the render tree because it is not visible.

For example:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Render Tree structure</title>

  </head>

  <body>

    <h1>DOM tree structure</h1>

    <h2>Learn about the Render Tree structure</h2>

  </body>

</html>

For the above HTML document, only <h1> and <h2> tags are added in the render tree.

What is the Layout?

Once the render tree is constructed properly, the layout comes into the scene. It depends on the screen size. The layout determines the arrangement and size (width and height) of the elements in the web page.

The DOM tree’s nodes determine how the layout is executed. The more node numbers, the longer it takes the browser to generate the layout. The algorithm that computes and makes use of a number of variables, positioning, floats, and the box model is known as the Visual Formatting Model.

What is the Paint?

Paint is the final step of this critical rendering path. During the page loading process, the pixels on the screen are painted. This paint time depends on the render tree structure.

You need to remember that, the render tree’s size will determine how long the paint stage takes.

How To Optimize Critical Rendering Path?

Optimizing the critical rendering path performance can improve your page speed, leading to a good conversion ratio and Search Engine Optimization (SEO) rankings. Let’s explore the optimization techniques for the critical rendering path.

Generating critical CSS

Critical CSS extracts the minimal set of CSS rules for rendering above-the-fold content faster. By generating critical CSS, you can improve the DOM size by reducing the nodes and optimizing the critical path rendering performance. For more information, go to our previous blog.

Remove unused CSS

Unused CSS styles or rules are present in your CSS file, but you are not currently using these on your website. These files increase the size of your CSS file and the DOM tree.

Therefore, removing unused CSS can optimize your critical render-blocking path by deleting the unnecessary stylesheets and rules from the CSS file.

Deferring JavaScript

JavaScript files block your main thread, increasing the render-blocking resources Total Blocking Time (TBT). Deferring Javascript files is one of the optimization techniques that can improve your loading time by delaying the execution of JavaScript files.

To do so, you just need to add a defer attribute in the element that you want to defer. Here is the syntax of deferring the script tag.

<html>  

<head>  

<script src = "myscript.js" defer>  

</script>    

</head>  

<body>  

<div>  

<h1> rabbitLoader.com </h1>  

<h3> This is an example of a defer attribute. </h3>  

</div>  

</body>  

</html>

The above three techniques are crucial for optimizing your critical rendering path. After trying these three techniques, if you want to further optimize your resource files, then minification and compression are the best options.

HTML, CSS, and JS file Minification

Minification is the optimization technique of removing unnecessary characters from your HTML, CSS, and JavaScript files to reduce their size. These unnecessary characters can be line breaks, spaces, or any large variable name.

For more details, read our blogs: Minify Resources

Compressing the Website’s Resources

Compression is the optimization process that replaces the repeated strings in a pointer to reduce the overall page size. Therefore, by compressing your website’s resources, you can easily optimize your web performance.

Optimizing Your Website’s Critical Rendering Path With RabbitLoader

If you are technically sound enough, you can try to implement the above strategies manually. Otherwise, the best practice is to use optimization tools like RabbitLoader. Let’s see how RabbitLoader optimizes your website’s critical rendering path.

CSS Optimization, critical rendering path

RabbitLoader identifies your critical resource, creates the critical CSS file, and reduces the file size by 98%.
When you optimize your website’s page speed with RabbitLoader, you don’t need other minification tools for your HTML, CSS, and JavaScript files.

RabbitLoader is able to eliminate your render-blocking resources by deferring the JavaScript files.

RabbitLoader will optimize your critical rendering path by removing the unused CSS from your CSS files.

Conclusion

Here, we’ve discussed the critical rendering path and the optimization techniques to improve its performance.

If you are thinking of improving your critical render path performance to boost your web performance, don’t waste your time. Install RabbitLoader and explore its features. The main advantage is the availability, especially if it’s a free version.

Document

Get The Best PageSpeed Score

For Your WordPress Website

Install Now

All in One Optimization Plugin

No Coding Knowledge Required

Modified on: Oct 1, 2022

What Is Total Blocking Time (TBT) & How to Optimize It to Boost The PageSpeed Score?

You may have encountered the term Total Blocking Time (TBT) while analyzing your PageSpeed performance in Google PageSpeed Insights or GTmetrix. But what is Total Blocking Time?

Google added this Total Blocking Time (TBT) metric to its PageSpeed & lighthouse tests to analyze the span of time when the main thread is blocked and the user needs to wait to see the website’s content.

Google PageSpeed Insights considers TBT along with four other metrics to determine the PageSpeed score.

Here, you’ll learn everything you need to know about Total Blocking Time (TBT) and how you can easily optimize your TBT performance by using RabbitLoader without needing coding skills.

What Is Total Blocking Time (TBT)?

Total Blocking Time (TBT) accounts for 30% of the overall Google PSI score. This performance metric is used to analyze the load responsiveness of a website. In simple words, TBT measures the span of time, a long task (which takes more than 50 ms ) blocks the main thread and negatively affects your page’s usability.

Let’s understand TBT with an example. Assume, there are a total of 4 tasks in which task 1 takes 150 ms, task 2 takes 30 ms, task 3 needs 100 ms, and finally, task 4 requires 350 ms.The TBT for these 4 tasks combines would be 450 ms (100+50+300).

Task	Time Required (in milliseconds )	Blocking time (in milliseconds )
Task 1	150	(150-50)= 100
Task 2	30	Not considerable
Task 3	100	(100-50)= 50
Task 4	350	(350-50)= 300
	Total required time= 630 ms	Total Blocking Time= 450 ms

How To Measure Total Blocking Time?

You already understand how Total Blocking Time is calculated. Here we will mention the helpful tools to measure the Total Blocking Time. There are several tools available to measure TBT. Let’s discuss the two most popular online tools to measure it.

Google PageSpeed Insights

Google PageSpeed Insights considers 5 performance metrics to determine the PageSpeed score. Among these 5 metrics, TBT is one of them. To know how to measure it in Google PageSpeed Insights, read our PageSpeed Insights blog.

GTmetrix

GTmetrix is the best alternative tool for measuring PageSpeed performance. Its advantage over Google PSI is that it allows customizing the test location and device. For more details, read our post on GTmetrix.

What Is An Ideal Total Blocking Time?

In order to categorize the performance of Total Blocking Time (TBT), google sets some boundary values. To be in a green zone, your Total blocking Time should be less than 300 ms for the whole page Let’s explore the criteria.

TBT time (in milliseconds)	Status	Color
Less than 300 ms	Good	Green
In between 300 ms to 600 ms	Moderate (need to improve)	Orange
More than 600 ms	Poor	Red

The Reason Behind A High Total Blocking Time

Before discussing the solution, it’s important to know the reason behind a high TBT. Let’s explore the most common causes that can inflate the Total Blocking Time (TBT).

A high JavaScript execution time due to the unoptimized JavaScript files
An unoptimized CSS file
Using a huge number of third-party scripts
A high main thread work.
An excessive DOM size.

Optimize TBT With RabbitLoader

Optimizing Total Blocking Time can be challenging as it requires extensive modification of resource files such as stylesheets, HTML, and JavaScript files. To prevent these technical aspects, you can install RabbitLoader. Let’s see how RabbitLoader optimizes your TBT.

Compress Your Resource Files
Minifying CSS and JavaScript
Optimize Your CSS Files
Optimize JavaScript Files

Compress Your Resource Files

Compressing is a method for easily reducing the size of your resource file by minimizing the redundancy in your coding file. The most popular two types of compression are GZIP and Brotli.

The most traditional compression method is used in GZIP, whereas the Brotli uses a modern algorithm.

RabbbitLoader uses the Brotli compression method and compresses your HTML, CSS, and JavaScript files, resulting in significant improvement of The Total blocking Time performance.

Minifying JavaScript And CSS Files

When it comes to improving the TBT performance, minification of JavaScript files and CSS stylesheets is one of the unavoidable optimization strategies. By removing white spaces and unnecessary comments from your CSS and JS files, you can easily reduce the total file size.

Doing this manually can be a daunting task for a large website, by just installing RabbitLoader, you can easily reduce the file size by minifying your JS and CSS files without any tweaks.

Optimize Your CSS Files

Although a CSS file’s aesthetic contribution is huge in a website’s design, an unoptimized CSS can negatively affect the performance of TBT metrics, leading to a slow loading speed.

There are two ways to optimize your CSS files: reducing the unused CSS and generating critical CSS. When you use RabbitLoader, it will optimize your CSS stylesheets by identifying and reducing the unused CSS and creating a file for your critical CSS. For more details, on how CSs is optimized by RabbitLoader you can read the Reduce Unused CSS blog and the Critical CSS blog.

Optimize JavaScript Files

JavaScript optimization is another process that can significantly reduce the TBT and mitigate the Google PageSpeed warning “Reduce JavaScript Execution time”. Some techniques are involved in JavaScript Optimization which includes:

Add a defer attribute in the HTML file for each non-critical JavaScript function.
Code splitting.
Minifying and compressing JavaScript files.

When you use RabbitLoader for other optimization purposes, you don’t need to worry about each optimization technique. RabbitLoader will look after your JavaScript optimization among other optimization techniques needed for a lightning fast website.

Conclusion

The Total Blocking Time (TBT) is one of the most important performance metrics that holds 30% weightage of the overall PageSpeed score in Google PSI. To increase user engagement on your website, you need to optimize the performance of TBT along with the other performance metrics.

Optimize your WordPress, Shopify, Php or Laravel websites with just a few clicks, improve their PageSpeed performance in just 5 minutes by installing RabbitLoader.

Document

Get The Best PageSpeed Score

For Your WordPress Website

Install Now

All in One Optimization Plugin

No Coding Knowledge Required

What Is Critical Rendering Path And How To Optimize It?

What Is a Critical Rendering Path?

Document Object Model (DOM).

CSS Object Model (CSSOM).

The Render Tree.

Layout.

Paint.

What is the Document Object Model (DOM)?

What is the CSS Object Model (CSSOM)?

What is the Render Tree?

What is the Layout?

What is the Paint?

How To Optimize Critical Rendering Path?

Generating critical CSS

Remove unused CSS

Deferring JavaScript

HTML, CSS, and JS file Minification

Compressing the Website’s Resources

Optimizing Your Website’s Critical Rendering Path With RabbitLoader

Conclusion

Get The Best PageSpeed Score For Your WordPress Website

What Is Total Blocking Time (TBT) & How to Optimize It to Boost The PageSpeed Score?

What Is Total Blocking Time (TBT)?

How To Measure Total Blocking Time?

Google PageSpeed Insights

GTmetrix

What Is An Ideal Total Blocking Time?

The Reason Behind A High Total Blocking Time

Optimize TBT With RabbitLoader

Compress Your Resource Files

Minifying CSS and JavaScript

Optimize Your CSS Files

Optimize JavaScript Files

Compress Your Resource Files

Minifying JavaScript And CSS Files

Optimize Your CSS Files

Optimize JavaScript Files

Conclusion

Get The Best PageSpeed Score For Your WordPress Website

Get The Best PageSpeed Score

For Your WordPress Website

Get The Best PageSpeed Score

For Your WordPress Website