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.
To set up the critical path:
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.
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:
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.
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.
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.