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.
How Critical Rendering Path Works
- Analyze the website and determine the critical resources needed for the initial view
- Remove or defer elements not required for above-the-fold content
- Compress and optimize the required resources to reduce the size as much as possible
- 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.
How to Optimize Critical Rendering Path
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:
- 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.
- 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.
- 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.
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.