Each time you access a website there are a lot of processes happening behind the curtain. Though it seems like everything occurs in one fell swoop, your browser must request, receive, and process multiple files from a server before the website fully loads.
These requests can slow down your website, leading to poor user experience, a huge bounce rate, and bad SEO scores. To avoid these pitfalls and keep your visitors happy, you need to figure out how to make fewer HTTP requests.
This short article will teach you how to reduce the number of HTTP requests that your website sends. Here you’ll learn more about what HTTP server requests are, how they can be tracked, and how you can reduce them.
Starting with the very basics, HTTP server requests are those actions that take place whenever a person visits a page on a website. The user’s browser pings the web server and asks for the files that contain all the content listed on that website page they are trying to access.
HTTP is short for Hypertext Transfer Protocol, which is the protocol used by both browsers and servers to facilitate the requesting and receiving of files. All websites make use of HTTP and WordPress sites are no exception.
The fewer elements your website includes, the fewer HTTP requests are sent for rendering a web page. As a result, your site will become faster and more responsive. In order to make fewer HTTP requests on your site, you need to follow the steps listed in this article.
Let’s take a look at how to see what requests are being made in the first place.
If you don’t know how many HTTP server requests your site sends, you can use one of the following tools that will tell you all you need to know:
Google’s Developer Tools will give you an in-depth look at various elements on your website and show you how well the files are performing on it. You will just have to use the Google Chrome browser and navigate to the settings tab.
You’ll find Developer Tools there and then you can start analyzing the HTTP requests that your site makes with the Developer Tools panel.
Firefox users can access the same type of developer panel by clicking the hamburger menu > Web Developer and then clicking the Network tab. Now simply refresh your website to see all the requests.
Google PageSpeed Insights is one of the most popular tools for monitoring your web page performance. On top of that, it’s completely free.
You’ll get a full review of your website’s performance with a rating from 0 to 100. Google PageSpeed Insights creates intricate reports on the page load time using different criteria and it will help you find HTTP requests that are slowing down your website.
Another page assessment tool that is highly appreciated by those who want to find out more about their HTTP requests, GTmetrixalso gives you a performance score following a set of criteria.
In addition, this tool will tell you more about what makes your site slow and what actions you can take to correct these problems.
Pingdom is very similar to GTmetrix in terms of what reports it generates with a score assignment and more. Pingdom seems to deliver results a bit quicker than GTmetrix does, and you can also run tests based on location.
Just as in the previous case, you’ll receive info about the aspects that can be improved, and you will be shown a complete list of your site’s HTTP requests.
Moving on to the actual measures that you can take to reduce the number of HTTP server requests on your site, here are 6 proven methods:
Too many images will immediately make your site load a lot slower. You don’t have to get rid of all the images on your website entirely, but you shouldn’t abuse them either. The fewer images you put on your website, the fewer HTTP requests it will send to the server.
As mentioned, reducing the number of HTTP requests will lead to a visible improvement in terms of load time and responsiveness, and fewer image requests will boost performance even more so.
Besides the fact that it is not recommended from an aesthetic point of view to clutter a website with images, it will also affect it on a technical level. If your website’s specifics simply involve using a lot of images, you can try using a “lazy loading” plugin.
These plugins delays loading the images (requesting the file) until the user gets to that image so that the page loads faster.
Limiting the number of files by combing them is the recommended option. For example, if you have several CSS stylesheet files, they can all be combined into one file so that your styles load in one single request. These can also be cached for an even greater increase in page speed.
File minification refers to removing characters that are unnecessary from a file —comments, formatting, white space, empty lines. This won’t affect the number of requests, but it does help with performance.
Again, there are several plugins like Fast Velocity Minify that can help you do this automatically, and any decent caching plugin should include an option to combine and/or minify files.
If the HTTP requests are coming from outside of your website, you need to reduce the external resources on your site. Some examples are:
Image sprites are collections of images that act just as one item. Logically, because it acts as one item, it only sends one request. This is a smart hack that you should be using if you want your website to make fewer HTTP requests.
After figuring out how many HTTP requests your website sends, it’s best to try all the techniques covered here to enable your site to make fewer HTTP requests while keeping it functioning normally.
Nobody likes a slow website, and you can't blame it on the web hosting forever. So don’t hesitate to take action and eliminate extraneous requests wherever you find them by following the tips in this article.
If you enjoyed reading this article on how to make fewer http requests, you should check out this one about how to use the WordPress do_shortcode.
We also wrote about a few related subjects like how to remove proudly powered by WordPress, how to reset WordPress, how to change fonts in WordPress, WordPress favicon, how to duplicate a page in WordPress and how to get a WordPress mega menu.
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.