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
To set up the critical path:
- 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 page size as much as possible
- 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:
- 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 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.