Minimizing HTTP requests

Exclusive offer: get 50% off this eBook here
Instant PageSpeed Optimization [Instant]

Instant PageSpeed Optimization [Instant] — Save 50%

Optimize your website to make it faster by enhancing its speed, traffic, and bandwidth using practical and hands-on recipes with this booka and ebook

$14.99    $7.50
by Sanjeev Jaiswal | October 2013 | Open Source

The website can be made faster in many ways, one of them being reducing requests sent to the server, which will ultimately minimize the delay. The fewer the server requests, the faster the website will be.

We can do it in various ways but in this article by Sanjeev Jaiswal, author of Instant PageSpeed Optimization, let's concentrate on more important ones

(For more resources related to this topic, see here.)

How to do it...

  • Reducing DNS lookup: Whenever possible try to use URL directives and paths to different functionalities instead of different hostnames. For example, if a website is abc.com, instead of having a separate hostname for its forum, for example, forum.abc.com, we can have the same URL path, abc.com/forum. This will reduce one extra DNS lookup and thus minimize HTTP requests. Imagine if your website contains many such URLs, either its own subdomains or others, it would take a lot of time to parse the page, because it will send a lot of DNS queries to the server.

    For example, check www.aliencoders.com that has several DNS lookup components that makes it a very slow website. Please check the following image for a better understanding:

    If you really have to serve some JavaScript files at the head section, make sure that they come from the same host where you are trying to display the page, else put it at the bottom to avoid latency because almost all browsers block other downloads while rendering JavaScript files are being downloaded fully and get executed. Modern browsers support DNS prefetching. If it's absolutely necessary for developers to load resources from other domains, he/she should make use of it.

    The following are the URLs:

  • Using combined files: If we reduce the number of JavaScript files to be parsed and executed and if we do the same for CSS files, it will reduce HTTP requests and load the website much faster. We can do so, by combining all JavaScript files into one file and all CSS files into one CSS file.
  • Setting up CSS sprites: There are two ways to combine different images into one to reduce the number of HTTP requests. One is using the image map technique and other is using CSS sprites. What we do in a CSS sprite is that we write CSS code for the image going to be used so that while hovering, clicking, or performing any action related to that image would invoke the correct action similar to the one with having different images for different actions. It's just a game of coordinates and a little creativity with design. It will make the website at least 50 percent faster as compared to the one with a lot of images.
  • Using image maps: Use the image map idea if you are going to have a constant layout for those images such as menu items and a navigational part. The only drawback with this technique is that it requires a lot of hard work and you should be a good HTML programmer at the least.

    However, writing mapping code for a larger image with proper coordinates is not an easy task, but there are saviors out there. If you want to know the basics of the area and map tags, you can check out the Basics on area and map tag in HTML post I wrote at http://www.aliencoders.com/content/basics-area-and-map-tag-html.

    You can create an image map code for your image online at http://www.maschek.hu/imagemap/imgmap.

    If you want to make it more creative with different sets of actions and colors, try using CSS codes for image maps..

The following screenshot shows you all the options that you can play with while reducing DNS lookups:

How it works…

In the case of reducing DNS lookup, when you open any web page for the first time, it performs DNS lookups through all unique hostnames that are involved with that web page. When you hit a URL in your browser, it first needs to resolve the address (DNS name) to an IP address. As we know, DNS resolutions are being cached by the browser or the operating system or both. So, if a valid record for the URL is available in the user's browser or OS cache, there is no time delay observed.

All ISPs have their own DNS servers that cache name-IP mappings from authoritative name servers and if the caching DNS server's record has already expired, it should be refreshed again. We will not go much deeper into the DNS mechanism. But it's important to reduce DNS lookups more than any other kind of requests because it will add a more prolonged latency period as any other requests do.

Similarly, in the case of using image maps, imagine you have a website where you have inserted separate images for separate tabular menus instead of just plain text to make the website catchier! For example, Home, Blogs, Forums, Contact Us, and About Us. Now whenever you load the page, it sends five requests, which will surely consume some amount of time and will make the website a bit slower too.

It will be a good idea to merge all such images into one big image and use the image map technique to reduce the number of HTTP requests for those images. We can do it by using area and map tags to make it work like the previous one. It will not only save a few KBs, but also reduce the server request from five to just one.

There's more...

If you already have map tags in your page and wish to edit it for proper coordinates without creating trouble for yourself, there is a Firefox add-on available called the Image Map Editor (https://addons.mozilla.org/en-us/firefox/addon/ime/).

If you want to know the IP address of your name servers, use the $ grepnameserver /etc/resolv.conf command in Linux and C:/>ipconfig /all in Windows. Even you can get the website's details from your name server, that is, host website-name <nameserver>. There is a Firefox add-on that will speed up DNS resolution by doing pre-DNS work and you will observe faster loading of the website. Download Speed DNS from https://addons.mozilla.org/en-US/firefox/addon/speed-dns/?src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=search.

Summary

We saw that lesser the number of requests, faster the website will be. This article showed us how to minimize such HTTP requests without hampering the website.

Resources for Article:


Further resources on this subject:


Instant PageSpeed Optimization [Instant] Optimize your website to make it faster by enhancing its speed, traffic, and bandwidth using practical and hands-on recipes with this booka and ebook
Published: September 2013
eBook Price: $14.99
See more
Select your format and quantity:

About the Author :


Sanjeev Jaiswal

Sanjeev Jaiswal is a computer graduate with four years of industrial experience and more than six years of web development experience. He extensively uses Perl and GNU/Linux for his day-to-day work and also teaches Drupal and WordPress CMS to bloggers. He has worked closely with major clients such as CSC, IBM, and Motorola mobility.

Sanjeev loves teaching technical functionalities to engineering students and IT professionals and has been teaching since 2008. He founded AlienCoders (http://www.aliencoders.com) based on the principle of "learning through sharing" for Computer Science students and IT professionals in 2010, which became a huge hit in India among engineering students.

He usually uploads technical videos to YouTube on his channel "AlienCoders". Sanjeev has a huge fan base on his site and on YouTube because of his simple but effective way of teaching and his philanthropic nature toward students.

Books From Packt


Joomla! Search Engine Optimization
Joomla! Search Engine Optimization

Drupal Search Engine Optimization
Drupal Search Engine Optimization

Instant Magento Performance Optimization How-to [Instant]
Instant Magento Performance Optimization How-to [Instant]

Drupal 6 Search Engine Optimization
Drupal 6 Search Engine Optimization

 Instant Redis Optimization How-to [Instant]
Instant Redis Optimization How-to [Instant]

Instant Website Optimization for Retina Displays How-to [Instant]
Instant Website Optimization for Retina Displays How-to [Instant]

WordPress 3 Search Engine Optimization
WordPress 3 Search Engine Optimization

 Instant Migration to HTML5 and CSS3 How-to [Instant]
Instant Migration to HTML5 and CSS3 How-to [Instant]


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
9
P
3
v
e
f
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software