Complete Guide to Make Fewer HTTP Requests in WordPress

Optimizing the speed and performance of WordPress websites is important for attracting and retaining visitors. Every web developer and site owner should prioritize optimizing performance because it not only enhances user experience but also boosts search engine rankings.

When doing performance audits of your WordPress website using online tools, you may have noticed that these testing tools advise you to “make fewer HTTP requests” or “reduce the number of HTTP requests.”

This guide will explain what HTTP requests are, why they matter, and how you can minimize requests that your WordPress website makes.

What is an HTTP Request?

The front end of a website is composed of various components such as HTML, CSS, JavaScript, images, and videos.

These elements work together to create a webpage. Each element sends a request(s) to the hosting server.

When you type in a website’s name in your browser, here’s what happens:

1. Your browser contacts the webpage’s hosting server and requests a file containing the page’s content, such as an image.
2. The server either denies the request or sends the file.
3. If the request is granted, your browser starts serving the page.
4. If additional content, such as CSS styling, is needed to complete the page, your browser sends more requests.
5. This process continues until all necessary requests are served by your hosting server to a visitor’s browser, and the page is fully loaded.

Number of Connections: HTTP vs HTTP2 vs HTTP3

HTTP: Stands for Hypertext Transfer Protocol, an application layer protocol used to transfer information between a web server and a browser. 

Understanding the maximum number of connections your hosting server can handle simultaneously is essential for optimizing website performance and ensuring a smooth user experience, especially during peak traffic periods.

HTTP/1.1 is the oldest version and is still widely used. It works by opening a new connection for each request one after the other; if a request fails to serve, the following connections get blocked and thus fail. This protocol can be inefficient, especially for websites with a lot of images and other resources.

HTTP/2 and HTTP/3: With the introduction of these newer protocols, browsers can make more efficient use of connections; thanks to features like multiplexing, they can send multiple streams of data at once without blocking any other resource. They may still have limits, but they are usually higher compared to HTTP/1.1.

Specification	HTTP/1.1	HTTP/2	HTTP/3
Protocol	TCP	TCP	QUIC
Multiplexing	No	Yes	Yes
Header Compression	Yes	Yes	Yes
Server Push	No	Yes	Yes
Latency	High	Lower	Lower
Performance	Good	Better	Best

As you can see, HTTP/2 and HTTP/3 have significant improvements over HTTP/1.1. So, you should consider WordPress hosting that supports at least HTTP/2.

Why Make Fewer HTTP Requests in WordPress?

When there are lots of HTTP requests, pages load slowly. Slow pages make people leave your site and hurt your search engine ranking.

Even a small delay in page load times, from 2 to 5 seconds, can negatively impact the bounce rates.

So, by reducing the number of requests, you are reducing the size of the page and, hence, making things better for your visitors. Your site will load faster, run smoother, and look better in terms of performance.

Finding Out How Many Requests Your WordPress Site Makes

You can use various online tools to see how many requests your web page is making and figure out where to make improvements. Some of the most popular tools are:

• Developer Tools of a Browser
• PageSpeed Insights
• GTmetrix
• WebPageTest
• Pingdom Website Speed Test

Let’s take a look at how you can use the Browser Developer Tools.

Chrome can help us see how many requests are being made, how big they are, and how long they take to load a webpage.

But remember, Chrome extensions can slow down the loading process. It’s best to test in “Guest” mode to get better results.

Here’s how you can do it:

1. Open Chrome.
2. At the top right, click on your Profile icon, then select “Guest.”
3. Right-click on the blank screen, choose “Inspect,” go to the “Network” tab and then visit your website.

Note: You can refresh the page by hitting “F5” to view the results again.

Types of HTTP Requests in WordPress

In WordPress, there are different types of requests, such as:

• HTML
• JS (JavaScript)
• CSS
• Web fonts
• Images
• Videos
• JSON

By understanding the different types of HTTP requests that your website makes, you can better optimize it for performance. For example, if you have a lot of CSS and JS files, then you can combine them into one file to make fewer HTTP requests.

How Many HTTP Requests Should Be?

Some popular studies suggest that you aim to keep the number of HTTP requests under 50, with exceptional performance achieved below 25 requests.

While these requests are necessary, reducing their number without sacrificing user experience is the key.
Currently, the average number of requests per page is around 70, indicating room for improvement.

How to Reduce Number Requests in WordPress?

Ideally, there are two ways to do that. Either “Remove” or “Combine” HTTP requests. Here’s how you can do that:

• Combine JS and CSS files inside your website
• Getting rid of stuff such as plugins and themes you don’t need
• Only loading images when visitors are about to see them; this is called Lazy Loading.
• Delay running certain scripts, such as Google Analytics, Meta Pixel, Clarity, etc., until the rest of the page is loaded.
• Use object caching to make fewer HTTP requests at the database level.

These tricks cut down on the number of requests, so your site loads quicker and works better.

Let’s dive in for detailed techniques on how you can easily reduce the number of HTTP requests.

1. Use a Caching or Performance Plugin

The simplest way to make fewer HTTP requests in WordPress is by using caching or performance plugins. These plugins are made to make your site faster by using different methods to reduce HTTP requests.

By enabling various caching methods, frequently repeated requests are cached by the visitor browsers or your server. These requests are served through the cache, reducing the number of requests and saving your bandwidth and server resources. 

Some popular plugins include:

• WP Rocket
• Perfmatters
• Asset Cleanup
• LiteSpeed Cache
• Autoptimize
• FlyingPress
• W3Total Cache

And the list goes on.

2. CSS Minify and Combine

Minifying CSS files means reducing the size of the .css file by getting rid of extra spaces and comments.

Combining CSS is when you put all your CSS files into one big file. So, instead of loading 10 different files, you just load one. This cuts down on the number of CSS files a browser needs to call while serving your page.

But sometimes, not all the CSS is needed on every page. That’s where “Remove Unused CSS” comes in. You can use plugins like “WP Rocket,” “Perfmatters,” or “Asset CleanUp” to fix this.

3. JS Minify and Combine

Just like with CSS, you can also make your JavaScript files smaller and fewer in number by minifying and combining them. This means removing extra stuff and putting all your JavaScript into one file.

But be careful! Sometimes, when you combine JavaScript, it might not work right. So, always double-check to make sure everything still works as it should.

4. Remove Unused CSS and JS

If you want to get rid of CSS and JavaScript that you don’t use on your site or a webpage, plugins such as “WP Rocket” and “Perfmatters” can help by automatically taking out any CSS that’s not needed.

Another option is the “Asset CleanUp” plugin. It shows you all the files and assets that load when someone visits a page on your site. Then, you can unload any CSS or JavaScript that’s not necessary for that page.

But be careful! Sometimes, these plugins might remove things that are actually needed. So always check your site after making changes to be sure everything still works okay.

5. Use Lazyloading for Images, Videos, and iFrames

Images and Videos are important for making your site look good, but having a lot of them can slow things down because of all the requests they make.

Lazy loading is a technique that helps reduce the initial number of requests by loading the images and videos only when your site visitor scrolls to them.

This saves bandwidth and helps to make fewer HTTP requests when the page first loads.

6. Delay Scripts

Another way to cut down on the number of requests is by delaying scripts for Google Analytics, Microsoft Clarity, Meta Pixel, or any other script that isn’t needed as the page starts loading.

There are two ways to do so:

1. Deferred: This means the JavaScript runs after the HTML finishes loading.
2. Delayed: With this method, the JavaScript waits until it detects user activity, like clicking a key or moving the mouse.

Delayed is better because it stops the JavaScript from running while the performance score is being calculated.

7. Enable Browser Caching

Browser caching saves static files in visitors’ browsers, so they don’t have to be downloaded again every time for your repeat visitors.

This means fewer HTTP requests for files that haven’t changed, which speeds up loading times for returning visitors. Browser caching can easily be enabled using any caching plugin that we mentioned above. 

8. Combine Images to Create Sprites

Spriting is when you put lots of images into one file. It helps because then the browser only needs to make one request for all those images instead of many.

This makes your website load faster. Sprites are handy for things like icons or small pictures used in different parts of your WordPress website.

There are tons of online tools, such as the “CSS Sprites Tool,” that help you combine multiple images to create sprites.

9. Lazy Load Comments and Widgets

Implementing lazy loading for comments sections and widgets means that the content will only be loaded when users interact with them, rather than loading everything when the page first loads.

This reduces the number of requests and initial page load times and improves overall performance.
Most of the caching solutions support lazy loading by default. Alternatively, you can also use plugins such as “Lazy Load for Comments.”

10. Upgrading to HTTP/2

By opting for hosting that supports HTTP/2, you enable multiplexing and parallel loading of resources over a single connection.

This means that multiple files can be transferred simultaneously, reducing the impact of multiple requests and speeding up the loading process for your WordPress website.

To check if your current hosting provider supports HTTP/2, you can use the KeyCDN online tool.

11. Reduce Redirects

Every redirect adds an HTTP request, which can slow down your website. To reduce the number of requests and improve performance, aim to keep redirects to a minimum.

Additionally, minimizing redirects can positively impact SEO by consolidating link equity and avoiding potential chain redirects, ultimately contributing to better search engine rankings.

12. Minimize External Scripts, Stylesheets, and Fonts

While you can’t always control external scripts, some plugins, such as “LiteSpeed Cache,” offer the option to localize them. However, this may not be ideal if the external files change often.

To make fewer HTTP requests, aim to use minimal external scripts, stylesheets, and fonts as much as possible. This helps streamline your site’s performance.

13. Cut Down on Plugins

Plugins not only increase the overall size of your site but also contribute to HTTP requests. Some plugins generate unnecessary requests by being called on every page, even if not used.

Consider removing unnecessary plugins or finding lighter alternatives to reduce the number of requests and improve site performance.

14. Disable WordPress Emojis

To improve website performance and make fewer HTTP requests, you can also disable WordPress emojis.

These emojis, while fun, add extra scripts and stylesheets to your site, contributing to slower load times.

Other Key Considerations

1. Use Object Cache: Redis or Memcached

Using object caching with Redis or Memcached can greatly enhance the performance of your WordPress site. This is especially beneficial for database-heavy sites like LMS, social networks, and WooCommerce sites.

Object cache stores commonly accessed data in the memory (RAM) of your server; this greatly reduces the time to serve the requests. 

2. Choose Lightweight and Well-Coded Themes and Plugins

Themes and plugins add to the number of requests on your site. The more plugins you have, the more requests they may create.

To minimize HTTP requests, aim to use fewer plugins and opt for themes and plugins that are lightweight and well-coded. This ensures faster load times and smoother performance.

3. Use a CDN

Implementing a CDN involves distributing your website’s content across servers worldwide. This not only decreases the load on your hosting server and latency but also minimizes requests by delivering content from the closest CDN server to your site’s visitors.

As a result, page load times are improved across different geographical locations.

4. Optimize with Preconnect, Preload, and DNS-Prefetch

Preconnect, preload, and DNS-prefetch are techniques used to speed up resource loading times and reduce latency.

They work by establishing early connections to external domains, prioritizing the loading of important resources, and prefetching DNS resolutions for external domains.

5. Improve Time to First Byte (TTFB)

TTFB measures how quickly the server responds to a visitor’s request, indicating server performance and optimization levels.

Choose an optimized WordPress hosting and add a CDN to reduce TTFB, resulting in better performance and user experience.

6. Optimize Images

To improve loading times, compress and optimize images to reduce file sizes. For example, an HTTP request for a 3 MB image will take much more time than a small 20 KB image.

Squoosh is a cool tool to optimize your images.

Also, consider using image formats like WebP, which offer better compression and faster loading times compared to traditional formats.

7. Use GZIP or Brotli Compression

By employing GZIP or Brotli compression, you can shrink the size of your website files before they’re sent to visitors.

This compression technique significantly reduces the amount of data that needs to be transferred over the internet, resulting in faster page loading times.

8. Load JavaScript Asynchronously

Loading JavaScript asynchronously is a technique that allows scripts to load simultaneously with other page elements rather than blocking the rendering of a webpage.

This means that the browser can continue loading and displaying content while JavaScript files are being fetched, resulting in improved performance and user experience.