Avoid Chaining Critical Requests

A critical request chain occurs when there is a series of requests that are dependent on each other and are essential, or critical, to the page load process. The longer the chain is, as well as the size of resources in that chain, will affect page load times. These chains, like JavaScript, are seen as render-blocking resources and can have a major impact on the overall user experience, especially on mobile devices. Lighthouse measures the critical path latency as the time it takes to download all the resources in the longest critical chain request.

Obviously, the easiest method to avoid having this message show up in a website speed test is to reduce the length of these critical chains, as well as reducing the size of the resources. Additionally, completely removing resources that may be out of date or no longer necessary will also create immediate benefits. Regularly reviewing all your resources, whether its HTML, CSS, JavaScript, images, etc., is always good practice and ensures you are keeping your pages up to date.

If you are unable to remove resources, another way to avoid this message is to defer the loading of some resources or load them asynchronously. For example, if there is JavaScript at the beginning of the document, move those scripts to run after the above-the-fold content is rendered, if possible, so it does not cause any additional latency. Plus, this gives the user the ability to begin browsing and navigating the page and not having to wait any longer than they should.

Furthermore, you can reduce page load time by configuring your HTML to preload the most critical requests, whether it is certain scripts, fonts, CSS, etc. Preloading tells the browser to get these resources as soon as possible because they are required for the page. Any resources that require third-party elements will cause delays and those can load after the critical resources. You just want to ensure that the browser is not taking too long to process the core elements of your pages. In a market where seconds matter, it is important to make sure the user is not left hanging too long for your page to load, or else they will quickly bounce. Later in this guide, we will talk more about preloading key requests and how that affects web page performance.