Get Our Latest Posts Sent Directly to Your Email Inbox!

How to Reduce Your HTTP Requests – Increase Your Site Speed | Rule 1 of 7

Please Share:

Level of Difficulty – [Easy]

HTTP (Hyper Text Transfer Protocol), is the method to which browsers and servers communicate with each other over the Internet.

When a web page loads, it makes many HTTP Requests.

These requests will usually consist of: images, stylesheets (CSS), scripts, videos, etc. Each image, stylesheet and script file will make a separate request to a server for the information.

Reducing HTTP Requests Can Dramatically Improve Your Site’s Speed.

Reduce HTTP Requests - Increase Site Speed

How Making Fewer HTTP Requests Will Speed Up Your Site

The purpose of this article is to bring to light how reducing HTTP requests can be done without compromising the ‘pages’ design.

In my previous article ‘The 7 Rules for Explosively FAST Web Sites‘, I spoke of the ‘Performance Golden Rule‘ which revealed that only 10 to 20% of the end user’s response time involved retrieving the requested HTML document.

The remaining percentage of time is spent making the additional HTTP requests to load all the components to include: images, stylesheets and scripts.

Each one of these additional requests to the server makes the page’s design and functionality, as you see it in your browser.

SPEED TIP: For the business owner using WordPress for their website; deactivate each and every plugin and widget that is not absolutely crucial for your business… following this 1 simple rule will improve your site’s speed.

You may not have thought of it, or known about it, but the more plugins and widgets you add to your WordPress site, to create the dynamic look and feel, the greater delay you will see for your loading times.

How Rules 2 and 5 Reduce HTTP Requests

Adding an Expires Header – Mod_Expires (Rule #2)

Browsers use cache (also referred to as temporary Internet files) to reduce the number of HTTP requests and decrease the size of the HTTP responses making web pages load faster.

A web server will use the Expires Header to tell the web client that it can use the current cached copy of certain components (HTML, stylesheets, scripts and some images) until a specified period of time passes.

This will dramatically reduce the time your page takes to load, because it doesn’t need to load the images, scripts and stylesheets all over again… I.E. – fewer HTTP requests.

NOTE: If the browser cache is empty it will load the components once again.

For More information, Check out OUR Blog Article for Rule #2How to Apply Expires Headers to WordPress to Optimize Cache-Control

– – – –

Combining Scripts and Stylesheets (Rule #5)

Combining external JavaScripts into 1 file and external CSS stylesheets into 1 file reduces the number of HTTP requests and improves overall response times.

This one is a no-brainer… if you have 10 CSS stylesheets and 12 JavaScript files, combining them into one file each can eliminate the HTTP requests, reducing the chances of bottlenecks, which usually delay loading times.

What do I mean by reducing the chances of bottlenecks?

If out of those 10 CSS stylesheets and 12 JavaScript files (I’ve seen more), 3 of the stylesheets and 4 of the JavaScripts are requested from another server somewhere around the world, what are the chances of possible delays from a server?

There is a method to my madness… if you were to create 1 CSS stylesheet and 1 JavaScript file, and it was stored on the same server where your site is hosted, the chances of delays are minimal to non-existant.

Why you ask? Well… some servers enable Keep-Alive, which means that when your browser requests information from your host server, the connection will remain open until all the documents are finished loading.

Meaning, if you have 2 files to load from your own hosted server, your HTTP requests for your 1 JavaScript file and 1 CSS file won’t have to travel around the world to retrieve this information. And, your HTTP request to a server won’t have to wait in a line behind others to receive the requested information.

For More Information Check Out OUR Blog Article for Rule #5 – Step by Step – How to Combine CSS Stylesheets Into 1 File in WordPress | – Part 1 of 2

– – – –

Test Your Site for HTTP Requests

A couple of methods to find out how many HTTP requests are being called…

To visually see how many CSS stylesheets and how many JavaScript files are being requested, ultimately bogging your site down, click on any page on your site, right click with your mouse and ‘View Source’ or whatever your browser refers to as viewing the source code.

Hit ‘Ctrl’ + ‘F’ on your keyboard while viewing the source code… this will bring up a “Find” box… type the word ‘stylesheet’ in the box, click on the down arrow or “Highlight All” to view how many stylesheets are being requested.

Now, remove the word ‘stylesheet’ and type in the word ‘javascript’ and repeat… do you have a large quantity of external JavaScript file server requests?

If you have more than a few of each, your site is not optimized according to Google Insights and other Web Performance online platforms.

Would you like to find out what an online Web Site Performance & Speed Tester thinks of your site, and its quantity of HTTP requests?

To find your HTTP Requests, go to PingDom and put your URL into the box. After the test you will find out how many HTTP Requests your page calls for.

To see how many of these requests are from JavaScript or CSS files, click on the ‘Page Analysis‘ tab and scroll down to ‘Request Analysis‘.

Under the ‘Requests per Content Type‘ box, you will see the quantity of Scripts and CSS files that are being called.

TOO Many? Follow the ‘Speed Tip’ from above and reduce your CSS and JavaScript requests.

Additional Method to Reduce HTTP Requests – Use CSS Sprites

Reduce the HTTP requests to the server by reducing the quantity of images.

If you use a lot of images in your pages for backgrounds, navigation, buttons, links, etc., CSS sprites are a solution that will result in clean markup, fewer images to deal with, and faster response times.

To utilize CSS sprites multiple images are combined into a single image, in turn reducing the number of requests.

Considering that every image on a web page will ADD 1 HTTP request each, reducing the number of images by creating a CSS Sprite to be used as a single image, will result in only 1 HTTP request, saving you loading time.

Closing Comments to Reduce HTTP Requests

Many of these methods, to eliminate HTTP requests, are a tradeoff to making the difficult decision between performance and design. Using these techniques can reduce the response time of your pages by as much as 50%.

It has been stated that a fast response time, for your first page view, can make the difference between a user who abandons your site and one who comes back again and again… web page loading speed is everything to some people.

In many cases, if the person has to wait more than 4 seconds, he will leave.

SpeedRak.com has a Speed Comparison Tester!

Test Your Site Now… you can use the links in the Footer under the Title, ‘Test Your Site’ or use the RED Button below to test your web site Head-to-Head with a competitor.

Run your very own Head-to-Head page speed test… this speed test will run a comparison between your site and any competitors (or whomever you want), then give you the milliseconds that it took to completely load your page.

See How Your Site Ranks… Test your site NOW!

In the Coming Weeks – the Remaining Rules, along with CSS Sprite Images will be discussed in greater detail, so be sure to put your email address in the box below to receive notification.
NOW It’s YOUR Turn… What Have You Found to Reduce Your Web Page Loading Times? Be Sure to Share YOUR Comments and Discoveries Below!

Don't Miss a Single Post!

Enter Your Email and We Will Send You Articles Just Like This Every Week!

Privacy guaranteed. We will never share information

Tags: , , , ,

Category: How to..., Website Performance, Website Speed

Comments (2)

  1. bukugue says:

    it’s hard to make fewer http request when there is a lot of comment on that page..

    for example, one of my post got 300+ http request, because there is so many comment on that post. Every gravatar profile is loaded with different http request, and it even loaded from different server..

    there is many thing i have tried, but because of my limited knowledge, i can only try something simple..

    css spirites you mention in there, seem like awesome plugin i must checked..

  2. Asween says:

    Very Useful and effective tips for speedup word press site

Leave a Reply