This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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?
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
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.
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.
Ensure you have Firebug extension installed.
- Load your WordPress blog and press the
F12key 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
- Navigate to the
Network Paneland 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.
As a case sturdy, we'll use the WP Subscriber Form in order to fully understand how plugins increase
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.
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" />
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.
How to Reduce HTTP Requests in 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 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.
When not wrangling with code, he is fond of sleeping on the couch and writing on his personal web development blog.
Follow him on Twitter @w3guy.