How to Make Fewer HTTP Requests in WordPress
When are you done updating your website? Hopefully, never: using the latest version of all your themes and plugins is not just common sense, it is best practice in online safety. Similarly, you should always be looking into ways of making your website run smoother and faster, for reasons of both user experience and SEO, though this should take the back seat: safety is the priority. However, if you can spare your staff’s time and effort on it, you should really see if there is a way to make your website load and run faster. And the more HTTP requests the website makes, the slower it is. In this article, we will be talking about ways to make fewer HTTP requests from your website. But that is not all.
Apart from reducing the number of HTTP requests, we would also like to get into what these requests are, what they do, and when you really do need them. Apart from that, we will provide you with several methods of reducing HTTP requests both in number and in the volume of slow-downs they cause. We will not be providing you with a checklist of absolute musts, though: think of this instead as an optimization toolkit.
Here’s what we’d like to talk about, and also what you can do to reduce the number of HTTP requests:
Qode Themes: Top Picks
View Collection
Whenever a visitor visits a website, their browser downloads all the files needed to display it for them. Each bit of the website needed to run it, commonly referred to as a resource or an asset, requires a request to your server. Resources can be anything from image files, to fonts, to CSS, to JavaScript files. These requests are served by the server (hence its name) using the hypertext transfer protocol, or HTTP. That is why they are called HTTP requests.
Each individual resource needs its own request – that is just an in-built characteristic of the internet. This means, for instance, that the speed of the website is determined not just by the size of the files required, but by their number as well. Each image you use, each JS effect, each plugin that uses its own CSS stylesheet means one more HTTP request.
The fewer the HTTP requests made, the faster the website, in other words. There is a flip side, though: reducing the number of HTTP requests can come at the expense of aesthetics.
Now, not all HTTP requests are created equal. Smaller ones are less of a strain on server resources. Still, the principle remains: if you can achieve the same effect without even a single HTTP request, you will have made your website that much faster.
There are several online tools you can use to detect and analyze the HTTP requests your website makes. We will be using GTmetrix for this demonstration.
To check for speed issues on your website, enter a website’s URL into the URL field and click the Test your site button.
You will be taken to a report screen outlining speed issues that may occur on your website. To see the individual HTTP requests, click on the Waterfall tab.
Once there, you will see a list of resources requested and the amount of time it takes for them to be rendered by the visitor’s browser. Here, you can easily isolate individual requests that take a long time to serve. Hovering over any single one you can assess it in detail. You can also filter them by choosing a filter from the menu above the table or using the search field.
Now that you have identified your problem or problems, though, what can you do about them? Possibly nothing, but, equally possibly, loads.
HTTP/2 is an improved version of the old HTTP protocol. HTTP/2 allows for asynchronous loading of files, making HTTP requests easier to serve, if not fewer in number. This is done by loading multiple resources at the same time using a single connection. How can you do that, though? Unless you are your own hosting provider, you can’t switch to HTTP/2 – that is part of your service package.
You can use a tool such as Geekflare’s HTTP/2 Test to check whether your website uses HTTP/2. If not, consult your hosting provider and learn whether it is possible to remedy that. If it isn’t, take a look at our list of WordPress migration plugins – and consider changing your hosting provider. You should not settle for obsolete technology, if not for reasons of loading speed, then for reasons of security.
As we’ve mentioned before, if you are using a lot of plugins, chances are they are slowing up your website. If you are using a speed testing tool, you can find all your plugin-related requests by filtering for the word plugin, as WordPress stores all your plugin resources in the folder wp-content/plugin.
You may have installed a plugin that you don’t use, or you may have used a plugin at some point, but are not using it anymore. If you haven’t deactivated and uninstalled such a plugin, it may still be loading, completely unnecessarily.
If there are multiple plugins that provide you with the functionality you need, and if you can afford all of them, try picking the ones which make fewer HTTP requests. You can typically find the details in the plugins’ documentation if you are an advanced user. If not, test the free ones: you can use the speed testing tools yourself.
Now, there is a lot to be said about optimizing images – enough to merit its own article. This is exactly the reason why we have a whole article about how to optimize images for your WordPress website. We will go over the basics here, though.
For the purposes of making fewer HTTP requests, we will repeat what we have said for the plugins: remove anything you don’t really need. Some websites rely heavily on visuals, though, and that can’t be helped. There are ways to compress image files or change to a different file format, for instance, and you should make use of them. And, while you’re at it, do not neglect to optimize your images’ alt text as well.
Lazy loading is the practice of postponing loading an element until it’s needed. Say an important video is at the bottom of a page (below the fold), and therefore not immediately visible to a visitor who loads said page. Do you need to load it before the visitor starts interacting with your website? Of course not.
Implementing lazy loading in WordPress is easy: it doesn’t require you to do anything in particular. Simply update your WordPress to version 5.5 or newer, which you should have done anyway. Lazy loading is a core feature from version 5.5. If, for whatever reason, you are deferring updating to version 5.5 of WordPress, many image compression plugins offer a lazy loading feature, too.
Your images and video files are likely the slowest to load, but they are not the only thing you should be looking at. For best results in terms of both speed and storage space, consult our in-depth guide on database optimization in WordPress.
Fonts are graphics that are mostly used to render text, and are generally the easiest way to customize the appearance of your text. Certain fonts, called icon fonts, have a different purpose: they provide easily scalable icons for your website. Each font, though, means a new HTTP request. If you can make do with fewer, get rid of the excess. Even hosting Google fonts locally will improve your website’s loading speed.
There are plenty of reasons not to use emojis, their being in poor taste not the least important. However, there is no denying that, like cockroaches, they are widespread. For that very reason, WordPress uses scripts that support the rendering of emojis for older browsers. This change to WordPress’s core mechanics dates from 2015, and most browsers have no difficulty rendering emojis. WordPress’s scripts? They still load. Unless you are catering specifically to visitors who use older browsers, disable the emoji scripts.
CDN stands for Content Delivery Network. It is a tool that ensures that a request is served from a server that is geographically the closest to the computer making the request. If you use a CDN, parts of your website are cached – stored – across different servers and requests are served more quickly. We even have a list of our favorite CDN services, but they come at a premium. Not only that: they are not efficient when dealing with CSS files.
Best practices in coding dictate that it should be written in such a way as to be understood by humans. Not just any humans, though: primarily this refers to coders. However, this makes code slower to execute, as the computer generally doesn’t care whether the version of code it is using is easily legible to humans as well. This is what code minification is, in a nutshell: it makes code smaller and quicker to execute, at the expense of legibility to humans.
Having a lot of CSS files means needing a lot of HTTP requests for the website to load. This, in turn, takes a lot of time to process. Fortunately, there are plenty of ways to combine CSS files in WordPress – in case you need to. You won’t need to if you are using the HTTP/2 protocol.
Render-blocking means that a CSS stylesheet or a JavaScript script is loaded, but isn’t needed to run the portion of the web page visible to the user. Plugins and themes add CSS stylesheets and JavaScript scripts to your website, and if they don’t work together very well, they may be loading when they are not needed. Fortunately, there are ways to resolve render-blocking using a specialized plugin.
In Conclusion
As you can see, there is a lot you can do to reduce the number of HTTP requests in WordPress. Some of these things are better suited for advanced users, while others involve little more than installing a plugin and letting it run. With fewer HTTP requests comes greater speed and a better user experience overall.
Your website could likely always be running a little better. If you can spare the time and effort, optimize it to the best of your abilities.
