18 Mar, 2009
10 Website Optimisation Tips for Web 2.0 Websites
Web Development » Tutorials » 10 Website Optimisation Tips for Web 2.0 Websites
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.
Examples of an image sprite: AOL, Digg
2. Combine Javascript files
If you are building a web 2.0 website, it is probably very likely that you will have multiple javascript files. For example, you might have one for jQuery, a few for various jQuery plugins, one for your own custom functions, etc. Instead of calling them one by one in your html, you can put all scripts in a single Javascript file to reduce HTTP requests.
Instead of this:
<script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.newsticker.js"></script> <script type="text/javascript" src="scripts/jquery.scroller.js"></script> <script type="text/javascript" src="scripts/jquery.datepicker.js"></script> <script type="text/javascript" src="scripts/jquery.dragdrop.js"></script> <script type="text/javascript" src="scripts/custom.js"></script>
Use this:
<script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/scripts.js"></script>
3. Use Code Libraries when possible
If you’re using a common Javascript library, it is advisable to use Code Libraries like Google AJAX Libraries API because it is likely that the browser might already have the javascript file in cache from some other websites that uses the same code library and hence speed up the loading time. Another advantage is that you can have the latest stable version of the library without having to manually update your code.
Instead of this:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Use this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
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.
5. Minify or Pack Javascripts
Web 2.0 websites rely heavily on AJAX and Javascript and you can reduce the size of these Javascript files further by minifying or packing them. You can use this online tool to compress your Javascript files using the above algorithms.
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!).
10. Benchmark and Test
Always benchmark, test and optimise more whenever possible. I use Firebug Network Monitoring Tool and YSlow for this purpose.
