When you test your website in PageSpeed Insight in the diagnostics section you may see an alert “Avoid chaining critical requests”. In this article, we are going to know all about this alert and how we can fix this for our WordPress website.
Along with PageSpeed Insight, you can also check your website on GT Metrix and Pingdom if you wanna be sure about the alert or just wanna use something non google:)
What is chaining critical requests?
Now the first question is what is chaining critical requests? A critically chained request is a sequence of requests that depend on each other, and are essential for rendering the page. Higher lengths of chains and larger download sizes can make a significant impact on your website’s page load performance.
In simpler terms, these requests are all the resources that your webpage requires to work and the other resources that those resources need to work(notice a chain here).
For example, your website home page first has an HTML file that requires some CSS and JavaScript files to work and those CSS and JavaScript files require some images or other types of files to work.
The critical chaining requests are determined by the Critical Rendering Path, which establishes the order the requests are parsed and executed in. Reducing the number of critical request chains can significantly reduce the page load time and speed up our website.
How critical chain requests affect website performance?
Whenever a visitor visits your website via browser his/her browser requests the resources from the web site’s server and starts the parsing process. Browser process the critical request based on the assigned priority. The browser will not (fully) start rendering the website’s page until all critical resources have been downloaded.
Unless you have specifically assigned some other priority by default, HTML usually has the highest priority, followed by Style sheets, synchronous JavaScript, Fonts, Ajax Requests, images at the top of the page, images later on the page, and then asynchronous JavaScripts(notice two types of JS).
When these critical requests form a very long chain they increase the latency and increase the load time for your website. Not just chains, if the individual files of these chains are bigger they take longer to download the files and it can also impact site performance.
While using PageSpeed Insight or any other tool you will see “The maximum critical path latency” this time is the total time spent on downloading all the resources of the longest chain of the website page.
How to avoid chaining critical requests?
There are few things that you can do to reduce the impact of chained requests.
- Reduce the number of critical requests: One thing which you should do on first priority is to reduce the number of critical requests from your page. You can do that by removing unnecessary CSS, defer their download or mark them Async.
- Optimize the number of critical bytes: You should also reduce the critical byte size (means lower file size) to make resources download faster. You can minify your resources, enable GZIP compression, compresses your images, and so on.
- Improve the order in which the critical resources are loaded: download all critical assets as early as possible to show the page faster. You can preload the key requests.
How to find removable critical request chains?
Now one big thing which is little confusing and not mentioned in most of the post on the internet is how you identify which resources (files) you should remove? The reason of that it is different for every single website.
But I can give you a rough idea of which files you should choose. You can get the list of chained requests when you run your website on PageSpeed Insight or any other tool. Now you need to check the name of each individual file or URL.
I am sure you find some resources of plugins that are not even being used on that page you can remove these resources.
You may also get some resources that are being used below on the page after the main above-the-fold content you can load those files later with Async or defer method.
You can also identify files like fonts which you are probably using, to preload them for faster execution of your website.
Plugins for avoiding critical request chain
There several different plugins that can help you avoid critical request chains, so let’s know about them.
1. WP Rocket (Paid)
WP Rocket is one of the best and one of the most popular plugins for website speed. This plugin will help you avoid critical request chains. It also has tons of extra features for boosting your page speed. There is no free version of this plugin so you need to pay first to use it.
The price of this plugin is $49 for a single website, $99 for three websites, and $249 for an unlimited number of websites all of this pricing is for one year of support and updates. These prices are general listing prices but they usually always offer some discount so you can get it for an even cheaper price.
Things you can do with WP Rocket to avoid critical requests chain
One thing to keep in mind that plugins don’t offer a single-click mechanism specifically to avoid chain requests so you need to manually set it up. Don’t worry you don’t need to do something hard you just need to enable a couple of things. The things you can do in WP Rocket are mentioned below.
- You can combine your site’s CSS files.
- You should combine your site’s JavaScript files.
- Loading JavaScript with the deferred method.
- Delay JavaScript execution.
- Optimize CSS delivery.
- You should preload the fonts which you are using on your website.
2. Perfmatters (Paid)
Perfmatters is another great plugin with similar features to WP Rocket. You can do all the same things in this plugin that I have mentioned for WP Rocket.
This plugin costs $24.95/per year for a single site, $54.95/per year for 3 sites, and 124.95/per year for unlimited sites. They have a 30-day money-back guarantee so you can purchase it and return it if you are not convinced with it.
3. Asset Clean Up (Free & Paid)
Asset Clean Up is another amazing plugin for avoiding critical requests chains. This plugin is free and paid, and in the free version, there are enough options available to avoid critical request count. In the paid version there are a lot more speed-related features available so you can definitely check that out too.
As for pricing, the paid version of this plugin costs $49 for one site, $79 for three, and $149 for unlimited sites. All of this plan for a year and you need to renew your license yearly.
Things you can do with this plugin to avoid critical requests chain
Just like WP Rocket this plugin also doesn’t have any one-click option to remove chain requests. You can do multiple things which are mentioned below.
- With this plugin, you can disable the unnecessary resources which are being loaded on the page load.
- Combine CSS files.
- Combine JavaScript files.
- Minify your CSS and JS files with this plugin.
- You can also use this plugin to remove unnecessary tags from your <head> and <body> tags in the free version.
- If you get the pro version you can also load resources asynchronously or you can use defer method to load them.
One good thing about this plugin is that you can test your implementation on “Test Mode” before releasing it to your visitors to avoid breaking your website.
4. CSS/JS Manager (Free)
CSS/JS Manager is another good and free plugin it had limited features but it works very well. This plugin will help you blocking unnecessary resources from your website.
However, implementation of this plugin is a bit different you need to get the URL from page speed and add it one by one to stop them from loading and chaining requests.
You can either use defer mode or normal mode hide or add the resources on your site globally or you can choose every single page if you want. You can do this for multiple links.
Alert
One thing to keep in mind that after making these changes always confirm if your site is loading correctly cause these kinds of changes can easily break your website.
And you should clear your browser cache before checking else you might not see it. Preferably test your site on multiple devices, at least on one desktop and one mobile device.
Also before implementing these suggestions take a backup of your website so if you mess something up you can always rollback.
Conclusion
After following this tutorial and its method you should be able to speed up your website and now probably when you test your website on PageSpeed Insight or any other tool your “Avoid chaining critical request” alert should have gone.
Since your main objective of reading this article is page speed I will highly recommend you to check our other articles on WordPress PageSpeed. We have tried to address every single warning you get on PageSpeed and you should be able to improve your site performance drastically.
