- Non-usage of appropriate sized images – The images should of of appropriate size, i.e. the image should not be resized in HTML/CSS or if a part of the image is required to be displayed, then that part should be cut down as a separate image.
- Sprites – CSS Sprites is a technique to combine images and show only the relevant part of the image when necessary. Combining small images into single image, will reduce HTTP calls to one, which otherwise would have been equal to number of small images, saving precious time and improving performance and memory usage.
- Expires information and Caching in Web Browsers – All the static content like images, JS, CSS etc should be cached at web server level to get a performance boost. For static components: implement “Never expire” policy by setting for future Expires header.
- GZip components – Compression reduces response times by reducing the size of the HTTP response.
- Put stylesheets at the top – Moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
- Put scripts at the bottom – The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
- Don’t scale image in HTML – Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need <img width=”100″ height=”100″ src=”abc.jpg” alt=”ABC” />, then your image (abc.jpg) should be 100x100px rather than a scaled down 500x500px image.
- Avoid Empty Image src – If an empty image src is found, browser makes another request to your server.
- Internet Explorer makes a request to the directory in which the page is located.
- Safari and Chrome make a request to the actual page itself.