Make fewer http requests как исправить вордпресс

The more HTTP requests your site has, the slower it’s going to load. So if you can reduce the number of HTTP requests and optimize how they load, you can improve your website’s performance.

In this post, we’ll take you through everything you need to know about how to make fewer HTTP requests on WordPress.

We’ll start with a basic introduction to HTTP requests, why they matter, and how to analyze your WordPress site’s requests.

Then, we’ll share some tips and strategies that you can implement to reduce your site’s requests. In addition to helping you with the “Make Fewer HTTP Requests” message in GTmetrix, these strategies will also help with the “Avoid chaining critical requests” message in Google PageSpeed Insights.

Slow site? ⏱ Too many HTTP requests could be the culprit. Check out this guide to making fewer requests right here 💥Click to Tweet

Prefer to watch the video version?

What Are HTTP Requests?

When you build a website, it has a lot of different parts. You have the different image files that you use on a page, the CSS stylesheets that control how content looks, the JavaScript files that add all that cool functionality, and so on.

When someone visits your website, their browser needs a way to download all of the resources required for that page from your server. To do that, it makes HTTP requests to the server for each individual resource.

For example, it might say, “hey server, I need that coolimage.png file” and “hey server, I also need the CSS stylesheet for that contact form plugin“. The server then responds to those requests with the files in question.

Once the web browser gets those files, it can assemble the web page for your visitor. Of course, it’s a little more complicated than that, but that’s the basic idea.

HTTP, short for Hypertext Transfer Protocol, is how these computers (the visitor’s browser and your webserver) communicate.

One important thing to understand is that each separate element is a separate HTTP request. For example, if you have five image files on a webpage, the browser needs to make five separate HTTP requests, one for each image.

Similarly, if you use four WordPress plugins and each plugin adds its own CSS stylesheet, the visitor’s browser will need to make four separate HTTP requests, one for each plugin’s stylesheet.

Why Is It Important to Reduce HTTP Requests?

In general, the more HTTP requests your website has, the slower it’s going to load. So if you want to make your website load faster, you need to optimize and reduce the number of HTTP requests that your site requires.

While this is a bit of an oversimplification, the basic idea is that the web browser will only display the website to your visitor once it’s finished downloading all of the HTTP requests (though there are some tactics to tell the browser it’s ok to wait for certain files).

So if a website has to make 70 HTTP requests before it can display the page, that’s going to take longer than if it has to make 40 HTTP requests.

Additionally, some HTTP requests will “block” other HTTP requests, which means that the browser can’t start downloading certain HTTP requests until it finishes downloading the HTTP requests before it.

Bottom line is: when you make fewer HTTP requests, you make your website load faster.

How to See and Analyze Your Site’s HTTP Requests

Above, you learned that all things being equal, reducing the number of HTTP requests will speed up your site. However, all HTTP requests aren’t always “equal”. Some HTTP requests are bigger than others. Some are slower than others.

For example, the request for a huge 3 MB image file will take a lot longer than the request for a tiny 20 KB image.

If you want to make the biggest improvement to your site, focusing on the big, slow-loading HTTP requests first will have the biggest return on your investment.

To analyze your site’s HTTP requests, you can use something called Waterfall analysis.

Most speed test tools offer this, but the interfaces at GTMetrix and Pingdom are very convenient. You can also use your browser’s developer tools. However, we’ll use GTmetrix for our screenshots.

Once you plug in your URL, you’ll see a basic summary box at the top. This shows you how many HTTP requests your site has, but it doesn’t break down the individual requests:

To analyze your individual requests, go to the Waterfall tab below.

Here, you’ll see a list of each individual HTTP request on your site along with information on how long that HTTP request took to download:

You can see how not all HTTP requests are equal. For example, the 839.3 KB image takes 1.12s while the 57.6 KB image took just 87.5 ms:

You can also find HTTP requests from the different WordPress plugins that you’re using by searching for the name of that plugin’s folder on your server. For example, you can see that WooCommerce adds seven of its own HTTP requests:

In this way, you can see if any plugins that you’re using are adding a lot of HTTP requests (especially slow-loading requests).

How to Optimize and Make Fewer HTTP Requests in WordPress

At a high level, there are two broad strategies to make fewer HTTP requests:

• Remove HTTP requests. If possible, you should completely remove every unnecessary HTTP request. For example, if you have a plugin that adds no value to your site and is loading its own CSS and JavaScript, just completely remove that plugin to get rid of all of its HTTP requests.
• Combine HTTP requests. If you have HTTP requests that you absolutely must load, you can combine them into a single file. For example, instead of six small CSS files, you can combine them into a single larger CSS file, which will still load faster because the browser needs to make fewer requests (this isn’t always true with HTTP/2, which we’ll discuss below).

We’ll start with the tactics that focus on removing HTTP requests and then we’ll get into how to combine the remaining HTTP requests. The basic idea is to remove what you can and then combine whatever is left.

1. Remove Unnecessary WordPress Plugins

To get started, you’ll want to use the waterfall analysis to pull up all the requests from your plugins. You can do this by searching for “plugins”, which will pull up every HTTP request originating from the wp-content/plugins folder.

If you hover over the name of the file, you can see which plugin it comes from. For example, here you can see a request from the slider plugin you might be using.

Some further digging would turn up that Slider Revolution adds three of its own HTTP requests, even though this test page doesn’t contain any sliders:

If you’re using Slider Revolution for a key slider, then maybe you need to keep it. But if you installed it to test it, then later removed the slider, and you’re now not really using it…then you should remove it to get rid of those HTTP requests.

Basically, you want to go through the entire list and ask yourself if each plugin is really adding value to your site. If a plugin isn’t (but is adding HTTP requests), then you’ll be better off removing it.

2. Replace Heavy Plugins With More Lightweight Ones

Once you’ve trimmed any unnecessary plugins, the next step is to see if you can replace any plugins you’re using with more lightweight alternatives.

For example, let’s say you want to add social share buttons to your site. That’s a good feature to have, but some social share plugins can add a lot of HTTP requests.

For example, the popular AddThis plugin adds six of its own HTTP requests (including some external requests – more on those in a second):

You could trim a lot of this fat by using a more optimized alternative such as NovaShare or Grow by MediaVine.

3. Conditionally Load Scripts That Aren’t Needed Sitewide

At this point, you should’ve removed all the plugins that aren’t needed anywhere on your site. However, there’s another class of plugins that might cause problems – plugins that are only needed on specific parts of your site but load their scripts everywhere.

For example, take the popular Contact Form 7 plugin. You probably only need this plugin on a couple of pages (e.g. your “Contact Us” page). However, Contact Form 7 loads its scripts on every single page on your site. So, for example, Contact Form 7 is still adding some HTTP requests to your blog posts even though your blog posts don’t have any contact forms.

Another example could be WooCommerce if you’re only using it as a payment processor. WooCommerce will still load its scripts everywhere, even though you really only need them on the cart and checkout pages for this use case.

An advanced tactic here is to conditionally load plugins only where they’re needed. For example, you could let Contact Form 7 load on your “Contact Us” page, but disable it everywhere else.

If you’re not a developer, you can use plugins like Asset CleanUp or Perfmatters to do this without code. With Perfmatters, you’ll first need to enable the script manager. Then, you can open the script manager to view all the scripts loading on a page and disable any that aren’t needed:

Be careful as you might cause issues if you accidentally disable a script that really is needed. While this is a useful tactic, it’s also an advanced tactic.

If you don’t feel confident, you might want to just skip this step or hire a developer to help you out.

4. Remove Unnecessary Images (And Optimize the Rest)

Used well, images make your website more user-friendly and engaging. They add value to your site.

However, each image on your site is a separate HTTP request. So if you have images that aren’t adding value, it’s best to remove them to eliminate those HTTP requests.

For example, is that funny GIF worth it? It might be… but it also might not – you need to think about the trade-offs whenever you’re adding more images to your content.

Finally, make sure to resize and compress the images that remain. While this won’t reduce the number of HTTP requests by itself, it will reduce the size of those HTTP requests, which will make them load faster.

5. Use Lazy Loading for Images and Videos

With lazy loading, your site will wait to load below-the-fold images, videos, and iframes until a user starts scrolling down.

Because these resources don’t load right away, there’s no need to make an HTTP request for the initial page load.

As of WordPress 5.5, WordPress now includes native lazy loading for images using the HTML loading attribute. For some other ways to implement lazy loading (including for video files), you can check out our complete guide to WordPress lazy loading.

6. Limit Custom Fonts Use and/or Use System Fonts (Same for Icon Fonts)

Custom fonts are great for improving the design and user experience on your site. However, you need to be careful with how you use them because each custom font type that you use adds another HTTP request.

If you’re going to use custom fonts, make sure to stick to a small number. Do you really need a different font for your post title and your post body? Or could you use the same font? Do you really need all five font weights? Or could you just choose two?

The same holds true for icon fonts such as Font Awesome and IcoMoon. Icon fonts can be useful, but you probably don’t need to load multiple icon font libraries. It’s better to pick just one icon font library and stick with that.

Finally, if you want to go one step further and completely eliminate HTTP requests related to your site’s fonts, you can consider using a system font stack. While this will give you less flexibility in terms of design, it also means that your visitors won’t have to load any font files just to render your site.

(Suggested reading: How to Change Fonts in WordPress).

7. Disable WordPress Emojis

By default, WordPress adds its own HTTP request for emojis. While it’s only a single 5.1 KB HTTP request, this file has long been a thorn in the side of WordPress performance fans. Here at Kinsta, we love WordPress performance, which is why we have an entire guide on how to disable WordPress emojis.

The simplest option is to just install and activate the free Disable Emojis (GDPR friendly) plugin. However, you can read our full guide for some other options.

After you do this, your HTTP request count will drop by one and you can still use emojis 😃

8. Reduce/Eliminate Third-Party HTTP Requests

So far, we’ve focused mainly on reducing the HTTP requests for files on your WordPress site’s server. However, your visitors’ browsers might also need to request files from third-party servers.

These requests can be even more troublesome because your site is at the mercy of the speed of those third-party servers.

Some examples:

• Google Analytics – the tracking script is hosted on Google’s servers, but visitors’ browsers still need to download that file.
• Embedded YouTube videos – you’ll see lots of HTTP requests to YouTube’s servers.
• Third-party ad services – you’ll see tons of third-party requests related to serving your ads.
• Google Fonts (on Google’s CDN) – you’ll see third-party requests to Google’s servers to load your font files.

You can apply many of the same tactics from above to these third-party HTTP requests.

For example, if a plugin adds its own third-party requests (like the AddThis plugin from above does), you can remove it and use something more optimized.

For YouTube videos, you can lazy load them and replace the initial page load with an image thumbnail. This will delay adding those HTTP requests until a visitor wants to play the video.

For third-party scripts that are necessary, like Google Analytics or Facebook Pixel, you can experiment with hosting those scripts locally.

WP Rocket has built-in add-ons to host Google Analytics and Facebook Pixel locally or you can use a plugin like CAOS (Complete Analytics Optimization Suite).

We also have some guides that might help:

• How to host fonts locally
• How to host Google Analytics locally

9. Combine Images with CSS Sprites

At this point, you should’ve hopefully been able to make fewer HTTP requests from your site. Now, it’s time to get into how to combine the HTTP requests that remain, starting with images.

Another way to optimize the images on your site is to combine separate images into a single image file. Then, you can use CSS to display just a portion of that image file where needed. This is a tactic called CSS sprites.

CSS sprites work best for decorative images like logo variations or icons. You should not use CSS sprites for informational images (like images in the body of a blog post) because there are two big drawbacks:

• SEO – because you’re combining images into a single image file, you can’t rank individual images in Google Search.
• Accessibility – because you can’t add alt-text to images, people with screen readers won’t be able to understand images loaded with CSS sprites (though there are some tactics to fix this).

If you’re still confused about this topic, here’s an example of Amazon’s CSS sprite file – you can see how it includes a bunch of logo variations, as well as some icons. Amazon uses CSS to make sure that only the relevant “portion” of that image file displays at each location:

Unfortunately, there’s no “set it and forget it” WordPress plugin for CSS sprites. However, you can find tools to help, like this CSS Sprite Tool:

1. Upload the images that you want to combine to the tool.
2. The tool will then give you a combined image file, along with some CSS code for each image that you uploaded.
3. Upload the combined image file to your WordPress site.
4. Use the CSS code to display the image in your content. The provided CSS will automatically select only the proper portion of the combined image file.

10. Combine CSS and JavaScript Files

Between your WordPress theme and your plugins, your site is probably going to be loading multiple CSS stylesheets and JavaScript files, which means multiple HTTP requests just for the browser to download the CSS and JavaScript it needs to render the page.

To reduce all of these separate requests, you can combine these separate files/stylesheets into a single file/stylesheet. This is called file combination or file concatenation, depending on the tool that you’re using.

Many WordPress caching plugins include features to combine CSS and JavaScript files. For example, WP Rocket, which you can use at Kinsta, lets you enable both with a few clicks.

Go to the File Optimization tab in WP Rocket’s settings. Then, enable minification and then combine the files:

For a more detailed look, check out our full WP Rocket guide.

You can also use Autoptimize to combine CSS and JavaScript files. To combine files, go to Settings → Autoptimize and choose the options to:

• Aggregate JS-files
• Aggregate CSS-files

For a more detailed look, check out our full Autoptimize tutorial.

The benefits of file combination are less clear with HTTP/2, which is what your site uses if you host at Kinsta. HTTP/2 is designed to be more efficient at transferring multiple small files, which means there’s less of a difference between one large CSS/JS file and multiple small files.

Basically, if you’re hosting at Kinsta, you might not need to do this step to make improvements to your page load times. That’s because Kinsta customers can access the code minification feature directly in their MyKinsta dashboard. This will help boost overall optimization by allowing customers to enable automatic CSS and JavaScript minification with a simple click.

We recommend still testing it as it can still be beneficial to some sites, but you also might not notice any difference in real page load times.

However, many performance testing tools like GTmetrix still don’t recognize HTTP/2, so GTmetrix might still display the “Make Fewer HTTP Requests” message and reduce your score. Remember, though – scores don’t matter as much as real page load times do.

11. Defer Render-Blocking JavaScript

Deferring render-blocking JavaScript isn’t eliminating HTTP requests per se. However, it is optimizing how they load, which can have the same effect on your site’s perceived load times.

It can also help with the “avoid chaining critical requests” message in Google PageSpeed Insights/Lighthouse.

By deferring requests for certain files or loading them asynchronously, you can prevent certain unimportant resources from “blocking” resources that are needed to quickly load the visible portion of your site.

For more on why this happens, you can read our guide on understanding the critical rendering path of a web page.

Then, you can follow our detailed guide to eliminate render-blocking resources on WordPress.

Best WordPress Plugins to Make Fewer HTTP Requests

If you’re looking for some “all in one” WordPress plugins to make fewer HTTP requests, we recommend two of the plugins from the tutorial above:

• WP Rocket
• Perfmatters

While you’ll still need to manually evaluate your theme and plugins to see if they’re making too many HTTP requests, both these plugins can help you optimize everything that remains on your site once you’ve done your cleaning.

More HTTP requests = slower site loading time. ⏳ Break that cycle with this guide to reducing your requests 📉Click to Tweet

Summary

Every separate resource on your site adds an HTTP request. One image is one HTTP request, one CSS stylesheet is one HTTP request, one font file is one HTTP request, and so on.

If you’re using WordPress, your theme will certainly add its own HTTP requests and many plugins also add their own HTTP requests. You’ll also have HTTP requests from any images that you use and third-party scripts that you add (such as analytics tools).

More and/or larger HTTP requests will lead to a slower website. This is why you’ll commonly see messages like “make fewer HTTP requests” or “optimize HTTP requests” or “avoid chaining critical requests” when you use speed test tools like GTmetrix or PageSpeed Insights.

To reduce the number of HTTP requests on your site, you can follow the steps that we detailed above.

Do you still have any questions about how to make fewer HTTP requests in WordPress? Let us know in the comments!

Website speed checking tools may display the warning/message “make fewer HTTP requests” in their analysis reports.

How too many HTTP requests can impact the site performance? A website page may have several URLs. These URLs can be a hyperlink or a link to site resources such as CSS, JS, font files, etc. When a visitor opens the main URL i.e. page URL, the browser makes several HyperText Transfer Protocol requests in the background. The web server or the application server will send back a response. If the browser makes 50 HTTP requests, the web server will respond 50 times. Each request and response execution takes some time. This is the reason why page speed testing tools prompt users to reduce the number of HyperText Transfer Protocol requests on the site/page.

Why you should fix the “make fewer HTTP requests” error in WordPress? A WordPress plugin may have its own stylesheet or Javascript file. When you install and activate the plugin, it will insert the links to the JS/CSS file in the site’s header or footer. Each time you install a new plugin, this plugin may put links to the plugin’s resource files in the HTML of the page. If you don’t reduce the number of HyperText Transfer Protocol requests, the site’s performance may be hampered.

You can reduce the number of HyperText Transfer Protocol requests on a website by using one of the following plugins:

WP Rocket

WPR is the best full-page caching plugin for WP. It has an option called combine CSS files and combine JS files. You can reduce the size of the combined files by enabling the Minify CSS and Minify JS files options (selecting their checkboxes). When you do so, the number of links to CSS/JS files on the page will reduce drastically. WP Rocket can also reduce the number of Google Font files on the page by combining them. You can find the “combine” options in the File optimization section of the WP Rocket plugin settings.

Autoptimize

Autoptimize is not a full-page caching plugin like WP Rocket, but it can reduce the number of HTTP requests by combining multiple Cascading Style Sheets and Javascript files into one. To enable this feature, all you have to do is select the checkboxes Optimize JavaScript and Optimize CSS checkboxes and click the “Save changes” button.

WP Fastest Cache

WPFC, aka WP Fastest Cache, is active on a million sites, according to the WordPress plugin repository. Like Autoptimize or WP Rocket, it can combine JS and CSS files and reduce the number of HTTP requests. To use this function of WP Fastest Cache, open the plugin’s Settings page and select the checkboxes Combine CSS and Combine JS. Now, save the settings.

Need to make fewer HTTP requests in GTmetrix YSlow?

To make fewer HTTP requests in WordPress, start by combining CSS, JavaScript, and font files. Lazy load images and videos, then reduce the amount of third party requests loading on your site. Avoid slow plugins that create unnecessary requests and finally, selectively disable plugins.

Making fewer HTTP requests means you need to reduce how many elements (requests) load on your WordPress site. Check your GTmetrix Waterfall report to see individual requests created by images, fonts, CSS, and JavaScript. Then optimize your website depending on those requests. Another method is to use Asset CleanUp or Perfmatters to view which requests load on certain content (plugins, scripts, and styles) and selectively disable these where they’re not being used.

1. Combine CSS + JavaScript Files

Combining CSS + JavaScript lets browsers make 1 single request for your CSS file instead of multiple requests, and same with JavaScript files. This can usually be done in your cache plugin.

Step 1: In your cache plugin settings, find the option to combine and minify CSS + JavaScript.

Step 2: Enable each setting one at a time, then test results in GTmetrix.

Step 3: Check for visible errors on your website. If you see errors, view the source code, find the problematic files, and exclude them from your CSS or JavaScript minification settings. For example, if your slider disappears when enabling a certain setting, check your slider files in the source code and exclude the problematic file. If you don’t see errors, there is no need for this.

Alternatively, you can manually combine your CSS files in WordPress under Appearance → Theme Editor. You would simply copy and paste the contents in all files into 1 single CSS file.

2. Combine Google Fonts

Google Fonts can be also combined to generate fewer requests.

Step 1: View your GTmetrix Waterfall report to see how many font files are being loaded.

Step 2: Enable Google Font optimization in your cache plugin. As said in WP Rocket, this “combines multiple font requests to reduce the number of HTTP requests.” If your cache plugin doesn’t have an option to combine fonts, try the OMGF of Self-Hosted Google Fonts plugin.

Step 3: Consolidate your fonts, weights, and font icons. In GTmetrix, you may notice each font, weight, and icon creates their own request. Try to use only 1 font and only a couple weights. Font icons can be created by plugins like Elementor, such as the arrows in my navigation menu.

Step 4: Preloading tells browsers to start downloading a resource as soon as possible and should reduce font load times in GTmetrix Waterfall. You can do this with plugins like WP Rocket, Perfmatters, or Pre* Party Resource Hints. Simply copy the font URLs from GTmetrix Waterfall, paste them in the preloading section, then retest your font’s load times in GTmetrix.

3. Lazy Load Images + Videos

Lazy loading significantly reduces HTTP requests and is recommended in PageSpeed Insights.

Lazy loading images eliminates all HTTP requests from images since they’re only loaded when you scroll down and see them. If you use many images, this significantly reduces HTTP requests.

Lazy loading videos eliminates most HTTP requests from embedded videos. But since thumbnails often create external requests, you may still see minor GTmetrix errors for leveraging browser caching and add expires headers (see Elementor section below to fix it on Elementor).

Lazy Load In WP Rocket – enable lazy loading and replace iframe with a preview image.

Lazy Load In SG Optimizer – enable all lazy load options in the Media Optimization settings.

Lazy Load In Elementor – I followed this video by WPCrafter and was able to get videos creating 0 errors in GTmetrix (not even browser caching or expires headers issues). You will need Elementor Ultimate Addons, then use the native Elementor video element to load the video. The key here is to upload a custom thumbnail directly to your website (through Elementor) so your website doesn’t have to go to YouTube to load the thumbnail. You can even customize the arrow buttons and branding on your embedded videos. It’s brilliant. My blog doesn’t use Elementor so you will still see errors for videos on my blog, but I promise it works!

If you’re not using either of these plugins, try WP YouTube Lyte for lazy loading videos.

4. Optimize Third Party HTTP Requests

Third party scripts are anything that pull requests from outside websites.

They can be Google Fonts and embedded YouTube videos (which I covered) but other requests can be created by Google AdSense, embedded Maps, Tag Manager, Facebook Pixel, Gravatars, even “like counts” on social sharing plugins. Some are easy to optimize, others are impossible.

Prefetching External Requests – the final step is to view all your third party scripts from the “reduce DNS lookups” section in GTmetrix YSlow, copy their URLs, and prefetch them using a plugin like WP Rocket, Pre* Party Resource Hints, or Perfmatters. This helps load them faster.

Many social sharing plugins create HTTP requests from Facebook, Twitter, etc.

I recommend Grow by Mediavine (Social Pug) since it only created 1 single request when I tested it (though I ultimately disabled it because even 1 request was too much since I’m a speed nerd). But that plugin was also rated the #1 fast social sharing plugin by WP Rocket. Take a look at WP Rocket’s list and use a lightweight plugin that doesn’t create lots of requests in GTmetrix.

6. Selectively Disable Plugins

Many plugins run across your entire site, even on pages where they’re not needed.

Asset CleanUp and Perfmatters let you disable plugins, scripts, and styles on specific pages/posts. I like Perfmatters (by Kinsta) since it also lets you remove WordPress bloat. By disabling plugins on content where they don’t need to load, this results in fewer HTTP requests.

Examples:

• Disable slider plugin on pages that don’t use sliders
• Disable rich snippets plugin on pages that don’t use rich snippets
• Disable contact form plugin on pages that don’t have a contact form
• Disable affiliate link management plugin on pages that don’t use aff links
• Disable social sharing plugin on all pages (since it’s usually for blog posts)

Step 1: Install Asset CleanUp or Perfmatters (both let you selectively disable plugins).

Step 2: Edit a page or post, scroll down to the Asset CleanUp section, and review which CSS + JavaScript files are loading on the page. These can be from plugins, themes, or external scripts.

Step 3: Disable all plugins and requests you don’t need on that page. You can disable them on 1 single page, across your entire site, by post type, or use RegEx (regular expressions) to disable them on specific URL patterns. RegEx is only included with Perfmatters or Asset CleanUp Pro.

7. Avoid Slow Plugins That Generate Requests

High CPU plugins can generate a ton of HTTP requests.

These are usually social sharing, statistics (analytics), sliders, portfolios, page builders, calendars, chat, and contact form plugins. Basically, avoid any plugin that pulls external requests from outside websites, runs ongoing processes, or just takes a long time to load.

Step 1: Check for slow plugins in GTmetrix Waterfall or Query Monitor.

Step 2: Avoid known high CPU plugins.

Step 3: Replace slow plugins with faster, lightweight plugins. Research and testing is required.

8. Use WP Rocket To Make Fewer HTTP Requests

WP Rocket has many optimization features not included with other cache plugins, and I definitely recommend using it if you’re serious about making your WordPress site load faster.

Making sure you have properly configured settings can make a big difference. The file optimization and add-on settings are especially helpful in making fewer HTTP requests.

I have also guides on Autoptimize, W3TC, and WP Super Cache, but try to use WP Rocket.

9. Use A CDN

CDNs can help make fewer HTTP requests.

Instead of making your origin server respond to a request, a CDN’s data centers will offload bandwidth while lightening the load on the origin server. Cloudflare is free, so it’s a no-brainer.

I recommend either using Cloudflare or WP Rocket’s RocketCDN. Both have their pros and cons but I personally use RocketCDN which uses StackPath’s data centers. RocketCDN is set up automatically once you purchase it in WP Rocket, Cloudflare requires changing nameservers.

If using Cloudflare, be sure to check out my recommended page rules.

10. Minimize Redirects

Unnecessary redirects can cause extra HTTP requests.

You will need to look at your GTmetrix report to see what’s causing this error. Is it being generated by an external script or plugin on your site? Have you tried optimizing that script or looking for a more lightweight plugin? Is it because you changed your domain version to non-WWW or HTTPS but haven’t updated all links/images on your site to reflect the new version?

Common Causes

• Bad plugins
• External scripts
• Changed to WWW vs Non-WWW but haven’t updated links
• Changed to HTTPS vs non-HTTPS but haven’t updated links

11. Optimize CSS Delivery

This should fix the render-blocking resources item in PageSpeed Insights.

WP Rocket, Autoptimize, and other similar plugins should have an option to optimize CSS delivery. Simply go into your settings and make sure you have this enabled, and it should fix it.

12. Minify HTML, CSS, JavaScript

Minifying files is usually done by your cache plugin (see step 1).

But sometimes, this can break your website. In this case, you would have to test each setting one by one, check for problematic files in the source code, then exclude those files from minification using your cache plugin. If you don’t see visible errors, you don’t need to do this.

13. Defer/Load JavaScript Files Asynchronously

Asynchronous JavaScript means the files load after the page is finished downloading.

This can be done using WP Rocket or Async JavaScript and should fix the remove render-blocking Javascript item. Async JavaScript gives you full control of which scripts to add an ‘async’ or ‘defer’ attribute to, while WP Rocket defers JavaScript automatically with 1 click.

14. Disable WooCommerce Scripts, Styles, Cart Fragments

WooCommerce sites naturally generate more HTTP requests.

Not only do they typically require more plugins, but they also load extra WooCommerce scripts, styles, and cart fragments. Just like you can selectively disable plugins from the previous step, you can also selectively disable WooCommerce requests from loading across your entire site.

Using Asset CleanUp or Perfmatters, disable these on pages where they don’t need to load:

Alternatively, Perfmatters lets you disable these in 1-click:

15. Optimize Images

There are 3 primary ways to optimize images in GTmetrix. These won’t reduce the number of HTTP requests, but they will reduce the size of the requests, therefore improving load times.

Serve Scaled Images: resize large images to be smaller. GTmetrix tells you which images are too large and the correct dimensions they should be cropped/resized to. Try creating an image dimension cheat sheet by measuring the dimensions of your sliders, full width blog images, widgets, and other areas of your website. Then make sure to resize images to those correct dimensions before uploading. If you do this, you should never have serve scaled image errors.

Optimize Images (Lossless Compression): use a plugin like TinyPNG (what I use), ShortPixel, Smush, or Imagify to compress images. Although these plugins say lossless, you may sometimes notice a small loss in quality. That’s why it’s best to backup your images and test a couple of them before bulk optimizing all images on your site, to make sure you’re happy with the quality.

Specify Image Dimensions: add a width + height to the image’s HTML or CSS. This is automatically done in the Visual Editor, but not custom HTML, some page builders, and possibly other areas of your WordPress site. GTmetrix will show you which images have these errors and provide you with their correct dimensions. To fix the error, you will need to locate the image in your WordPress dashboard, edit the HTML or CSS, then add the appropriate width + height.

<img src="example.jpg" width="680" height="680" />

16. Replace Plugins With Code

You can avoid many plugins by replacing them with code.

Examples:

• Google Fonts: host your fonts locally
• Google Analytics tracking code: insert manually
• Table of contents: design it manually in HTML + CSS
• Embedded Tweets or Google Maps: take a screenshot instead
• Embedded Facebook widget: replace with actual Facebook widget

Consolidating plugins also helps. One classic example is using WP Rocket which comes with hosting fonts, analytics, and Facebook Pixel locally, lazy loading images + videos, database cleanup, preloading, heartbeat control, and integration of both Cloudflare and multiple CDNs. With other cache plugins (since most of them don’t have these features), you would need to install 6-7 extra plugins to get those speed optimizations, when they’re built-in to WP Rocket.

Still Need To Make Fewer HTTP Requests?

If you still need help, leave me a comment. The WordPress Speed Up Facebook Group is also helpful, or you can hire us for WordPress speed services with before + after GTmetrix reports.

And for hosting, I recommend DigitalOcean on Cloudways for many reasons (see my review).

Frequently Asked Questions

Thanks for reading

Cheers,
Tom

You noticed that your website is slow, and you decided to figure out why with a speed testing tool, for example, Pingdom. Part of the diagnosis is “make fewer HTTP requests” and it is regarded as critical. How do you make fewer HTTP requests and boost your website speed?

This article will address the most critical questions in making fewer HTTP requests on your WordPress site: Why does the diagnosis come up? How does it affect your website’s user experience (UX) and SEO? How can you identify HTTP request optimization opportunities? And chiefly, how can you fix the “make fewer HTTP requests” issue on WordPress?

What Is the “Make Fewer HTTP Requests” Diagnosis?

To unpack this diagnosis, let’s start with a background study of HTTP requests.

HTTP, an acronym for HyperText Transfer Protocol, is the internet protocol that web browsers use to communicate with web servers. HTTP requests are the standard network requests made to a server to fetch any resources needed. On a website, these resources include HTML documents, CSS stylesheets, JavaScript files, fonts, etc. 

The nature of HTTP requests explains why the diagnosis says “make fewer” and not “make no” HTTP requests: they are essential for any website to function.

A webpage consists of different essential parts: an HTML document, CSS stylesheets for styling the page, JavaScript files for adding interactive functionalities, images, fonts etc. These webpage elements are stored on the server. On every page load, if they are not cached locally, the browser will request on behalf of your computer to fetch these resources before using them to construct the webpage. Practically, separate HTTP requests are made to fetch these resources (images, stylesheets, and scripts). If there are multiple external CSS files, for example, a separate HTTP request is initiated to retrieve them from the server.

The operations described above also take place on a WordPress website, with the possibility of more HTTP requests than usual. This is due to the plugins and fonts that a website operation depends on: the stylesheets and scripts required for each plugin to operate will be retrieved in different HTTP requests on page load, increasing the pool of HTTP requests for the page. The same goes for the font. Additionally, using a custom font without proper frontend optimization can cause a slow page load. 

All things considered, how do too many HTTP requests affect SEO and the user experience of a website?

How Are UX and SEO Affected by Too Many HTTP Requests?

Firstly, it’s beneficial to understand that website speed is a determining factor in the success of any business venture that runs on the internet. Imagine if you had to wait five seconds or more for the homepage of this website to load, what are the chances that you’d come back looking for anything here? That’s the impact of too many HTTP requests on user experience.

Fewer HTTP requests are particularly important because most HTTP requests are render-blocking by default, except async/deferred JavaScript files and images. The page waits for all HTTP requests to be completed before painting the DOM impacting a website’s Core Web Vitals assessment negatively. Although, with enhanced browser capabilities, most of these requests are made in parallel, regardless, the delay increases the Time To Interactive (TTI) of any website.

However, the effects of too many HTTP requests on user experience and SEO are not mutually exclusive. In fact, in 2018, Pingdom reported that the bounce rate of a website can go from 9% to 38% if the page load time increases from 2 seconds to 5 seconds. Although a high bounce rate doesn’t directly affect a website’s search ranking on Google, it infers that a ranking factor is not optimized. An example is page load time (which is a ranking factor).

Image source

With website speed as a facet of this article, it is also important to consider that the majority of website visitors are enabled by their mobile phones. Web pages take 80% longer to load on mobile than on desktop. These statistics buttress the fact that the effect of making fewer HTTP requests spans beyond a memorable user experience, it also increases the quality of the website and consequently, the SEO credibility.

Additionally, the traffic on a website coupled with the number of requests to the hosting server can also slow down the site. This also hurts user experience and SEO.

In aggregate, excellent user experience cannot exist without a fast page load time, regardless of whatever runs on your website. In the same spirit, a slow website cannot excel in Google’s search ranking.

How to Identify HTTP Request Optimization Opportunities

How do you identify your chance to make fewer HTTP requests on WordPress? This is a little tricky because HTTP requests are essential. Because of that, it’s important to note that the size of what is being transferred, not just the number of HTTP requests affects page load time. Simply put, more files mean more HTTP requests, and larger files represent longer HTTP requests. This is why combining all your JavaScript into one file isn’t a silver bullet to solving your page load time problem. However, it is helpful to some extent because we save on establishing connections, DNS resolving, and some other stages.

Also, concerning JavaScript file combination, if a JavaScript file (script A) depends on another one (script B), script A would wait for the completion of the script B request before execution. But, if combined, then no extra waiting.

There are a couple of questions that can prove useful in identifying HTTP request optimization opportunities. However, it’s important to re-establish that HTTP requests are used to fetch resources. The number and size of these resources raise the diagnosis “make fewer HTTP requests”. This means that optimizing HTTP requests on a website is indirectly linked to other website speed factors that you probably know. Given these points, an honest answer to the questions below can identify potential optimization prospects for minimizing the number or time taken for HTTP requests on your website.

• Do I need all the resources fetched on the page load? (Optimizing for number)
• Can I combine some styles or scripts into one? (Optimizing for number)
• Do I need all the JavaScript on the initial page load or I can defer some? (Optimizing for the time taken)
• Do I need all the images on the initial page load or can I lazy load them? (Optimizing for number and time taken)
• How many plugins do I use and how many do I have enabled?
• Do plugins that aren’t necessary for the current page add extra HTTP requests?
• Can I source lightweight alternatives to some of my core plugins?

Action steps to follow will discuss how to make fewer HTTP requests solving all of these questions. But before that, it is important to note that the number of HTTP requests a web page makes multiplied by the number of users accessing that page increases the load on the server. 

How to Fix the “Make Fewer HTTP Requests” Issue on WordPress

In the previous sections, it has been established that the number of HTTP requests performed by a website and how long each request takes hurt the overall performance and quality of the website.

How can you optimize your website to make fewer HTTP requests? Let’s go over the first and obvious solution.

Fix Manually

If you’re looking to make fewer HTTP requests without any plugin like W3 Total Cache, the tips below will save you the hurdle of configuring a plugin for optimization.

Remove unused plugins

Plugins consist of scripts that they operate on. These scripts are fetched from the server on every page load they’re installed on. Technically, having more plugins means more HTTP requests.

The first action step to make fewer HTTP requests on WordPress is to audit your WordPress plugins. After auditing them, you would have an unbiased list of unnecessary plugins that might have been useful in the past but are no longer needed. Removing these unused plugins will eliminate a chunk of HTTP requests that serve no purpose and consequently improve site load time.

Replace heavier plugins with lightweight alternatives

Concerning HTTP requests, a heavyweight plugin takes longer to initialize on a website because of the number of scripts and styles needed for it to function. These scripts and styles are requested over HTTP. Depending on their number and size, they can take a long time to fetch. Undeniably, some of these plugins are needed by websites. A typical example is a social sharing widget on blogs.

Image source

The best solution is to source lightweight alternatives for your current use case. If you conclude that a plugin doesn’t have a suitable lighter alternative for your use case, look out for other optimization opportunities.

Additionally, if you have a heavyweight optimization plugin installed and it adds more load to your server, your best bet is to carefully choose a suitable alternative that levels its performance even if it comes with changes in your workflow.

Prune and optimize your images

Images are visual aids for representation and beautification. They enhance the look of every web page when used appropriately. In other use cases, blogs, for example, some images are used as infographics. By the same token, not all images are necessary.

It is important to examine the purpose of an image and determine if it serves its use case or if other alternatives can suffice. For example, a table can be a better visual aid than an infographic when comparing two products. 

After making the necessary tradeoffs and deleting the necessary images, you will have minimized the HTTP request size on your websites. At this point, you would be left with the important bits. Notwithstanding, you might still notice slow page load times. This is because some of the images might not be optimized.

The best practice for images on webpages is to compress images with tools like TinyPNG before uploading to WordPress. This would ensure that the HTTP request to fetch the image is faster. The other option is to convert images to WebP. 

10Web Booster uses efficient image optimization techniques including WebP conversion, compression, and container-specific image resizing for all images. 

Lazy load multimedia content

On initial page load, the browser attempts to load all page content down to the sections that are not in the visitor’s viewport. This might sound alright if you’re not technical. This means that if you have a bunch of images and essential widgets beyond the viewer’s viewport, the browser will try to load all of them via HTTP before rendering the page. Imagine how slow your website becomes if graphic content is a sine qua non.

In truth, loading images, videos, and iframes take more time, and depending on their sizes, the longer their HTTP request can take.

Lazy loading delays the immediate rendering of page resources until they’re needed. This technique loads the necessary content first (the above-the-fold content), making fewer HTTP requests than it would without lazy loading, hence increasing page load time.

That said, there are different ways to implement lazy loading. WordPress (version 5.5+) uses native lazy loading for images using the HTML loading attribute. Realistically, that is usually not enough. Thanks to 10Web, you can migrate all your lazy loading needs to 10Web Booster.

10Web Booster uses the browser-native technique, lazy loading with vanilla JS, and a JQuery plugin including lazy loading of background images. It intelligently chooses which technique to implement depending on the content and ensures seamless UI rendering and conflicts with themes and plugins.

Combine CSS and JS files

WordPress themes and plugins use stylesheets and JavaScript files. Custom scripts and styles written by developers also contain spaces and indentations for code readability. All of these files are requested as needed on your website. The more CSS stylesheets required by the plugins and themes you have installed the harder it becomes to make fewer HTTP requests in that regard.

Therefore, the solution is to combine stylesheets and JavaScript files into one. That way, the number of HTTP requests required to load any section is reduced and the time taken for the request round-trip also reduces due to the minification of the files.

For this reason, there are WordPress optimization plugins that minify and combine CSS and JS files as part of a host of other features. An example is WP Rocket. However, our recommended plugin is 10Web Booster. Read about why we recommend 10Web Booster here. 

Combine images with CSS sprites

There’s good news and not-so-good news for combining images with CSS sprites.

The good news is there’s a significant decrease in the number of HTTP requests made for the images used on a webpage. CSS sprites allow you to combine images into a single and access them on a webpage with CSS. Technically, there would be only one HTTP request to get the combined images. 

For the not-so-good news, you can’t use CSS sprites for infographics or any informational images, background images, or blog post images. Also, because the images are combined into a single file, you can’t rank them for SEO as is necessary. Additionally, images in the body of a page require an alt-text for accessibility. For these reasons, only icons and logos are suitable for CSS sprites.

If you can leverage the benefits of CSS sprites, try out this CSS sprites generator tool. It combines uploaded images into a CSS sprite image and outputs the required HTML and CSS to access the individual photos on your website.

Load scripts and styles conditionally

Some plugins are only needed on selected pages. A good example is Contact Form 7. But because you have it installed, its scripts and styles may be requested on every page. For that reason, your site can be slow due to unnecessary styles and scripts that are requested for.

The conditional loading of scripts in plugins ensures that the scripts that aren’t needed sitewide are requested only when needed. To do this, ensure the plugins you installed on your website attach scripts and styles only to the necessary web pages. For example, if there’s a form plugin, it loads scripts only in the web pages containing its forms. 

10Web Booster helps to avoid loading unnecessary styles in webpages, by analyzing which style is necessary and removing unused ones for each webpage.

Defer or delay render-blocking JS scripts

Technically, this doesn’t help you make fewer HTTP requests on WordPress. Instead, it helps you optimize how the requested scripts are loaded to improve site speed. It’s safe to classify this tip as a core frontend optimization technique.

Take note that the JS scripts to be deferred or delayed have to be secondary, that is, they are not required for the fundamentals of your website to function. Examples include scripts for ads, pop ups, social widgets, etc, which should be deferred or delayed.

To do this effectively:

1. Identify the render-blocking scripts and measure their performance impact. You can do this with Pagespeed insight.
2. Prioritize the most vital scripts and defer/delay the less vital scripts.

Separating critical JS scripts from non-critical JS scripts prevents blocking of the browser’s main thread by non-critical JS execution.

Third-party JavaScript scripts can be easily handled using 10Web Booster. Assuming that JavaScript files are rendered-blocking resources by default, it deletes all JavaScript resources from the page (with a few exceptions), uses the Web Workers API to download the JavaScript resources in the background, and then integrates them into the page. Simply put, it delays JavaScript loading until it is required, significantly reducing loading time.

Browsers delay the rendering of a page until the CSS files in the <head> section of the page has been parsed and executed. This is a serious bottleneck when you have a large CSS file on which the page depends. The browser will request the CSS file over HTTP – depending on the size, the requests can take longer than appropriate, after which it parses and executes the styles before rendering the page. This process increases the page load time of a web page. Loading critical CSS inline helps to counter this and to reduce the number of HTTP requests.

By loading the styles needed to render the above-the-fold content in the ‘<style> tag in the <head> ‘ section, the browser parses and executes the styles shortly after the HTML has been parsed, ensuring that the page loads faster while the critical styles in external files are loaded inline, and non-criticals are loaded later via external file. 

<!doctype html>
<head>
  <style> /* inlined critical CSS */ </style>
</head>
<body>
  …body content
</body>
</html>

With this approach, there would be significant performance in page load time, even if other HTTP requests are needed to render other sections of the page.

Fix With WordPress Plugin

Once again, bigger and more files result in longer response times from HTTP requests. A WordPress plugin that will help make fewer HTTP requests should be able to reduce the size of the resources transferred and ensure that only the necessary files are requested over HTTP at any given time. Not so many plugins fit this use case, but we have a go-to plugin for it.

10Web Booster

10Web Booster is an automated speed optimization plugin and a component of the 10Web platform. It provides free comprehensive frontend optimization including a CDN to reduce the duration of HTTP requests. They include but are not limited to lazy loading of images, minification and compression of CSS and JS files, image optimization to reduce image size without losing quality, resource caching, and intelligent delay of critical styles and scripts in a non-blocking manner. The optimization techniques used by 10Web Booster do not require manual configuration for optimal performance.

Conclusion

HTTP requests are not bad and are essential to the existence of any website. Where the line is drawn is when the HTTP requests made by your website reduce your website’s quality and user experience. Many websites on the internet thrive to make fewer HTTP requests to optimize load time and maintain an excellent user experience.

Remember that every resource (images, icons, stylesheets, scripts) is a separate HTTP request. The larger they are, the longer the request takes. Also, every plugin installed for your WordPress website makes HTTP requests for the styles and scripts it needs to function. The action steps discussed in this article have been tested to help you make educated decisions when optimizing HTTP requests without hurting any important part of your website.

To sum up, you can have a plugin that lifts the burden of optimizing the accompanying factors that contribute to longer HTTP requests away from you for FREE here. 

FAQ

Do you want to cut down on the number of HTTP requests made by your WordPress site? Great. You’re well on your way to speeding up your WordPress site. Most WordPress sites have slow page load times, and owners often don’t know what steps to take or what to avoid. HTTP requests are one of the factors that affect your site’s speed and load time, and in this article, I’ll show you how to reduce the number of HTTP requests on your WordPress site.

Furthermore, there are numerous ways to test how fast your WordPress site is, so make sure you take all other measures to speed up your website in addition to this guide.

Before we break the code, you should understand what HTTP is and how to view HTTP requests.

This post includes:

• What is HTTP?
• How to View HTTP Requests
• How to Make Fewer HTTP Requests in WordPress
• Create CSS Image Sprite
• Delete Unnecessary Images
• Reduce File Size
• Optimizing External Images
• Delete Unnecessary Files
• Do Lazy Loading
• Use Caching Plugin
• Ignore Irrelevant Assets
• Combine CSS Files
• Conclusion

What is HTTP?

HTTP, or «HyperText Transfer Protocol» is a client-server protocol that allows resources such as HTML documents to be retrieved. HTTP is the foundation of data exchange on the World Wide Web; without it, you cannot view files or other documents on any website. HTTP Requests and HTTP Responses are used to communicate between the client and the server.

When you visit a website, your client browser sends an HTTP request to the server in order to retrieve the text content, image files, CSS, Javascript, videos, and so on. To put it another way, all of the website’s content is retrieved using HTTP.

If you want to learn more about HTTP, we’ve talked about how important HTTP 2 is and why it matters for a WordPress site.

How to View HTTP Requests

The developer tool in your browser can be used to view HTTP requests made by a website. In Google Chrome, for example, you can open the developer tool by pressing CTRL+SHIFT+I, or you can right-click your mouse on any page and select Inspect.

Next, click Network and refresh your page; the developer’s tool will display the screen below. You can now inspect your site’s elements and count the number of HTTP requests on your site.

Awesome! You now understand how to determine the number of HTTP requests on your website. Let’s get started with how you can speed up your WordPress by reducing HTTP requests.

How to Make Fewer HTTP Requests in WordPress

To force WordPress to make fewer HTTP requests, simply use the techniques outlined below:

Create CSS Image Sprite

An Image Sprite is a group of images combined into a single image. Because multiple images take longer to load and generate more requests, a single image saves time and bandwidth.

Here in this example that we tested on w3schools.com: you have three different icons for Home, Next & Back. But they’re combined into a single image.

We used a single image URL three times for three different IDs (home, next, back), and in each, it previews a different image icon. Why? By adding its position in “px” in the style sheet, we can preview any specific position of the image, which helps reduce the number of HTTP requests on your WordPress site, and the page loads faster.

Delete Unnecessary Images

We all have images in our media files that we no longer require. Removing all unused and unnecessary images from the media library also helps to reduce requests.

Reduce File Size

You can also increase the speed and number of requests to your site server by reducing the size of your images. Always optimize your WordPress site image sizes before uploading them, as this improves the site’s speed.

Optimizing External Images

External images are a major factor in the number of HTTP requests and site speed. These can be images added by users in the comments section or their profile pictures. External images such as Gravatars are a good example of external images that increase the number of HTTP requests and can slow down page load time. To avoid this, use a comment section plugin, such as Disqus, that assists you in dealing with unnecessary HTTP requests.

Delete Unnecessary Files

It is not enough to delete unnecessary images in WordPress to reduce HTTP requests. Sometimes plugins or data files that are running in the background aren’t being used to generate HTTP requests. To make fewer HTTP requests on your WordPress site, simply uninstall or delete those plugins or data files.

Do Lazy Loading

You can also make fewer HTTP requests by using a WordPress plugin like Lazy Loading, which loads only the images that are visible on the screen. The remaining images are only loaded when the user scrolls down and brings the rest of the page into view. Here’s how to enable lazy loading on your WordPress site.

Use Caching Plugin

One of the most sure-fire ways to reduce the number of HTTP requests is to use a caching plugin. A web browser creates and maintains a cache of all data files from your WordPress site on the client side. Once saved, your website will automatically load the page without requiring HTTP requests. Here are the best WordPress caching plugins for fast loading speed.

Ignore Irrelevant Assets

Ignoring irrelevant assets, like lazy loading, means we only load the files, plugins, or other assets (.CSS and .JS files) that the visitor is viewing. There are numerous plugins available that will scan your page and detect all loaded assets. The Asset Cleanup plugin is an excellent choice for this process, as it delays requests for other plugins, files, or other data assets that are not being used on the visitor’s viewable page.

Combine CSS Files

WordPress usually has multiple CSS files because developers prefer to work in separate files. However, as a result, it generates a large number of HTTP requests. However, there is a simple solution to this problem: merge all CSS files into a single CSS file. Once all of the files have been merged, your site will generate a single HTTP request for the CSS file.

Images enhance the visual appeal of a website. However, using too many images can cause your website to load slowly. Simply limit the number of images you use in a single blog post to avoid this. To maintain a balance between visual appeal and not overburdening your website, use 11 to 15 images.

Conclusion

Hopefully, the techniques mentioned above will significantly reduce the number of HTTP requests on your WordPress site. This article has covered what HTTP is, how to check the number of HTTP requests on your WordPress site, and 10 ways to reduce HTTP requests.