Critical request chain is a concept of CRP (Critical Rendering Path) optimization strategy. It is a series of network requests that browsers fetch with high priority and essential for page rendering. The larger length of chains comes with the larger download size as a result it impacts page load performance.
Until all the critical resources of a page download fully, browsers will not start rendering the page. Therefore, any critical resources can block the rendering of a web page. Fortunately, you can fix this issue. Learn how you can Fix “Avoid Chaining Critical Requests” in Lighthouse from this guide.
How Does the Critical Request Chain Affect Page Load Time?
Critical request chain is determined by CRP that creates the order in which the requests are parsed and executed. When the browser parses the HTML at the beginning of the page loading process, it downloads the critical request with high priority.
The browser itself determines the download priority following a set of rules. Generally, HTML takes the highest priority followed by CSS, images, JavaScript, fonts, etc.
When all these critical requests form a long chain, it results in increasing page loading time and latency. The maximum critical path latency is the total required time of a browser to download all the resources in the longest critical request chain.
The following image displays the longest critical request chain and associated latency.
How to Fix “Avoid Chaining Critical Requests” in Lighthouse?
To identify the render-blocking critical resources, Lighthouse uses network priority as a proxy. After identifying, you can reduce the impact of critical requests in 3 different ways. These are-
Preloading Key requests
Preload key requests like JavaScript, stylesheets, web fonts, etc to speed up critical resource execution. Add <link rel=“preload”> in your HTML header and specify the resource type using “as”.
Minimize the Number of Critical Resources
Convert the critical resources to non-critical resources by eliminating or deferring them. This will ensure the browser won’t spend much time loading the resources that aren’t needed initially. For example, below-the-fold images, JavaScript, CSS, etc.
Using Plugins
The easiest way to do this process is by using WordPress Plugins, which will help you with this. An awesome plugin called Asset Clean Up works really well to fix “Avoid Chaining Critical Requests.” also, you can go for W3 Total Cache or WP Super Cache WordPress plugins.
Optimize the Number of Critical Bytes
It’s quite obvious that if you reduce the number of critical bytes, browsers can download the critical resources faster. You can do this by using GZIP compression, image optimization, font subsetting, or JavaScript tree shaking.
Now, let’s see how to optimize Stylesheets, JavaScript’s, Web Fonts, Images, Ajax Request, and Iframes to fix avoid critical chain requests.
1. Stylesheets
Without a stylesheet, a browser can’t determine how the page will look like. Therefore, in lighthouse stylesheets are always a standard part of the critical request chain.
Audit your page with Lighthouse:
To run Lighthouse on your page to audit do the following:
- Press Ctrl+Shift+J or Command+Option+j on Mac to open Devtools.
- Click on Lighthouse and select the performance section.
- Then hit the generate report button.
Now, you will see something like this image if the CSS causes loading issues.
Preload CSS:
Add the following code to your page so that the browser will download the stylesheet with lower priority.
<link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/>
After applying this code browser will start rendering immediately without waiting for the CSS to load. From now on, your page may start acting differently. Well, you can fix this up also using critical CSS.
By generating the critical CSS through NodeJS or some other tools you can fix this. Place this critical CSS of your page’s head section and load the rest of the CSS at a lower priority.
Make sure to use the media attribute. It will ensure downloading a stage when the home media doesn’t match the currently used media.
<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">
Minifying:
Many sites use CSS libraries like bootstrap which are often over-complete. Remove all the unused CSS via a CSS preprocessor like SASS. With this preprocessor, you can also remove all spaces and newlines to minify your CSS.
Compressing:
Now, finally, it’s time for compressing. To do so, you can use GZIP or Brotli compression.
2. JavaScript
By default, JavaScript files are downloaded with high priority. Also, they cause page rendering while downloading and executing. Therefore, these files are also a standard part of the critical request chain. Here, how to fix these files.
Audit your page with Lighthouse:
At first, you have to run Lighthouse on the page to find out the opportunities for improvement.
- Press Ctrl+Shift+J or Command+Option+j on Mac to open DevTools.
- Click on the Lighthouse and select the Performance and progressive Web App checkbox.
- Then click on the generate report button.
If there are any resources that delay loading, the lighthouse will provide a warning for that. Like this-
Now based on the audit report you should start fixing the issues following the below steps.
Load Asynchronously:
You can adjust the JavaScript priority through the async or defer attribute by loading them asynchronously. Asynchronous script files or deferred JavaScript are downloaded in parallel with a lower priority and the execution is delayed. In this way, they don’t block the initial loading of the page. Follow the image to async or defer your JavaScript files.
// blocks loading and execution
<script src="normalscript.js">
// async does not block during load, but it does block during execution
<script async src="asyncscript.js">
// defer does not block both during load nor execution
<script defer src="deferscript.js">
Sometimes the page doesn’t allow JavaScript to load asynchronously. In this case, you can split JavaScript into multiple files. Preload critical resources of the JavaScript by adding a <link> tag with rel=”preload” to the head of your HTML document. Just like the following image.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
And then, place the non-critical JavaScript in another file to load and run async or deferred.
Minifying:
Use the JavaScript Uglifier tool to shrink the number of bytes in two ways. This smart tool will help you to analyze JavaScript and make it as small as possible.
Compressing:
You can also compress the number of bytes of JavaScript using GZIP or Brotli.
3. Images
Images that appear in the viewport during page loading are also given high priority that interferes with the critical path. So, let’s see how you can fix this.
Audit your page with Lighthouse:
Just like before, check the opportunities by running Lighthouse on your page. Keep in mind these opportunities will be listed under the “Efficiently encode images” option.
Preloading Image:
To preload the image, add rel=“preload” as=“image” to your HTML like this.
<link rel="preload" as="image" href="important-image.webp">
For all the images that are not required to be visible immediately, you can make them lazy load images. Simply add loading=“lazy” to delay the image loading.
<img loading="lazy" src="lazy-image.webp" width="20" height="20" alt="...">
Compressing:
To compress the image size, you can use the Image min tool that is available as both a CLI and an NPM module.
4. Web Fonts
In the critical request chain, usually, web fonts are loaded as last files. The reason behind this is they generally rely on the discovery, and they only load when browsers need them. But, often the large files take a while to load.
Preloading:
To preload the font so that it can download as early as possible, encode the HTML by the following image.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Also, you can follow the strategies to make your font load faster.
- Apply local web fonts and never remotely host fonts like Google fonts.
- Use font sunsetting to resize the font.
- You can use font-display= swap to instruct the browser to display the font immediately.
- Let the browsers generate their own font variants through font synthesis.
Conclusion
Google considers page experience as a ranking factor, thus it becomes essential to focus on the faster page loading factors. Among all, critical chain requests are one of the major factors that can impact your web page while loading.
This guide has shown all the effective ways to fix avoid chaining critical requests in Lighthouse. Hopefully, now you can easily fix the errors of your website using this guide.
