Skip to content

Warning: Undefined array key 0 in /home/staging-yoast/staging-platform.yoast.com/versions/a4c25e841414f0e83231dded987decb991c04b7e/web/app/themes/yoast-com/single-post.php on line 46

How to reduce HTTP requests to speed up your WordPress site

4 November 2016 | 24 Comments | Tags ,

Having a website, online shop or blog that’s fast is a must nowadays. A fast website doesn’t only give your visitors a much better experience, but it also helps your website to rank. Sending fewer HTTP requests to the server can improve the loading times of your website. But why is that?

What are HTTP requests?

HTTP requests are requests that get sent to the server whenever someone visits your website. These requests can contain a variety of information for the server to process and act upon. The most important part of such a request is the URL. Based on this information, the server will try to return a valid response, such as a file. The first stable implementation of HTTP, HTTP/1.0, does these requests in series. This means that a group of requests needs to be finished before the next group is sent. Obviously, this means that pages with a lot of external files will suffer from longer loading times, making your website slow.

Speeding up initial loading times

As described in the previous section, loading a lot of files one after another will result in longer loading times. Now you might be wondering “How do I speed this process up?”. Luckily, there are a few techniques and advancements in browser technology that can help you with this.

Browser pipelining

Since the introduction of HTTP/1.1, it has been possible to use a feature called “browser pipelining”. This feature allows the browser to fetch multiple files in rapid succession, without waiting for a previous request to finish. This means that the browser doesn’t have to wait as long to send off the next request.

In theory, this would be a very handy feature to have enabled by default. Sadly, in practice, this system still has some flaws. Due to its asynchronous nature, it’s possible that files load in the wrong order.

Let’s take a custom jQuery plugin as an example of how browser pipelining could do more harm than good. As your custom plugin depends on jQuery, the jQuery library needs to be fully loaded before your plugin can properly run. You might already see where this could go wrong; because browser pipelining doesn’t wait for previous requests, your plugin could load before jQuery. The result? JavaScript errors.

This problem with load order can also easily occur with something like images. In the case of images, it’s possible that the order in which the images get displayed differs from the actual order in your HTML.

HOL blocking

Another phenomenon that sometimes occurs when using browser pipelining is Head-of-line blocking (HOL blocking). What this means is that a particular packet (a part of a file) is keeping another packet of the same file from successfully completing. Other packets can only continue on their way once the delivery of the first package to the browser ends.

Due to the issues mentioned, most browsers disable HTTP pipelining by default. In the latest version of HTTP, aptly named HTTP/2, the issues with pipelining are addressed by using a technique called multiplexing which sends multiple HTTP requests over a single TCP connection. If you want to use this technique, make sure your server and your audience’s browsers, properly support HTTP/2.

Move JavaScript files out of the head section

There’s another way to make your website to load faster without much extra hassle. But first a brief history lesson!

Placing all the required CSS and JavaScript in your <head> section used to be considered common practice. However, the problem with this technique is that the rest of your HTML won’t display because these files block its rendering. This results in your visitors looking at a blank page for a couple of seconds.

As early as 2007, a new best practice surfaced. This best practice recommends moving all the JavaScript from your <head> section to the bottom of your page, just before the </body> tag. Why? Because JavaScript blocks any further rendering of a page until it has loaded all its files. By moving the JavaScript, the page’s HTML renders first instead of last. Sometimes it’s possible that you want the rendering of the page to wait until a particular JavaScript file loads. This would be the only exception when it comes to moving files out of the <head> section of your HTML.

Moving CSS to the bottom of the page is not recommended, as it stops the browser from correctly displaying and formatting your content. This impacts the overall user experience. Nobody wants to visit a website where text jumps around the screen because a stylesheet doesn’t load until the very end. Although moving your JavaScript to the bottom of your page doesn’t reduce the number of HTTP requests, it does help improve the overall experience.

Reduce the number of files

Another option to speed up your website is by limiting the number of files that load. This is because for every file you try to load, your browser sends a separate HTTP request to the server. Fewer files mean fewer requests and therefore a faster website.

Most commonly, JavaScript, CSS, and images are the main culprits when it comes to slow loading pages. To combat this, you can use a few techniques, namely:

Minifying and concatenating your JavaScript and CSS files.

By minifying and concatenating assets such as CSS and JavaScript, you not only reduce the overall file size, but you also minimize the number of files that need to load. A good rule-of-thumb is to group files based on their respective functions; if you have multiple files that do something with image manipulation, it might be a good idea to concatenate those.

Additionally, by limiting the number of CSS files that load initially, you reduce the overall loading time. In that case, minification and concatenation can help as well. After the initial loading of CSS files, your browser caches it so subsequent requests shouldn’t take up as much time. You can imagine that having a single file with all the relevant CSS, plus the caching, can significantly improve the overall experience.

If you have CSS that is very specific for a particular page, you’re better off loading that file separately. As a result, you won’t unnecessarily ship specific CSS rules that aren’t used elsewhere in your HTML.

There are plenty of online tools to help you with minification and concatenation during development. You can also use a plugin, such as WP Rocket, to help you out with this.

Optimizing images

Some themes are heavily dependent on pictures. Because images are also separate files themselves, they too fall victim to the limitations of HTTP. To get around this, it is possible to make use of a technique called CSS spriting. This technique allows you to take multiple images (usually of a similar size) and reduce them into a single image. Then with some smart CSS techniques, you manipulate the sprite and only display a specific part of it. There are a couple of online tools that can help with this. It’s unnecessary to create sprites for _all_ your images, but it’s worth putting in the extra effort for things like backgrounds and social media icons.

Lazy loading

Another way to ensure images won’t make your pages slow is using a “lazy loading” plugin. Lazy loading is a technique where some JavaScript looks at the current viewport of the visitor and only loads images that are (almost) within view. A good plugin for this is the Lazy Load plugin which delays loading of images until the user starts scrolling down the page.

Bonus tip: use a CDN

Finally, here’s an extra tip. Content Delivery Networks, or CDNs, are a network of optimized servers across the globe that guarantee fast delivery of static content such as images, CSS and JavaScript. The main advantage of using a CDN is that you’re retrieving content from a separate server. This overcomes one of the HTTP restrictions which limits sending a large number of requests to a single server in one go. By overcoming this restriction, you can achieve shorter loading times! Another advantage of these CDN’s is that the data comes from a server closest to your visitor’s physical location. Shorter distances to the server means faster data retrieval. It’s possible to use more than one CDN, which means your browser can deal with even more HTTP requests at the same time.

Here at Yoast, we use MaxCDN (affiliate link), but with the rising popularity of CDN’s, there are plenty others to choose from. Once you’ve found a CDN provider of your liking, using a caching plugin like WP Rocket can help you to configure your CDN for your website.

Conclusion: Reduce those HTTP requests

As you can see, plenty of techniques are available to decrease the loading time of your website. By far, the biggest improvement you can make is reducing the amount of HTTP requests you send to the server. Additionally, making the files smaller through minification can also help speed things up.

So, go forth and optimize your CSS and JavaScript! Lower those HTTP requests! Your visitors and servers will thank you for it.

Read more: Site speed: tools and suggestions »

Jimmy Comack

Jimmy Comack is Developer Relations Advocate at Yoast by day, gamer and film addict by night. He's a big proponent of open source software and tries to contribute to the OS community when possible.

Coming up next!

24 Responses to How to reduce HTTP requests to speed up your WordPress site