How to do it...

We can do it in various ways but let's concentrate on more important ones:

  • Reducing DNS lookup: Whenever possible try to use URL directives and paths to different functionalities instead of different hostnames. For example, if a websiteis 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:

    Note

    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. We will discuss more of this in the Minifying JavaScript and CSS files (Simple) recipe. 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. We will discuss these techniques in detail in the Minifying JavaScript and CSS files (Simple) recipe.
  • 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. We will discuss more on the CSS sprites concept in the Setting up CSS sprites (Advanced) recipe.
  • 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:

上一章目录下一章