How to Reduce Your HTTP Requests – Increase Your Site Speed
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
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.
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
What do I mean by reducing the chances of bottlenecks?
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.
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.
Under the ‘Requests per Content Type‘ box, you will see the quantity of Scripts and CSS files that are being called.
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.
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.