WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Make Fewer HTTP Request in WordPress (2021)

Last Updated on August 5th, 2021

Published on October 23rd, 2019

Tags: , ,

Share This Article

Do you want your WordPress site to make fewer HTTP requests? 

This essentially indicates that the number of loading things (requests) on your platform must be reduced. Every time you visit a website, a lot of technological things are going on behind the scenes. Your browser requests and gets files in the background as words and photographs are loaded into your computer. 

Such HTTP requests slow down the loading of the effect page, which has an impact on the user interface, bounce rate, and SEO. The program will load faster if it sends fewer HTTP requests to the server.

Nowadays, having a fast-loading website, online store, or blog is a must. A speedy website not only provides a better experience for your visitors, but it also helps your website rank higher. Sending fewer HTTP requests to the server can help your website load faster. 

Today I will demonstrate how to make fewer  HTTP Requests in WordPress.

What exactly is HTTP? 

HTTP (HyperText Transfer Protocol) is a client-server protocol for retrieving resources such as an HTML document. HTTP is the essential building block of data transfer on the Internet; without it, you won’t be able to read files or other documents on any website. HTTP Request and HTTP Response are used to communicate between the client and the server. 

What are HTTP Requests?

Many different components make up a website. Image files are used on a website, CSS stylesheets control how content appears, JavaScript files provide all of that awesome functionality, and so on. 

When someone visits a page on your blog, their browser sends a ping to your web server, asking for the files that include the page’s content. XML, CSS, and JavaScript files, as well as photos, icons, and other files, are examples of such files. 

The protocol used to communicate between these two machines, the browser, and your server, is HTTP, which stands for Hypertext Transfer Protocol. 

It’s important to remember that each element is its own HTTP request. For example, if a website has six image files, the browser must make six separate HTTP requests. 

Article Continues Below

In the same way, if you install five WordPress plugins, each with its own stylesheet, the visitor’s browser will have to make five separate HTTP requests.

Why Should You Reduce HTTP Requests?

In order to display properly, a web page must download information such as images, stylesheets, and scripts. A browser sends an HTTP request to your site’s servers to get this information. The longer it takes for your page to load, the more HTTP requests it has. The longer it takes for a page to load, the more likely users will abandon it, and the less likely it will appear high in SERPs. That’s bad for business in general.

How to Check Your Site’s HTTP Request?

Knowing how many HTTP requests your web pages make can assist you in determining whether they should make fewer queries to improve page speed. In general, the more HTTP requests a web page generates, the slower it becomes. You should minimize the number of queries made by your web pages if they are making too many. 

If you’re using Chrome, you can examine how many HTTP requests your site generates each time it loads using the browser’s Developer Tools. 

To do so, right-click the page you want to inspect on your site and select “Inspect.” Then select “Network” from the drop-down menu. 

The Network panel shows the network activities of your web page. 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.

How Many HTTP Requests are too much?

It is determined by the domains from which the requests originate. When a page receives more than 20 HTTP requests from the same domain, it’s time to start thinking about reducing the number. It also depends on the page you’re working on. More information can be found here.

How to Make Make Fewer HTTPs Request Manually

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 that a web page must load. As a result, the number of HTTP requests is reduced, and the web page’s loading time may improve.

Article Continues Below

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 don’t use anymore. 
  • 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 you’ve dealt with images, go through your files and eliminate any that you don’t need. It could be an embedded video or a third-party social media feed plugin, for example. 

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

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

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. You shouldn’t do it. 

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 the photos you use, 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 picture size. 

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

Use Lazy Loading

Lazy loading postpones the loading of a picture that isn’t required right away on the page. When the website loads, an image that is 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.

Article Continues Below

  • 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 immediately load the given content 

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

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

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.

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 a visitor visits your website, CDNs cache static material and serves 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 the majority of your website’s visitors are local.

If your website receives traffic from all around the world, a CDN can help you speed things up.

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. This “combines numerous font queries to decrease the number of HTTP requests,” according to WP Rocket. Try the OMGF of 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.

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 I tested Grow by Mediavine (Social Pug), it only made one request (though I eventually removed it because even one request was too much for me as a speed nerd). 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.

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 by manually. 
  • Take a screenshot of embedded Tweets or Google Maps instead. 
  • Replace the embedded Facebook widget with a real Facebook widget.

How to Make Fewer HTTP Requests Using Plugins

Combine CSS and Javascript

Combining numerous CSS and Javascript files is one technique to decrease HTTP requests. 

Don’t be alarmed if you don’t know how to use CSS or Javascript. There are simple ways to accomplish this that do not include manually altering your CSS file. 

For starters, this capability is available in many WordPress caching plugins. To integrate CSS and Javascript files, you only need to install the plugin and enable the appropriate parameters.

WP Rocket

make fewer http requests plugin - 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. 

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

Pros

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

Cons

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

Steps to Combine CSS and Javascript

  1. In WP Rocket’s settings, go to the File Optimization tab. After that, activate minification and combine the files as follows:
  1. 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

  • $49 per year

Get WP Rocket

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 highly specific 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 assist you in this.

WP Super Minify

make fewer http requests - WP Super Minify

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

This is the only thing it does. 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 plugin that is solely a minify plugin.

Pros

  • Minifies JavaScript, CSS, and HTML with the option to turn off CSS/JavaScript compression. 
  • It’s quite straightforward and simple 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.
make fewer http requests - Minifying CSS and JavaScript files

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 a variety of methods for reducing your website’s loading time. Reducing the number of HTTP requests you send to the server is by far the most significant improvement you can make. Additionally, minification can help speed things up by making the files smaller.

Hopefully, the solutions listed above will significantly minimize the number of HTTP requests made by your WordPress site. We’ve covered what HTTP is, how to check for HTTP requests on your WordPress site, and different techniques to reduce HTTP requests in this article.

Let us know if you need any help or have any questions. Shoot away! 

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.