In today's world, websites that are fast lead to higher visitor engagement, retention, and conversions. There are lots of factors that contribute to website speed; one of such is the number of HTTP Request.

In this tutorial, I'll explain what HTTP Requests are, how to determine the number of HTTP requests, the effects they have on WordPress performance, how plugins and themes are not helping matters, and solutions to the problem.

What Is an HTTP Request?

When a web browser is rendering a webpage, it sends a request to the web server via HTTP for static resources or components (such as images, CSS, and JavaScript), and the server responds and sends the files to the browser. Thus, a request sent by the browser to the server using HTTP is referred to as an HTTP request.

Analysis of an HTTP Request

To better understand the meaning of an HTTP request, take a look at the HTML code of a simple web-page:

From the image above, you could see that there are a total of four HTTP requests.

The Effect of HTTP Requests on WordPress

According to Yahoo's performance rule:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

From the excerpt above, we are right to deduce that, the fewer the number of HTTP requests, the faster the website; therefore, a WordPress powered site with a lot images and externally referenced CSS and JavaScript files tend to be slow.

Counting the Number of HTTP Requests

Using Firefox's Firebug extension, and Inspect Element tool for Google Chrome and Opera, you can effortlessly determine the number of HTTP requests of a webpage.

Let's see how to check the number of HTTP requests of our WordPress blog.

Using Firefox

Ensure you have Firebug extension installed.

• Load your WordPress blog and press the F12 key to open the Firebug console.
• Navigate to the Net Panel. if it is disabled, simply enable it.
• Refresh your WordPress site so the Net Panel will capture and record the HTTP requests.
• You should see the number of HTTP requests shown at the bottom.
  

  

Using Chrome and Opera

Unlike Firefox, you don't need an extension in Chrome and Opera to check HTTP request rather the in-built Inspect Element tool is used.

The steps below are valid for both Chrome and Opera.

• Load your WordPress blog.
• Right-click and select the select Inspect Element.
• Navigate to the Network Panel and refresh your WordPress site.
• You should see the number of HTTP Request shown at the bottom.
  

  

Do you know that installing most WordPress plugins, increases the number of webpage components thus increasing the number of HTTP requests?

How Plugins & Themes Increases HTTP Requests

A lot of plugins we install increases the number of HTTP requests un-knowingly to us.

Most plugins rely on their custom images, CSS, and JavaScript file for them to function. They do so by adding a link that references these components to WordPress which, in turn, increase the number of HTTP Request.

As a case sturdy, we'll use the WP Subscriber Form in order to fully understand how plugins increase HTTP Request.

Activating the plugin will add a newsletter subscription form at the end of the post content and also include a link to its external stylesheet to WordPress.

Viewing the page source of your WordPress site after the plugin activation will reveal the addition of a new CSS component as shown below, which means an increase in HTTP requests.

<link rel="stylesheet" type="text/css" href="http://example.dev/wp-content/plugins/wp-subscriber-form/subscriber-form.css" />

Like plugins, WordPress themes contain lots of CSS and JavaScript components. A typical theme consist of embedded fonts, CSS, and JavaScript components which lead to increase in the number of request.

Relationship Between Minification and HTTP Request

The size of each individual website component also has an effect on WordPress performance. the smaller the size, the faster the HTTP request to the component get completed because the browser spend less time downloading it as a result of it small size.
The size of CSS and JavaScript component can be reduced by minification (removing all unnecessary characters and whitespace from source code).

How to Reduce HTTP Requests in WordPress

To reduce the number of HTTP requests, we need to reduce the number of images, CSS and JavaScript files on WordPress.

I know the idea of reducing the number of images on your blog might not go down well with some of us, but you should try as much as possible to remove any images that aren't critical to the layout of our site.

WordPress themes uses background-images in their CSS to enhance its beauty. You could reduce the number of the images by turning them into sprites. See this A List Apart's article and Tuts+ Screencast to grasp how CSS sprites works.

The performance of WordPress can significantly be improved when themes' CSS and JavaScript are respectively combined and minified.

There are a couple of WordPress plugins such as WP Minify and Better WordPress Minify (I have used and will recommend these plugins) that respectively combines JavaScript and CSS into a single file thus reducing the number of HTTP Request.

If you're using W3 Total Cache plugin, you do not need to install the above plugins because it has an option to minify and combine CSS and JavaScript.

As a developer, I edit plugins that add extra components to my WordPress blog, cutting the CSS and JavaScript added by the plugins and pasting them to my theme's CSS and JavaScript file so they are unified.

Conclusion

The importance of website speed cannot be over-emphasized. A website that is slow drives away visitors.

There are lots of best practices for speeding up website and one of which is reducing the number of HTTP requests which we learnt in this article.