How to Make Fewer HTTP Requests in WordPress to Boost the Performance

You already have a website running on WordPress, one of the world’s leading content management systems. With time, as your website grows, you experience slow loading times & performance. The main issue behind this is excessive HTTP requests. But what exactly are HTTP requests?

A website has elements like Image files, CSS stylesheets, JS, and more. All of these things enhance the visual appearance & performance of the site. Anytime a browser sends a request to the server to fetch any information, HTTP protocol is used, and these requests are known as HTTP requests. 

Such HTTP requests slow the page’s loading, impacting the user interface, bounce rate, and SEO. The website will load faster if it sends fewer HTTP requests to the server.

So, do you want your WordPress site to make fewer HTTP requests? Then, you have reached the right place. 

In this blog, we will explain how to make fewer HTTP requests on the site. Before we look at that, we will give reasons to reduce HTTP requests and steps to identify irrelevant HTTP requests.

So, let’s get started.

Why Should You Reduce HTTP Requests?

There are some essential reasons you should reduce HTTP requests on websites. They are as follows.

Faster page load times: Every HTTP request happening on the site increases the page’s loading time. For instance, a page with 10 HTTP requests would load faster than a page with 30 HTTP requests. According to ThinkWithGoogle, 53% of users abandon a site if it takes more than 3 seconds to load. Therefore, you should aim to reduce HTTP requests for faster page load times. 

Enhance Scalability: As the number of users accessing a website increases, the number of HTTP requests also reaches high. A website with a vast number of HTTP requests can become overloaded and unresponsive. By reducing the number of HTTP requests, a website can become more scalable and handle higher levels of traffic.

Better Search Engine Rankings: Google and all the other search engines prefer websites with faster loading times and a better user experience. With fewer HTTP requests on WordPress sites, you can increase the visibility of your site and drive more traffic.

Article Continues Below

Reduced Bandwidth Usage: Every HTTP request on the site requires a specific amount of bandwidth to be transmitted. If a website has massive HTTP requests, it can consume more bandwidth, which can be costly for the website owner. When you reduce the number of HTTP requests, you reduce the bandwidth it consumes, which helps you save money and enhance website performance.

Improve User Experience: Mobile users mainly have slower connections and limited data plans, making it crucial to reduce the number of HTTP requests to improve the mobile UX. When you reduce HTTP requests, you can make your site accessible to a broader audience, which is essential to increase engagement and conversions.

Reduce Server Load: When a website makes too many HTTP requests, it increases the load on the server and leads to slower response times. When you reduce HTTP requests on WordPress site, you decrease the server load, which results in enhanced website performance and improved scalability.

How to Find the Useless HTTP Requests on Your Site?

There are two simple ways to identify the total HTTP requests on sites and rankings your site’s performance. So, let’s look at them in detail.

Rank your site’s performance to know the exact problem

If you are just starting and don’t know how your site performs, you want an extensive report of the website’s health. For the same, we recommend you to visit Hubspot Website Grader.

To leverage the benefits offered by Website Grader, you need to enter the URL of your site and your email address. The site provides a free personalized website grading of your site with essential metrics like mobile responsiveness, SEO, total file size, and total HTTP requests the page is getting.

The grader helps you to identify the main issue that your site might have. Further, it would help if you looked for ways to resolve this issue on your site.

Check the total HTTP Request your site makes

After you understand the size of your webpage and how many requests a page requires, it’s time to identify the total request it is making. You can get this information from Google Chrome’s Network Panel. The tool shows the exact number of requests a page makes and which files take the most time to load.

The tool displays files a browser has to request and transfer to fetch the details of the page and also shows the timeline when this happens. To view this, open a website and head over to Inspect Element -> Go to network, and you can view the total number of requests a page makes.

Refresh the website with the panel open to watch what occurs when your load loads and you’ll see your HTTP requests as they happen in real-time.

Article Continues Below

For example, we have checked the HTTP requests happening on a popular website.

The page sends 304 requests to the server.

How to Make Make Fewer HTTP Requests Manually

Here are some ways to make fewer HTTP requests on the WordPress site.

1. Remove any photos that are no longer needed

As previously said, more files equal more requests. 

As a result, the goal is to reduce the number of files and graphics a web page must load. As a result, the number of HTTP requests is reduced, and the web page’s loading time may improve.

There are two things to keep in mind here:

• Remove any images that are no longer needed from your media collection. You’ll be astonished to discover how many photographs you no longer use.
• If you want to reduce HTTP server requests, don’t sacrifice images. The goal is to get rid of any photographs that aren’t necessary, not to reduce the number of images you regularly utilize. 

After dealing with images, go through your files and eliminate any you don’t need. For example, it could be an embedded video or a third-party social media feed plugin. 

Identify the various aspects your website employs, and then eliminate the ones that aren’t necessary yet consuming your resources.

Get rid of these, and your site’s loading speed will increase.

2. Make images smaller 

You may have erased a significant number of photos. There would, however, be plenty of images left. And there’s no way to get rid of them.

Article Continues Below

As a result, the following step is to lower the file size of the images you’ll be using on your website. 

To reduce the size of your photos, you can use plugins like WP Smush and EWWW Optimizer. It’s also a good idea to choose photographs that are optimized for the web. When feasible, for example, use JPG images instead of PNG.

One of the most basic strategies for increasing the loading speed of web pages is to reduce the picture size. 

It’s also a good idea to use picture caching to reduce server load and improve website performance.

3. Use Lazy Loading

Lazy loading postpones loading a picture that isn’t required right away on the page. When the website loads, an image not visible to the user is loaded later when the user scrolls and the image becomes visible. An image that is not visible to the user is never loaded if the user never scrolls.

• Native Lazy Loading

The ability to load pictures and iframes with native lazy loading is fantastic. Nothing could be easier to understand than the following markup:

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

As you can see, there’s no JavaScript here, no dynamic src attribute value switching, just plain old HTML. 

We can utilize the loading attribute to delay off-screen graphics and iframes until users scroll to their desired spot on the page. Any of the following three values can be used for loading: 

eager: works well for sluggish loading. Instructs the browser to load the given content immediately 

auto: leaves it up to the browser to decide whether or not to load lazily.

This approach has no competitors because it has no overhead and is clean and easy. 

4. Keep the number of external scripts to a minimum 

It’s also a good idea to figure out which additional files are making requests. In the Google Chrome Network window, you can do so. 

External scripts are notorious for increasing the number of HTTP requests. It could be a Twitter social feed plugin, Gravatar, or marketing scripts that are no longer in use, all of which add a few seconds to the load time. 

You can make an informed decision about which assets to maintain and which to sacrifice by discovering the particular third-party integrations and external scripts that are slowing down your website.

5. Make use of a Content Delivery Network (CDN) 

If you’re still having trouble keeping the number of HTTP requests under control, consider using a content delivery network (CDN). 

A content delivery network (CDN) is a collection of servers spread throughout the globe. When users visit your website, CDNs cache static material and serve it to them. The cached material comes from the server closest to the user’s physical location. 

Several factors influence whether or not you should use a CDN. The most crucial consideration is whether your traffic is domestic or foreign. A content delivery network isn’t necessary if most of your website’s visitors are local.

If your website receives traffic worldwide, a CDN can help you speed things up.

6. Combine Google Fonts

Google Fonts can also be merged to reduce the number of requests made. 

• Check the number of font files loaded in your GTmetrix Waterfall report. 
• In your cache plugin, enable Google Font optimization. It “combines numerous font queries to decrease the number of HTTP requests,” according to WP Rocket. Try the OMGF of the Self-Hosted Google Fonts plugin if your cache plugin doesn’t offer a feature to merge fonts.
• Fonts, weights, and font icons should all be consolidated. You’ll see that each font, weight, and icon in GTmetrix generates its own request. Use only one typeface and a few different weights. Plugins like Elementor can make font icons, like the arrows on my navigation menu. 
• In GTmetrix Waterfall, preloading instructs browsers to begin downloading a resource as soon as possible, which should reduce font load times. Plugins like WP Rocket, Perfmatters, and Pre* Party Resource Hints can help with this. Simply copy the font URLs from GTmetrix Waterfall, put them into the preloading area, and retest the load times of your font in GTmetrix.

7. Use a Social Sharing Plugin That Isn’t Too Heavy 

Many social sharing plugins send HTTP queries to Facebook, Twitter, and other social media sites. 

When we tested Grow by Mediavine (Social Pug), it only made one request (though we eventually removed it because even one request was too much). WP Rocket, on the other hand, named that plugin the best quick social sharing plugin. Look over WP Rocket’s list and pick a lightweight plugin that doesn’t generate a lot of GTmetrix requests.

8. Replace Plugins with Code

Many plugins can be avoided by using code instead. 

Examples: 

• Using Google Fonts, you can store your fonts locally. 
• Tracking code for Google Analytics: manually insert 
• Design the table of contents in HTML + CSS manually. 
• Take a screenshot of embedded Tweets or Google Maps instead. 
• Replace the embedded Facebook widget with a real Facebook widget.

9. Ensure your site loads JS files asynchronously

In general, the majority of websites load content present in javascript from the top to the bottom of the page. Due to this, although the web browser sends more than one request at a time, the server loads the content piece by piece. It is also referred to as render blocking. The entire web page loads slowly as every file awaits in the respected web browser.

Establishing a condition where the browser loads the JS file asynchronously, you can override this and offer a better user experience.

Asynchronous loading also ensures that various elements on the page render simultaneously. You can achieve this on your site with multiple plugins like the Async JavaScript plugin.

10. Combine CSS and JavaScript Files

The primary purpose here is to combine the JS and CSS files into a separate file each. For instance, if your site possesses 5 external JS files and 4 external CSS files, it makes 9 requests.

But, when you combine 5 JS files into one file and 4 CSS files into one CSS file, the site will send only 2 requests in place of 9.

Thus, decreasing the total amount of JS files is the most suitable way to decrease HTTP requests and improve site loading speed.

11. Minifying CSS and JavaScript files

Minification is a popular approach for increasing a website’s loading speed. 

You may reduce the total file size and the number of files that need to be loaded by minifying and concatenating assets like CSS and JavaScript. A decent rule of thumb is to combine files according to their functions; for example, if you have numerous files that handle picture editing, concatenating them could be a smart idea. 

You can also lower the overall loading time by reducing the number of CSS files that load at first. Minification and concatenation can also aid in this instance. CSS files are cached by your browser after the initial load, so subsequent queries should take less time. You can see how having a single file with all of the required CSS, as well as caching, may improve the overall experience. 

If you have a particular CSS for a given page, you should load that file individually. As a result, you won’t have to transport CSS rules that aren’t used anywhere else in your HTML. 

There are numerous online tools available to assist you with minification and concatenation during the development process. You can also use a plugin like WP Rocket to help you with this.

How to Make Fewer HTTP Requests Using Plugins?

Combine CSS and Javascript

Here are some popular plugins you can utilize to reduce HTTP requests on your WordPress site.

WP Rocket

WP Rocket is a WordPress plugin that enables caching on websites in order to improve loading speeds. WP Rocket was created to make caching as simple as possible so that anyone, regardless of technical ability, can start speeding up their WordPress website. 

On the other hand, WP Rocket seeks to appeal to power users by giving them enough tools and settings to enable caching on their website exactly how they want it.

Pros

• If you decide to change some of the options, there are clear and simple explanations next to each one. 
• The plugin is compatible with many hosting providers, plugins, themes, and WooCommerce.

Cons

• There is no live assistance available. 
• There is no such thing as a lifetime license.

Steps to Combine CSS and Javascript Using WP Rocket

1. In WP Rocket’s settings, go to the File Optimization tab. After that, activate minification and combine the files as follows:

2. Autoptimize can also be used to merge CSS and JavaScript files. To merge files, go to Autoptimize Settings and select the following options: 

• Aggregate JS-files
• Aggregate CSS-files

Price

• It starts from $59 and goes up to $299 per year. The price varies based on the total number of websites.

Get WP Rocket

WP Super Minify

WP Super Minify is a small and straightforward plugin that minifies, combines, and caches HTML, Javascript, and CSS code. 

There are two choices in the settings for excluding Javascript and CSS from being minified. 

WP Super Minify is a good alternative if you want a simple and light WordPress Minify plugin.

Pros

• Minifies JavaScript, CSS, and HTML with the option to turn off CSS/JavaScript compression. 
• It’s pretty straightforward to use.

Cons

• There are more advanced plugins that improve page performance.

Minifying CSS and JavaScript files 

1. Select WP Super Minify from the Settings menu on the left-hand admin panel. This will take you to the main configuration page. 
2. On this plugin, there aren’t a lot of options. Simply select Compress JavaScript and Compress CSS from the drop-down menus. 
3. To complete the minification process, click the “Save Changes” button.

Price

• FREE

Get WP Super Minify

Wrapping Up!

During client-server communication, HTTP requests are a necessary part of data transport. If web pages take too long to load, visitors may abandon them rather than wait for the content to appear. Minimize download requests to reduce download delay.

As you can see, there are various methods for reducing your website’s loading time. Reducing the number of HTTP requests you send to the server is the most significant improvement you can make. Additionally, minification can help speed things up by making the files smaller.

We hope the solutions listed above will significantly help you minimize the number of HTTP requests made by your WordPress site. 

Frequently Asked Questions

How many HTTP requests are too many?

No specific number of HTTP requests can be considered “too many” universally because it depends on many factors, such as the server configuration, the nature of the website, and the capabilities of the client device.

However, in general, a web page should ideally have fewer than 50 HTTP requests, but this number can vary based on the specific context. You should monitor the website’s performance, keep fewer HTTP requests, and offer an optimum user experience.

Why are too many HTTP requests bad?

There are some reasons why too many HTTP requests are bad. These are as follows.

• Every HTTP request needs a round-trip communication between a client and the server. If there are too many HTTP requests, it delays response time, leading to slower page loading times.
• Each HTTP request needs the server to allocate resources like memory, processing power, and network bandwidth. If there are too many requests, it can result in resource exhaustion and lead the server to crash.
• Sometimes, HTTP requests can be costly regarding data transfer charges, mainly if the requests involve large amounts of data or are made frequently.