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
- Letting the first visible images appear on load and the rest on next button click using ajax
- Further optimising images by reducing their sizes and using sprites where applicable
- Using the Apache Module mod_deflate to reduce everything other than images
How have you tackled page speed on your end - Do share your experience.
Ready. Steady. Go.
Swati