Improving site load time: From 40 to 3 seconds

A basic and important check for building any site is its page load time. It's the first step in the user experience of any web product.The longer a site takes to load the larger its rate of abandonment. This infographic from Kissmetrics below demonstrates how every second during the page load counts. 

I learnt this the hard way. In my last job one of my projects was Candelite.com. While the UI of the site was pretty, from a functionality point of view it was not effective at all. Purely because the site took ages to load - nearly 40 seconds! Needless to say the site traffic was next to nothing - a trickling 200 monthly visits at best. Since it was a new site of a fairly new confectionery brand, we didn’t think much about it. The odd complain from the marketing team about load time was not taken seriously as every time we checked it on our end it seemed to pop open in a few seconds.

Then in January this year, for the Dubai Shopping Festival we ran a Google campaign to direct traffic to the site. The GDN campaign garnered a healthy click count of 3,248 but the number of site visits recorded was 456. The click to visits drop-off was a staggering 85% - industry average is 15%-20%. Since we were in the middle of DSF it was decided to change the landing url of the campaign to the brand’s Facebook page instead of the website. But this was nothing short of an eye-opener.

Looking deep into this we realised how genuine those marketing complaints were. A good 15 minutes with our new Head of Tech introduced me to Yahoo’s Yslow and its usefulness. Running a quick test gave us a list of recommendations including;

• Making fewer HTTP requests - The best way to implement this is to reduce the number of elements on every page. This can be easily achieved by combining multiple scripts into one, using single js files and css files, or css sprites
• Compressing components with gzip - Gzip helps reduce the HTTP response size by nearly 70% and is the most popular and effective methods available
• Putting CSS at top - Moving stylesheets in the HEAD of any page helps to load the page quickly
• Putting JavaScript at bottom - Moving JavaScript to the bottom helps parallel download of other page elements
• Minifying JavaScript and CSS - Every character, white space, comments add to the file size. Cleaning up these files by removing these unnecessary elements reduces file download time
• Not scaling images in HTML - Avoid using the height and width attributes in the html to scale images on the site. This puts unnecessary load

The list was much longer. But for us addressing just these few helped to reduce the page speed from 40 to 15 seconds in a few days. Since Candelite.com is a graphic heavy site; we continued on with our optimisation methods:

1. Letting the first visible images appear on load and the rest on next button click using ajax
2. Further optimising images by reducing their sizes and using sprites where applicable
3. Using the Apache Module mod_deflate to reduce everything other than images

By the end of the exercise our page speed was down to three seconds. Still not the ideal industry standard of under two seconds. But was a long way from the 40 second mark. Tons has been written about handling page speed, and in turn improving page rankings. So what we tried to do was nothing new, but it was one of the quick and easy things if followed can lead to a substantial improvement.

How have you tackled page speed on your end - Do share your experience.

Ready. Steady. Go.
Swati