How to Speed Up Pages by Reducing HTTP Requests

Every second counts when we talk website speed. Just a second too long and you could have extremely high bounce rates from visitors thinking your site is broken or too slow. Having a fast server connection, high-end servers, and dedicated resources aren’t enough. The right kind of code matters just as much as the computers hosting the site. One way to speed up a site is by reducing HTTP requests, but how do you do it? Here are some ways to limit the number of times users must make requests from your server, which will lower the page-load times for your site.

What are HTTP Requests?

Each time a user types your URL into their browser, the site server sends files after the browser makes the request. To the user, it seems like only one request is made because they just type the URL in their browsers and a page pops up. However, on the backend several requests are made depending on the number of files that must be downloaded.

It’s not uncommon for a website to have a dozen include files in the header section of an HTML page. Every JSS and CSS file creates a request. Any images or external references create a request. You can test it yourself. Create a small HTML page with no includes, and then create one with all of the files and images added to your regular pages. Test the load times using tools such as Pingdom and you’ll see a change in speed.

Curious about the number of HTTP requests on your pages? Go to Developer Tools in Chrome and click the Network tab. At the very bottom of the list of events, it shows you the total number of requests.

HTTP requests on home page

Reducing the Number of Requests

Now that you have the number of requests, you can take steps to reduce them. Here are a few ways that you can lower that number.

  1. Use CSS instead of images

In the 1990s, most aesthetic components of a site were done with images. That habit has lingered on for some developers, but it’s a habit that should be broken. CSS can do most of your aesthetics even shadowing, which was previously done with images. Images should be replaced with CSS coding where possible.

  1. Combine CSS files

Using separate CSS files keeps your code organized but each of these files is a request. You probably don’t want to combine all of your files, but condense smaller files into one to reduce requests.

  1. Make JS asynchronous

While this suggestion doesn’t limit HTTP requests, it does change the way your site loads pages. When JavaScript is synchronous, the browser stops loading other content until the current downloaded file is completed. With JS loading asynchronously, the browser can move on to the next component while JS code is loading.

  1. Reduce the number of plugins in WordPress

Developers and site owners love to check out the latest plugin. This is a great way to find out which one works best for you, but every plugin you install must load when users open your site. Most plugins have their own CSS and JS files included, and these files increase your HTTP requests.

  1. Use a canonical instead of redirects

Whether you have duplicate content or want to index HTTPS pages instead of HTTP, you have two options: redirects or canonicals. A canonical is a meta tag placed in your content. A redirect forces a new request from the server. Since the goal is to reduce HTTP requests, the better option is to place canonicals on your pages.

Each of these small tweaks can add up to large performance changes. Don’t forget that adding a CDN to your site also improves performance. Instead of relying on one local server, you can harness the power of data centers across the globe. It can especially help with WordPress sites when you’re unsure how to speed up performance and don’t know how to make technical changes to your code.

Get the latest in Web Performance
Subscribe now to receive the latest news, tips and tricks in web performance!
The information you provide will be used in accordance with the terms of our privacy policy

No comments

Be the first to post a comment.

Post a comment