What is the critical render path?

The critical render path refers to the process of loading the current content that required by users. Doing so will improve the perceptual loading speed by only rendering the essential content.

Typically, the HTML should be loaded first, followed by stylesheets and then Javascript. Following this order should quickly render content for users. When the Javascript or CSS loads before HTML, this is called Render Blocking.

Applied Throttle in Lighthouse Audit

How can I check my Critical Render Path?

To check your critical render path, you first need to test the optimisation of your site. Using tools, such as GTMetrix and Pagespeed Insights, will help test for important metrics.

Relevant metrics include the Time To First Byte, First Contentful Paint and DOM Content Loaded. These metrics all help determine the speed your page is loading.

Other metrics include Full Load Time, but the critical render path rarely improves this metric. Therefore, while it is important, you can avoid this metric in determining perceptual load times.

Status codes in Chrome Console

How can I fix my Critical Render Path?

The first step to improving the critical render path is deferring Javascript and CSS. It is required to load all non-essential scripts and stylesheets at the bottom of the page to see significant improvements.

Other optimisation techniques include Lazy Loading, which helps with the critical render path. It does this by holding off on rendering images and videos outside of the viewport.

Lazy loading improves both the perceptual loading and fully loaded metrics. It’s a great way to improve performance.

GTMetrix FCP and DCL Timings