How To Make Fewer HTTP Requests In WordPress From CSS, JS, Fonts, Images

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.

5. Use A Lightweight Social Sharing Plugin

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

How do you make fewer HTTP requests in WordPress?

Combine CSS, JavaScript, and font files. Lazy loading images and videos will also make fewer HTTP requests, as well as being minimal with font types, weights, and font icons. Optimizing or removing third party scripts like Google Analytics and Facebook Pixel helps.

How to combine CSS and JavaScript files?

Most cache plugins have an option to combine CSS and JavaScript files. To combine CSS files manually, combine CSS files in your theme editor into 1 file, to create 1 single request.

How do you optimize third party requests?

WP Rocket can optimize Google Fonts, Google Analytics, Facebook Pixel, and embedded YouTube videos while also giving you options to preload and prefetch them. The Flying Scripts plugin can create timeouts for third party requests (like Gravatars and comments) to bring them to 100% in GTmetrix. Google AdSense and Tag Manager are more difficult.

Does lazy loading reduce HTTP requests?

Yes, lazy loading images can completely eliminate all requests for most images. Lazy loading videos and replacing the YouTube iframe with a preview image (in WP Rocket or Elementor) prevents your site from having to make a third party request.

Thanks for reading :)

Cheers,
Tom