How to Fix Jquery Avoid Chaining Critical Requests in Lighthouse
Are you getting the “Avoid chaining critical requests” warning when running a speed test on PageSpeed Insights?
What Is It?
Critical requests are the resources that are downloaded with high priority during initial page load, When a page or a script causes multiple resources to be downloaded with high priority, we speak of a chain of critical requests.
How does the critical Request Chain affect the page load time?
When loading a page, a browser starts in 'display blocking' mode. In this mode, the most important sources are downloaded with high priority. Those are the critical resources.
A browser will not (fully) start rendering the page until all critical resources have been downloaded. So any critical resource can block the first rendering of a page.
The fewer critical resources a page has, the less work the browser has to do to get the first content on the screen, and the less competition there is for the CPU and other resources.
How Do You Fix It?
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”.
Making script inline
Inline JavaScript can be achieved by using Script tag inside the body of the HTML, and instead of specifying the source(src=”…”) of the JavaScript file in the Script tag
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.