How to Reduce HTTP/S Requests in WordPress

Here’s a story you’ll love if you want to speed up your WordPress site.

The other day I built a shiny website. I went all out and added WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, live radio (oh yes I did), Cookie Notice, social media, and a bunch of other plugins.

Just like you, I was bent on impressing my visitors, or so I thought. But then things became unbearably slow. After much anguish, I fired up GTMetrix to flush out the issue.

To my dismay, I saw this:

Was I impressed? Hell to the NAW! I wanted to score a perfect A, and reduce page load time to under two seconds.

So, I hit the re-test button, but guess what? Still the same sickening result. I was appalled, angry even. But I don’t give up easily because that kind of thing is unacceptable.

Do you know what I did next? I tested the website on Pingdom because GTMetrix can suck it. But, below are the dismal results, once again:

I was exasperated. The proverbial thorn in my flesh was the errant HTTP requests seeing as I could fix many of the other issues quickly.

To make matters worse, I was using an ecommerce WordPress theme that loaded a billion elements to build the homepage. In my defense, it looked incredible. Some users agreed the design was on point too, so yay, I didn’t fall for the trick alone 🙂

But great visual design and slow speeds don’t go hand in hand. I needed a solution and fast.

How can I reduce HTTP requests on my WordPress site?

Every time you visit a WordPress website, a lot of data moves between your browser and the website’s servers. In other words, WordPress makes HTTP requests to various servers to build what users see when they load your site.

If your WordPress site requires a lot of elements to load, you will have more HTTP requests and vice versa. More HTTP requests mean a slow website, poor user experience (UX), bad SEO scores, and low conversion rates.

WordPress websites are usually dynamic, meaning it takes a lot of different parts to render your website in a browser. The good news is you can reduce HTTP requests and speed up your site significantly.

And in today’s post, you learn exactly how!

Reports from GTMetrix and Pingdom usually show you where the problem lies. As such, test your site using both tools to find out the areas you must improve. With your reports ready, here’s how to reduce HTTP/S requests and speed up your WordPress site.

Step 1: Declutter

Guys, if you have a lot of stuff on your WordPress website, you will have too many HTTP requests. It’s a no brainer. The first step to reducing HTTP requests is decluttering.

By that, I mean getting rid of all the plugins you don’t need. WordPress plugins come with plenty of files, be it PHP, CSS, or JavaScript (JS). Every file that each plugin fires will create an HTTP request.

If you have a ton of plugins, you’ll most definitely have more HTTP requests. The fewer the plugins, the fewer the requests. It’s plain simple.

What to do?

Carry out an audit of your plugins. Which plugins must you have to run your website? Are there plugins you don’t need? Do you have plugins that tap into third-party servers? Can you do without these plugins?

To reduce HTTP requests, uninstall all the plugins you don’t need. If you need a plugin occasionally, install it only when you need it. Afterward, uninstall the plugin.

The same goes for WordPress themes and content you don’t use. Clean all that stuff out. Remove anything you don’t need; it’s good for your website speed and security.

You can go the extra mile and load plugins selectively. For instance, if you only need Contact Form 7 to load on your contact page, you can stop other plugins from being loaded on that specific page.

That would be awesome, don’t you agree? And to think you only need the Asset CleanUp WordPress plugin.

The plugin is easy to use and quite efficient. Or as the developer puts it:

“Asset CleanUp” scans your page and detects all the assets that are loaded. All you have to do when editing a page/post is just to select the CSS/JS that are not necessary to load, this way reducing the bloat.

Clean up your install already hombre; get rid of the junk – comment spam included. Oh yeah, eliminate broken links and optimize your database while at it as well. These are significant areas to consider as far as boosting your site speed goes, but I digress.

Let’s go back to reducing HTTP requests.

Step 2: Optimize Images

A website without images is, well, drab. They say a picture speaks a thousand words, and that’s cool. But every image accounts for an HTTP request. To add salt to injury, images are top among elements that take long to load.

Still, we can’t ignore the fact that most WordPress themes (read sites) rely on images, and many images for that matter. So, in light of this, how can you reduce HTTP requests by optimizing your images?

For starters, get rid of all the images you don’t use. Be ruthless; get rid of all that bloat – you don’t need it. After that, compress and optimize images to remove unnecessary file data.

While there are a number of plugins to choose from, we really like WP Compress. While it is a premium service, the powerful auto optimization of images, lossless compression, cloud processing to reduce your server load, WebP image support, automatic resizing and more make the investment well worth it (checkout our review to learn more). Plus you can get stated with 100 images for free – so you can at least give it a try.

Optimizing images doesn’t reduce your HTTP requests per se, but it reduces the size of your image files, which translates to better page speeds down the line.

Alternatively to reduce HTTP requests, leverage the power of CSS image sprites. To the uninitiated, a sprite is a collection of images put into a single image file.

Then using CSS tricks, you can choose which part of the image to show. But how does this reduce HTTP requests? Here’s an analogy.

Say you needed five images on your homepage. To load your site, your WordPress install will make five trips to the server to get the images. Now, if you put all the five images in a single image file (sprite), your WordPress install will make only one trip.

Do you see where I am going with this? The fewer the trips, the lesser the HTTP requests. The best part is you needn’t sweat to create and implement CSS image sprites. You can use a tool such as CSS Sprite Generator. Implementing CSS image sprites is easy, provided you know your way around CSS.

Pro Tip: You can forget all about CSS image sprites if your website uses HTTP/2 that supports asynchronous loading of images and scripts. GTMetrix doesn’t take HTTP/2 into account when scoring performance, so don’t worry if it seems your images are creating a ton of HTTP requests.

But I say: If CSS image sprites can reduce HTTP requests significantly on your site, and you know how to implement the same, go for it and strike those extra seconds off your page load time. Whether or not you have HTTP/2.

After all, a single image file requires a single HTTP request. Ten separate images need 10 HTTP requests and so on. I know you get the drift.

Step 3: Combine & Minify HTML, CSS & JavaScript

The major cause of many HTTP requests on my WordPress website was external CSS and JavaScript files. Yep, I was contending with 43 JS scripts and 22 CSS files. That’s a whopping 66 HTTP requests.

Out of about 130 HTTP requests, external CSS and JavaScript requests accounted for about 51% of the problem! That’s just ridiculous. Thanks, GTMetrix, bump my fist.

If I combine and minify those 44 JS and 22 CSS files, I can reduce my HTTP requests significantly, the size of the website, and the time it takes to load. But what is this “combining” and “minifying” business all about?

According to Raelene Morey of Words by Birds (I’m a huge fan 🙂 ), minification is the process of “…removing any unnecessary characters, like comments, formatting, white space and new lines from HTML, CSS and JavaScript files that aren’t necessary for the code to execute.”

Minifying reduces the file size by eliminating all other characters to leave only the code. But if you have 66+ external scripts, minification won’t do much to minimize HTTP requests. For that, you need to combine your CSS and JavaScript files.

Again, Raelene says:

Combining files, meanwhile, is just like it sounds. For example, if your web page loads 5 external CSS files and 5 external JavaScript files, combining your CSS and JavaScript into a single separate file each would result in just 2 requests instead of 10.

Do you get it? I sure do hope so. Combining files reduces HTTP requests. Minification, on the other hand, reduces the file size. Combine the two, and you kill two birds with the same stone.

Are there plugins? Yes, of course!

There are a ton of WordPress plugins to combine and minify your files. A good example is the WP Rocket plugin. It’s basically one of the best caching plugins offering you features to combine and minify files in a few clicks.

Another popular (and free) option is the Autoptimize plugin.

By the way, while at it, reduce the number of external CSS files and JS scripts? For instance, and we’re not mentioning names here, do you really need a third-party comment platform? Do you need a live radio plugin?

It doesn’t matter what I say, eliminate all external scripts and files you don’t need.

Step 4: Adjust Render-Blocking CSS & JavaScript Files

In some instances, combining files might not be an option, especially for third-party files and scripts that change frequently. In such cases, you can defer the loading of such assets. HTTP/2 supports asynchronous loading of files, which means all files load simultaneously.

If you don’t have asynchronous loading going on for some reason (perhaps you aren’t using HTTP/2, or the scripts are not asynchronous), these files can slow your website significantly.

Keep in mind that your web pages load from top to bottom. If you have render-blocking CSS and JS at the top of your page, the browser will stop loading until the files have been loaded fully. As such, users will see a blank page until the scripts load, which takes time.

How? Move all render-blocking scripts from the top to the bottom of your web page. But be careful here; you don’t need to move all scripts to the bottom. I say this since your page might need CSS and JS to deliver a thoroughly engaging experience.

If you defer some CSS or JavaScript files, your users might see a distorted version of your web page until the page loads fully, which is precisely the opposite of what you want to achieve.

So, only defer scripts that aren’t necessary for the page to load. That way, your users won’t wait ages for your page to load. Why? Because you will need fewer HTTP requests to deliver your message.

It doesn’t reduce HTTP requests per se (because all scripts and files will load eventually), but it reduces the number of HTTP requests needed to render your page.

It is very much like lazy loading for images; the image is only loaded when it’s in the viewport, not when the rest (and most important parts) of the page is loading.

By the way, fixing render-blocking CSS & JS might reveal files and scripts you don’t need to build a web page.

For instance, if some external social sharing JS script is taking long to load, you can defer it. On top of that, you can eliminate it and build social sharing into your theme.

You will eliminate HTTP requests and speed up your site while retaining the same functionality. I understand coding features into your theme is a tall order for most beginners, so check with an advanced WP user or developer.

As an alternative, you can use the WP Rocket plugin to fix render-blocking scripts, but be careful. Read their documentation because if you mess things up, you can break your website easily.

Are there free options? Of course! We’re working with WordPress, remember? You can use the Async JavaScript, among other plugins.

Step 5: Use Caching & CDN

Did you know caching and CDNs can reduce your HTTP requests? It’s doesn’t seem like a fact at first, but when you consider what happens behind the scenes, you can use caching and CDN to your advantage.

Caching involves storing static files on a browser so that users don’t download the files on subsequent visits. Say you have a cache plugin, and the user downloads your cached content on their first visit.

On subsequent visits, your site won’t make requests to the server. Instead, it will serve the cached resources from the browser, reducing HTTP requests, and boosting your site’s speed.

A CDN (or Content Delivery Network) is a network of servers placed around the world. A CDN uses caching as well, but for even faster speeds, the CDN provider serves your cached content from a server that’s closest to the visitor.

Shorter distances mean faster content delivery, and caching means your website doesn’t need to download the same content from the central server all over again. Does it make sense to you?

And best of all there are a number of free CDN options (or at least free trials so you can quite literally see the difference it makes). At WPExplorer we use and highly recommend CLoudflare, but choose the CDN you feel works best for you.

Bonus: Ensure HTTP/2 is Supported

You might be doing everything to reduce HTTP requests, but your web host could be the cause of your woes. Don’t be surprised; asking and thinking, who – in this time and age – uses anything but HTTP/2?

You probably don’t even know what HTTP/2 is all about. Well, for starters, HTTP/2 supports the asynchronous loading of files, among other things. It has other benefits over HTTP 1.0, but that’s a lesson for another day.

If you use HTTP 1.0 or lower, you will notice a considerable number of HTTP requests.

Don’t be quick to judge; I have seen web hosting providers who still use HTTP 1.0 and older versions of PHP. Yes, even with the apparent benefits of HTTP/2 and PHP 7.  I’m not even bluffing; some of their customers come to me when some of their plugins don’t work, and it’s irritating!

But, really, why? The fact that some web hosting providers are not bothered by the fact that PHP 5.6 is deprecated and has security vulnerabilities is just something else. And if they don’t support HTTP/2, that’s a deal-breaker for yours truly.

Contact your host or use KeyCDN’s tool to check if your server supports HTTP/2. The best web host supports HTTP/2 and the latest version of PHP. If your host is lagging in both cases, ask them to upgrade or choose a better web host.

Final Words

Reducing HTTP requests on your WordPress site is all about eliminating things that you don’t need. If you have a lot of stuff on your WordPress website, you will have a lot of HTTP requests and relatively slow page speeds.

To reduce HTTP requests, declutter your site, optimize images, fix render-blocking scripts, use caching, and ensure your host supports HTTP/2. Other than that, endeavor to create simple and clean websites that don’t require a ton of assets to load.

If you have questions, please let us know in the comment section below. Cheers to faster websites and a great future ahead!