Get Our Latest Posts Sent Directly to Your Email Inbox!

How to Reduce Your HTTP Requests – Increase Your Site Speed

by | 12 Comments
Last Updated on March 15th, 2017

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 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… plugins take time to load, which will slow your page down. 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 Adding Expires Header (Mod_Expires) Can Reduce HTTP Requests

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 How to Apply Expires Headers to WordPress to Optimize Cache-Control

Combining Scripts and Stylesheets

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.

Test Your Site for HTTP Requests

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

To find out what an online Web Site Performance & Speed Tester thinks of your site, and its quantity of HTTP requests, follow the links below.

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.

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.

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 trade-off 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% or more.

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.

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!

Tags:

Comments (12)

Trackback URL | Comments RSS Feed

  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

  3. εκπτωτικα κουπονια says:

    If move the scripts on the footer that will reduce the number of the http requests?

    • John E says:

      Moving scripts to the footer will not reduce the http requests, they would just be requested by the server in a different order.

  4. moumita says:

    Came here to know to combine css but ended up reading 4-5 articles instead

  5. Thanks a lot for such a guide but Is there any Plugin which can combine CSS & Javascript or any Plugin which can help in other way.

    • John E says:

      Hi Dheeraj,

      There actually is a plugin that does all of this… it’s called the W3 Total Cache plugin for WordPress. It can take care of your Browser Caching, Gzip Compression and the works.

      When you use this plugin, run two different tests using Pingdom… run a test with your files combined, then run a test without your files combined and see which one loads faster.

      Here is a great tutorial for setting up your W3 Total Cache plugin: http://www.onlinemediamasters.com/w3-total-cache-settings/

      One thing I have found out is that when I combine my JavaScripts and CSS files into 1 or 2 files my loading times end up being longer. When I remove the combined files of the JavaScript and CSS Stylesheets it loads faster because the individual smaller files are downloading in Parallel (at the same time). When you combine the files, they end up being larger files taking longer to load.

      Test and see what works better for your site.

      I hope this helps…

      John

  6. Rohit says:

    One way to reduce request is to remove any Sliders from the webpages. I replaced all sliders with static images and saves around 8 requests per page. In addition, I had loaded 2-3 photographs per page in few pages. I took all of them, combined them, reduced them using Photoshop Save for Legacy format and uploaded them. The site really speeded up.

  7. Jack says:

    Vey nice post. Thank you so much for sharing.

  8. David says:

    Any thoughts about how SEO is affected by combining photographs as opposed to having a few photos on a page with repeated associated keyword metadata? Maybe speed of load increases Google ranking, but reduction of metadata decreases it?

    • John E says:

      Hi David,

      The chances of a few photos on a page loading in parallel are excellent, meaning that these images will not bog your page down. Depending on the file size of each photograph, combining multiple photos as a Sprite would make the image file size fairly large, causing longer loading time.

      Sprites are also, usually called from your CSS file… combining photographs, as a Sprite on a page is not a recommended practice.

      If I am on the right track and Sprites are what you are referring to, a good example of a sprite would be icons or possibly vector images… small images that are on your site permanently, could be used as a Sprite.

      I hope I have helped.

      John

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to a friend