After optimising a few web 2.0 websites for speed and download time, I would like to share with everyone some of the tips I have learned and implemented during the process.
1. Use image sprites
If you use a lot of background images in CSS, it’s a good practice to put all the images you need in one big canvas. You can then set background-position in CSS to get the image you want from the big image. The advantage here is that instead of having to make numerous HTTP requests on a page, the browser only needs to make one request for the big image and thus speeding up load time. Some people usually create a sprite for images of the same purpose, for example, a sprite for navigation images, a sprite for logo images, a sprite for footer images, etc, but there is no reason why you can’t create combine all images, be it navigation, icons or footer, in one single sprite.
Instead of this:
3. Use Code Libraries when possible
Instead of this:
4. Optimise CSS
It is important to write a clean and readable css file but when you’re deploying your website to a production environment, the readability of CSS files doesn’t matter so much compared to having a speedy website. Therefore, it is advisable to optimise your CSS files before deploying them onto a production environment. Some of the CSS optimiser I have used are Clean CSS and CSSTidy.
6. Write a clean and semantic markup
If you think <table> are faster to code and prefer using <table> for layouts, chances are you haven’t probably had a lot of practice with semantic markup in xHTML and CSS. A clean and semantic markup not only renders on browsers faster, it also separates content from presentation (layout) and makes maintenance much easier.
7. Use a caching method
There are a number of caching methods you can use to speed up a website load time. However, if you are not able to speed up the web server or web applications at the server level, here is a simple caching method you can use with .htaccess file. It simply sets the expiry header and cache control for browsers so the browser keeps certain components in its cache and retrieve them from the cache rather than making a new HTTP request each time.
#604800 = 1 week in seconds <FilesMatch "\.(gif|jpg|jpeg|png)$"> Header set Cache-Control "max-age=604800" </FilesMatch> #86400 = 1 day in seconds <FilesMatch "\.(js|css)$"> Header set Cache-Control "max-age=86400" </FilesMatch>
8. Preload or postload certain components
Sometimes, you might want to preload certain components before they are required. For example, Google Search preloads some of the images it requires in the search result page on search homepage, thereby, reducing the time it takes to load search result page. And other times, you do not need to load all content on a page at once. For example, you may have a photo gallery with 50 images, but you do not need to load all 50 images on page load, rather, you can use lazyloading method or use AJAX to load images required on request.
9. Keep components sizes small
It is always recommended to have small components and objects in your page. This includes flash objects, multimedia components, images, scripts, css, and the html file itself. Simple measures like optimising images, removing extra line breaks, comments and whitespaces in scripts, css and html files, de-duplicating content and using shorthands appropriately can make a big difference in the size of a component. The ideal size of a component is between 20K – 50K (the smaller, the better!).