What is Critical Rendering Path?

By Amos Ndegwa

Critical Rendering PathOverview

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.

How Critical Rendering Path Works

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 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 page size as much as possible
  4. Squeeze all the optimized HTML and CSS information required for the initial view in the first data packet

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

How to Optimize Critical Rendering Path

First you need to know which assets are needed for generating content above the fold. After you determine this, optimize the critical rendering path as follows:

  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.

Examples of Critical Rendering Path

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 6 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 5 should be deferred. For example, resources such as social buttons and analytics are not needed immediately.

Conclusion

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 improving 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.

Start 15-day Trial

Every Secure Content Delivery Plan includes WAF and DDoS mitigation.

Choose plan