How to Reduce Your HTTP Requests – Increase Your Site Speed | Rule 1 of 7
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.
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 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 #2 – How to Apply Expires Headers to WordPress to Optimize Cache-Control
– – – –
Combining Scripts and Stylesheets (Rule #5)
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.
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…
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.
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.
Under the ‘Requests per Content Type‘ box, you will see the quantity of Scripts and CSS files that are being called.
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!
Don't Miss a Single Post!
Enter Your Email and We Will Send You Articles Just Like This Every Week!