parallax background

How to Make Fewer HTTP Requests on Your WordPress Site

How to Disable Comments in WordPress: A Quick Guide
August 5, 2019
The Best Chrome Themes You Can Try for a Better Experience
August 7, 2019
 

Each time you access a website there are a lot of processes happening behind the curtain. Though it seems like everything occurs in one fell swoop, your browser must request, receive, and process multiple files from a server before the website fully loads.

These requests can slow down your website, leading to poor user experience, a huge bounce rate, and bad SEO scores. To avoid these pitfalls and keep your visitors happy, you need to figure out how to make fewer HTTP requests.

This short article will teach you how to reduce the number of HTTP requests that your website sends. Here you’ll learn more about what HTTP server requests are, how they can be tracked, and how you can reduce them.

HTTP Server Requests —What Are They?

Starting with the very basics, HTTP server requests are those actions that take place whenever a person visits a page on a website. The user’s browser pings the web server and asks for the files that contain all the content listed on that website page they are trying to access.

These files can be of various types; they can be HTML, CSS, or JavaScript files, or they can be simple images or icons. Regardless of the type of file requested, this action of demanding files from the server is called an HTTP server request.

HTTP is short for Hypertext Transfer Protocol, which is the protocol used by both browsers and servers to facilitate the requesting and receiving of files. All websites make use of HTTP and WordPress sites are no exception.

The fewer elements your website includes, the fewer HTTP requests are sent for rendering a web page. As a result, your site will become faster and more responsive. In order to make fewer HTTP requests on your site, you need to follow the steps listed in this article.

Let’s take a look at how to see what requests are being made in the first place.

Tracking Your HTTP Server Requests

If you don’t know how many HTTP server requests your site sends, you can use one of the following tools that will tell you all you need to know:

Google Chrome Developer Tools

open-from-main
 

Google’s Developer Tools will give you an in-depth look at various elements on your website and show you how well the files are performing on it. You will just have to use the Google Chrome browser and navigate to the settings tab.

You’ll find Developer Tools there and then you can start analyzing the HTTP requests that your site makes with the Developer Tools panel.

Firefox users can access the same type of developer panel by clicking the hamburger menu > Web Developer and then clicking the Network tab. Now simply refresh your website to see all the requests.

Google PageSpeed Insights

pagespeed_insignt
 

Google PageSpeed Insights is one of the most popular tools for monitoring your web page performance. On top of that, it’s completely free.

You’ll get a full review of your website’s performance with a rating from 0 to 100. Google PageSpeed Insights creates intricate reports on the page load time using different criteria and it will help you find HTTP requests that are slowing down your website.

GTmetrix

gt_metrix
 

Another page assessment tool that is highly appreciated by those who want to find out more about their HTTP requests, GTmetrixalso gives you a performance score following a set of criteria.

In addition, this tool will tell you more about what makes your site slow and what actions you can take to correct these problems.

Pingdom

pingdom
 

Pingdom is very similar to GTmetrix in terms of what reports it generates with a score assignment and more. Pingdom seems to deliver results a bit quicker than GTmetrix does, and you can also run tests based on location.

Just as in the previous case, you’ll receive info about the aspects that can be improved, and you will be shown a complete list of your site’s HTTP requests.

6 Ways to Make Fewer HTTP Requests on Your WordPress Site

Moving on to the actual measures that you can take to reduce the number of HTTP server requests on your site, here are 6 proven methods:

Deleting Images

 

Too many images will immediately make your site load a lot slower. You don’t have to get rid of all the images on your website entirely, but you shouldn’t abuse them either. The fewer images you put on your website, the fewer HTTP requests it will send to the server.

As mentioned, reducing the number of HTTP requests will lead to a visible improvement in terms of load time and responsiveness, and fewer image requests will boost performance even more so.

Besides the fact that it is not recommended from an aesthetic point of view to clutter a website with images, it will also affect it on a technical level. If your website’s specifics simply involve using a lot of images, you can try using a “lazy loading” plugin.

These plugins delays loading the images (requesting the file) until the user gets to that image so that the page loads faster.

Combining HTML, CSS, and JavaScript Files

fast
 

Just as in the case of images, separate HTML, CSS, and JavaScript files will generate more HTTP requests. To make fewer HTTP requests, your website needs to contain combined, minified files.

Limiting the number of files by combing them is the recommended option. For example, if you have several CSS stylesheet files, they can all be combined into one file so that your styles load in one single request. These can also be cached for an even greater increase in page speed.

File minification refers to removing characters that are unnecessary from a file —comments, formatting, white space, empty lines. This won’t affect the number of requests, but it does help with performance.

Again, there are several plugins like Fast Velocity Minify that can help you do this automatically, and any decent caching plugin should include an option to combine and/or minify files.

Less External Resources

Adobe-Edge-Web-Fonts-start-page
 

If the HTTP requests are coming from outside of your website, you need to reduce the external resources on your site. Some examples are:

  • Using custom fonts – these always produce extra requests
  • External images – these normally appear in the comment section (WordPress uses Gravatar, which also produces more HTTP requests)
  • Social media buttons – these represent an important marketing tool but too many of them can lead to a lot of HTTP requests that slow the website down tremendously
  • Embedded videos – one or two embedded videos are the limit for keeping a website speedy

Moving JavaScript Files to the Bottom

 

If your JavaScript files are located close to the top of your website code, move them as far as possible to the bottom. This method doesn’t involve much hassle because you’ll only copy and paste some code.

In the past, developers placed CSS and JavaScript code in the < head > section, but it has been proved that this technique blocks website rendering, leading to a white page that lasts for a few seconds before the website actually loads.

Using CSS Sprites

 

Image sprites are collections of images that act just as one item. Logically, because it acts as one item, it only sends one request. This is a smart hack that you should be using if you want your website to make fewer HTTP requests.

Manage Render-Blocking CSS/JavaScript

 

Make JavaScript asynchronous with the async and defer attributes and ensure that your above-the-fold CSS is inlined. Otherwise, they will generate more requests all at once as the page loads.

The page assets are loaded from top to bottom, so keep that in mind when putting your website together. Your website won’t load quickly unless the CSS and JavaScript are carefully placed in the right order.

Ending thoughts on making fewer HTTP requests

After figuring out how many HTTP requests your website sends, it’s best to try all the techniques covered here to enable your site to make fewer HTTP requests while keeping it functioning normally.

Nobody likes a slow website, so don’t hesitate to take action and eliminate extraneous requests wherever you find them by following the tips in this article.

If you enjoyed reading this article about to make fewer HTTP requests, you should read these as well:

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 157,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.