Making Your Web Pages Load Faster - Web Page Optimization Tips

We have seen web sites with a fairly minimalistic design and without large graphics but yet loads very slowly. The best example may be the Colombo stock exchange web site. The reason behind this can be two different factors,

1. Problems with the hosting sever

2. Pages are not optimized well.

Although the problem number one can be a common culprit most of the time it is number 2. By simply putting a few hours of work one can easily optimize web page loading times and make web sites more usable to users. The most important thing is to do this you don't have to change the way you you build/design web pages.

Only doing certain things an bit different and later adding some external tricks. Here I'm not going to go into the technical details. I'll list out the things that can be done to speed up a web page loading time.

Optimize images
Use save for web in Photoshop or something similar, the thing is raw images contains colors that the image is not using so they are taking unnecessary space on disk. In optimizing we apply some form of compression so only the colors that is really required to show the image goes in to the file.
Standard code
Oh boy this helps, try to validate your XHTML code using the w3c validation service. You may find it a headache at first but it does help to render your page in different browsers correctly. (not 100%) Alos helps Search engine spiders.
Less HTTP requests
Http requests are requests that your browser sends to the server every time it is requesting a page from the server. Imaging you have one web page with 3 large images. On the first request the page html will come from the server. Then the browser goes through the html code to render it on your screen only to find out that there are 3 links to external resources (in this case images) and it will have to send 3 more requests to get those images to you. So in total 4 requests. Most browsers use 2 parallel requests at any given time. So if you combine 2 images, then it will fetch these images at one go. This is where CSS sprites come in handy.



CSS sprites is a technique where we can load a single image at once and show a specific location on that image at a certain place and mask the other areas. So if we have lots of navigation icons or small images everywhere we can combine all those to one image and use CSS to show only the images that we want to come up in a particular location in a web page.

Minify JavaScript - Just as with images raw JS files contains lots of white-space and other non related characters that are not required to run the particular script. So using a minify service your can easily remove this unwanted characters and reduce the file size drastically. Too much minification can lead to code not being readable. If possible move the JS codes, linked files to bottom of the page.

Minify and Combine CSS - If we have several CSS files linked to a certain page go ahead and get them all to a single css file. This will save you lots of HTTP requests. Also minify the final CSS.
Use a CDN
Servers have a hard time serving up large image files, video files to the client. Also sometimes these large data packets has to travel across the globe before arriving in your desktop. So by using a CDN (Content delivery network) these type of files can be dispersed to several locations in the world so when someone requests that file the location nearest to them will jump in and serve the image. This will give relief to the original server from that burden. Remember LAN is always faster that WAN. Same concept here.
Use caching
Popular CMSs like Wordpress, Joomla and some ecommerce softwares allows caching. Example if a certain php/asp/jsp page gets processed more often that other server side script then the server will keep a cached copy of that page so for any new requests it wont have to re process it again.

Also we can force the client browser to cache the page for us. By using a E-tags we can tell the client browser to check for a local copy of the page before requesting it again from the server. This is sometimes not good because the actual file in the server might be changed and the client don't know anything about it.
Use compression
If you are using the apache web server with.htaccess then there is a possibility to enable Gzip or Deflate compression. This will compress (zip) your web site files (mainly images, css, JS and html) before arriving at your browser. So the actually size of the web page is reduced. However your browser has to unzip the data before throwing them to the monitor.