Three Ways To Decrease HTTP Requests (Reduce Load Time)

These days, even professional bloggers are afraid of their blog's loading speed. Google, have strict rules and that rules punishes slow blogs with a tag "Slow to load" and a rank decrease when anything is searched on a non-desktop device, i.e., iPhone, Android, Windows Phone or Tablet and it is on your blog. As you might be knowing that we have already showed some common ways to decrease your blog's loading speed but you might not be knowing that there's one more way to make it load faster.
Read More: - How To Boost Your Blog's Loading Speed?

The way is, by reducing the HTTP Requests. It means, that to how many domains browser requests to fetch anything (can be script/CSS/font or even images and videos). It's very simple mathematics.

Suppose, you have uploaded a script on http://www.yourjavascript.com and one CSS file on http://drive.google.com and one image on http://www.postimg.org and placed the files as:

<script src='http://www.yourjavascript.com/anything_the_id' type='text/javascript'/>

<link href='http://googledrive.com/host/file_upload_id' type='text/CSS'/>

<img src='http://s23.postimg.org/image_url'/>

Now, as you may clearly see, that we just made three HTTP request. Now, in order to load these files, the browser would send requests to yourjavascript.com, googledrive.com, and postimg.org that it wants to fetch data and then, after approximately .3 seconds (may vary with internet speeds), the browsers starts fetching those files.

Now, how can we reduce load time? Simply, by reducing the HTTP requests. Now how to reduce HTTP requests? Simply, by the using the methods described below:

#1- Combine Tiny Images Into A Single Image [Sprite]

We know that even in a simple page, we can get 2-6 pictures irrespective of their size. Some of them can be small, and some of them can be large (in size).

In this method, we will use Image Sprites.

According to w3school.com,

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Don't you think we can use it for reducing the HTTP requests? Let's see how Google uses image sprites:

Can you count how many pictures you can find on the search page of Google? Probably 20-30 (small ones also). That's why, there would be 20-30 HTTP requests going out...but, using image Sprite, Google has smartly reduced the HTTP requests from 20-40 to 5-10. 

See this image:

There are approximately 50 images combined in the picture above. Google did this to reduce the HTTP request. Now, with this one image, all the 50 images will get loaded and browser would not be required to fetch each of the images one-by-one.

Do you also want to use image sprites to reduce the HTTP requests of your slow-loading blog? Then see this article by w3school.com that has all about image sprites.

#2- Host Scripts & CSS Files Internally

As said by me and by others also, that the files that are hosted externally load slower than the ones which are hosted internally.

In case, you are a newbie, let I show you, what I mean by hosting a script externally and internally:

Script hosted internally:

<script>
----------------------------------------
----------------------------------------
----------------------------------------
</script>

Script hosted externally:

[code]<script src='https://www.anything.com/..../.../' type='text/javascript'/>[/code]

So, try to host scripts internally as they load faster, and the browser then will not have to make another HTTP request.

#3- Combine Files If Hosting Internally Is Not Possible

There are some powerful plugins like jQuery, Superfish, Animator and some others which are required and can be found on anyone's blog. So, because of any reason, if you are not able to host scripts internally, then do one thing- Combine files.

For example, let us take two plugins - 1) jQuery; 2) Google's +1

You would probably install these plugins in your blog by using these two lines:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

Now, you can combine these two files. Firstly, copy all the script that is in https://apis.google.com/js/plusone.js, then paste it into a notepad file. Then give space of a line and then, copy all the script which is in https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js, and then paste it after the previous one in the same notepad file. Save it and then upload it on yourjavascript.com and then install it using:

<script src='https://www.yourjavascript.com/.../.../' type='text/javascript'/>

And, you just reduced HTTP requests from two, to one! This would surely affect your blog's loading speed.

[info headline="There's one more way"]You can also buy your own hosting and then upload all your files to that single host. This would increase your blog's loading speed. Generally, the blogs which are on WordPress uses this method and blog on blogger rarely do use it. But, it is a very effective way.[/info]

Final Words

Have you noticed a change in my writing style? It has become poorer I think. That's all because there was no time to write posts this month and this affected my writing skills. But they would be fine within some days. So, just keep in touch! Thanks!

Share this post