How To Make Fewer HTTP Requests In WordPress & GTmetrix YSlow

Home » WordPress Speed Tips & Tricks » How To Make Fewer HTTP Requests In WordPress & GTmetrix YSlow

Need to make fewer HTTP requests on your WordPress site?

This just means you need to reduce how many elements (requests) load on your site.

Make Fewer HTTP Requests

Combining CSS and JavaScript files can help, but there are other optimizations that can reduce HTTP requests, like selectively disabling plugins that don’t need to be loaded on specific pages, disabling WooCommerce scripts and styles on non-eCommerce pages, or avoiding high CPU plugins that generate high number of requests and slow down your site.

Making fewer HTTP requests is a recommendation in GTmetrix, Pingdom, and other speed testing tools. The recommendations below will help reduce requests and make your site faster.

 

1. Combine CSS Stylesheets + JavaScript

Combining CSS Stylesheets + JavaScript means you need to copy/paste everything in your CSS files into 1 single file. This allows browsers to make 1 single request for a CSS file instead of multiple requests. Most cache plugins have an option to combine your CSS + JavaScript files.

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 and test results in GTmetrix.

Minify Combine CSS Files

Minify Combine JavaScript Files

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.

WordPress CSS Files

 

2. Selectively Disable Plugins

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

Contact forms, social sharing, rich snippet, slider, and some other plugins only need to be loaded on certain content types. You can disable them everywhere else using Asset CleanUp.

By disabling plugins on pages where they don’t need to be loaded, this results in fewer HTTP requests. This isn’t limited to plugins; scripts and styles can also be disabled on certain pages (eg. WooCommerce scripts, styles, cart fragments can be disabled on non-eCommerce pages).

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.

Disable WordPress 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.

 

3. 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 in the previously step, you can also selectively disable WooCommerce requests loading across your entire site.

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

Asset CleanUp WooCommerce

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

perfmatters woocommerce optimization

 

4. Avoid High CPU Plugins

High CPU plugins can generate a ton of HTTP requests.

These are usually social sharing, statistic (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.

Slow-WordPress-Plugin

Step 2: Avoid known high CPU plugins.

  1. AddThis
  2. AdSense Click Fraud Monitoring
  3. All-In-One Event Calendar
  4. Backup Buddy
  5. Beaver Builder
  6. Better WordPress Google XML Sitemaps
  7. Broken Link checker (use Dr. Link Check)
  8. Constant Contact for WordPress
  9. Contact Form 7
  10. View All 65 Slow Plugins

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

 

5. 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.

 

6. Eliminate External Scripts

External scripts are anything that pull requests from outside websites.

Google Fonts can be combined into 1 file. Videos can be lazy loaded and the iframe replace with a preview image. Many scripts can be optimized, others can’t. Below are some examples.

  • Google Fonts: combine fonts and host them locally using plugins like WP Rocket, Autoptimize, OMGF, Self-Hosted Google Fonts, and Asset CleanUp.
  • Google Analytics: host tracking code locally in WP Rocket / CAOS Analytics.
  • Google AdSense: load asynchronously and try Cloudflare Rocket Loader.
  • Google Maps: take a sceenshot of the Google Map and include a link to driving directions when people click on the image (this looks just as good as a Map)!
  • Google Tag Manager: usually does more harm than good when trying to combine multiple scripts. Should only be used for large, unoptimized sites.
  • Embedded Videos: use WP Rocket or WP YouTube Lyte to lazy load videos and replace the iframe with a preview image (videos are a very heavy element).
  • Embedded Widgets + Posts: take screenshots instead of embedding them.
  • Facebook Pixel: WP Rocket can add browser caching to Facebook Pixel.
  • Gravatars: nothing worked for me besides disabling Gravatars (WP Rocket doesn’t use them on their blog either). But, you can try Harrys, FV, or the Optimum Gravatar Cache, or try breaking or hiding expandable comments.
  • Social Sharing Plugins: infamously generate requests from Facebook, Twitter, and social networks to refresh like counts. Try a faster plugin like Social Pug, Mashsharer, Social SnapAddToAny, WP Social Sharing, or Easy Social Share

 

7. Combine Google Fonts

Google Fonts can be combined to generate 1 request instead of multiple requests.

Google-Fonts-GTmetrix

The following plugins have options for optimizing Google Fonts:

  • WP Rocket
  • Asset CleanUp
  • Autoptimize
  • OMGF

The best method however, is to host Google Fonts locally. This involves downloading your fonts directly from the Google Fonts website while being minimal with the number of fonts and font weights. Next, use a tool like Transfonter or convert the fonts to web font files. You will then upload the new web font files to your wp-content/uploads folder, add the custom font to CSS, and test the font to make sure it’s working. Again, see that link for a full tutorial.

Transfonter-Google-Font-Conversion

 

7. 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.

 

8. 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.

Optimize CSS Delivery

 

9. Defer/Load Combined 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.

JavaScript Files

 

10. Lazy Load Videos

Embedded videos are an external resources that generate HTTP requests.

They can take 2+ seconds to load! While you can’t completely eliminate these, you can delay the loading of videos until users scroll down (lazy load) and click the play button (light embed).

You have a couple options here: you can use WP Rocket to enable lazy loading and replace the YouTube iframe with the preview image. But if you don’t have WP Rocket, you can either try the WP YouTube Lyte plugin or follow this tutorial on light YouTube embeds. Both work well.

Here’s an example (and a great video on WordPress Speed):

 

11. Add 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.

Multiple CDNs = more data centers = faster content delivery and more offloading of resources. Many people start with Cloudflare then eventually look into StackPath when using multiple CDNs (I currently use both). KeyCDN is also good. This is called a “chain” of CDNs.

Setting Up Multiple CDNs
With Cloudflare, they assign you 2 namesevers which you change in your domain register. With other CDNs like StackPath and KeyCDN, they assign you a CDN URL which you will paste into the CDN URL field in your cache plugin (most of them have it) or use CDN Enabler.

Multiple CDNs

 

12. 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?

Minimize Redirect Errors

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

 

13. Optimize Images

To reduce HTTP requests caused by images, there are 3 primary ways to optimize images:

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 ShortPixel (recommended), 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 website, 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 errros 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 width + height.

 

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.

WordPress Speed Up Facebook Group

 

Frequently Asked Questions

🚀 What causes HTTP requests?

HTTP requests are anything that create a request to the server (for example, a single image creates 1 request). GTmetrix's Waterfall tab tells you all requests loading on a page.

🚀 What are 5 things you can to reduce HTTP requests?

5 easy things you can do are combine CSS + JavaScript files, lazy load images and videos, avoid our list of high CPU plugins, selectively disable plugins from certain pages/posts with Perfmatters or Asset CleanUp, and optimize your fonts.

🚀 Will a cache plugin help reduce HTTP requests?

Yes, a good cache plugin should help minify and combine files, as well as reduce HTTP requests when configured correctly. I have tutorials for nearly every cache plugin.

🚀 Will fixing other GTmetrix items reduce HTTP requests?

Yes, in many cases it will especially minifying and combining files, eliminating redirect errors, and using a CDN can also help.

🚀 Which cache plugin reduces HTTP requests the most, and how to configure it?

I recommend WP Rocket which was rated #1 in most Facebook polls and has more speed optimization features than most cache plugins, which is why it usually yields better scores and load times in GTmetrix. Check out my tutorial on configuring the WP Rocket settings.

Thanks for reading :)

Cheers,
Tom

View More Tutorials

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments