What is Critical Rendering Path?

Critical rendering path refers to a series of events a browser goes through to render (display) the initial view of a web page on the screen.

Displaying web pages fast enough to meet user expectations is still a major challenge. Content caching, low-latency web hosting, image optimization, and other techniques can decrease page load time significantly, but not always fast enough. To solve this problem, developers optimize the critical rendering path to make the website immediately usable "above the fold" while the rest of the page loads.

The critical rendering path (CRP) looks at the sequence of steps the browser takes to receive HTML, CSS, and JavaScript bytes, as well as the techniques required to render the initial view of the web page. Steps involved in rendering the page include constructing the object model, constructing and painting the layout, and adding interactivity with JavaScript. Developers tweak parts of these steps to load critical objects that let users see "initial view content" quicker. To set up the critical rendering path:

1. Analyze the website and determine the critical resources needed for the initial view
2. Remove or defer elements not required for above-the-fold content
3. Compress and optimize the required resources to reduce the size as much as possible
4. Squeeze all the optimized HTML and CSS information required for the initial view in the first 14 KB packet

It takes about one second to download and display the 14 KB packet, making above-the-fold content appear almost instantly. The deferred elements are then downloaded and displayed after the initial view.

First you need to know what assets are needed for generating content above the fold. After you determine this, optimize the critical rendering path by doing the following:

1. Minimize the number of critical resources Critical resources are those that may block the initial rendering of a page. The fewer critical resources on a page, the less work the browser has to do to display the content on the screen. Critical resources can be minimized by eliminating them, deferring their download, or making them load asynchronously.
2. Minimize the number of critical bytes Minimize the amount of critical bytes by compressing and optimizing each resource. You can further optimize these resources by making use of HTML and CSS obfuscation.
3. Minimize the critical path length The critical path length is the number of round trips between the browser and the host of the assets (from request, to response, to retrieval). To shorten the critical path length or the number of round trips, download all critical resources as early as possible.

Images: If a page has 15 images, only a few of them are likely to display above the fold. If you concentrate on those few images, you can make your page load time appear much faster than it actually is. The remaining images can be deferred.

JavaScript: If there are six JS files on a web page, but only one is critical for making content interactive at the top of the page, the critical file should be loaded and the other five should be deferred. For example, resources such as social buttons and analytics are not needed immediately.

Setting up and optimizing the critical rendering path makes the most important visual parts of the web page load first and fast. This makes the page almost immediately usable, thereby increasing user engagement, retention, and conversions. To optimize the critical rendering path, it’s important to understand how a browser works and how it gets the content needed to render a page. Use tools like Chrome DevTools, PageSpeed Insights, or Webpagetest to find out what goes on before your web pages are displayed.

As always, If you have any questions or concerns about any of the topics mentioned in this article, please feel free to reach out to support. Live chat and ticket support are available 24/7.