So you’ve designed a fantastic site that everyone loves, don’t make people wait to see it. We’ve come up with this quick fire checklist, which is the first of what will be a series of posts on optimization for the web, to make sure you’re doing all you can to improve your users browsing experience.
- Check your performance
- Enable Gzip
- Reduce HTTP Requests
- Use Image Sprites
- Consider AJAX
- Clean-up Your Code
- Image compression, what’s best?
- Google is your friend
- Nginx – the smart choice
- Content Delivery Networks
1. Check your performance
There are some great tools available to help monitor the performance of your web pages/sites:
The above tools (just two of many) provide information relating to page, image, DOM, Javascript and CSS loading times, as well as info on HTTP header requests. My preference is with YSlow! purely because it goes that little bit further in to highlighting performance issues and giving you great tips and advice on how to resolve problems, it delves far deeper into the world of optimization than this overview checklist
2. Enable Gzip
Enabling gzip compression reduces the file size of content being served to the browser by up to 70%, which makes downloading websites much, much quicker.
Check out betterxplained.com for more information on how to enable gzip on your web server.
3. Reduce HTTP Requests
In short, an HTTP request is your browser requesting content from the web server. Only so many requests can be made simultaneously and each request takes time.
For each individual item being requested e.g. an image, CSS or Javascript file, a new HTTP request must be made. Reducing the number of HTTP requests can dramatically increase the performance of your site. You can easily reduce the number of requests made by consolidating all of your external Javascript documents in to a single Javascript file, and likewise the same with your style sheets, merging them in to a single external CSS file.
4. Use Image Sprites
Following on a similar note from the last point, a great way to reduce HTTP requests is to use image sprites.
An image sprite is a grouping of multiple images in a single file.
Google provide a great example of this, combining all of their global dot com navigational elements in a single image file. Doing this ensures that all users who have internet caching enabled on their browsers will only need to download the file once. Using image sprites will also ensure there is no delay when using image swapping methods for rollover states of links and image drivers.
There are a whole host of websites that offer a service to make sprite generation easier, but the best one that I’ve come across is the Spritegen over at Website-performance.org.
For a more detailed explanation of how you can use image sprites, visit this neat tutorial at css-tricks.com.
5. Consider AJAX
Using AJAX negates the need for users to load entire new pages when submitting forms or loading new content.
For more info and some great tutorials on using AJAX on your sites, check out posts tagged with Javascript on Smashing Magazine.
6. Clean-up Your Code
Make sure you use standards compliant XHTML and CSS for your design and build. Remove all unnecessary mark up – including comment tags and any white space. Make sure that your Javascript files are developed sensibly – with reusable functions & classes and that your code has been minified.
Condense your CSS files, by using shorthand and don’t be afraid to use multiple selectors where applicable to reduce duplication of rules.
7. Image compression, what’s best?
Image compression is something that is often overlooked when producing web sites; there are so many different compression options and file types that it can be a bit perplexing. For photos it is best to use JPEG format, saved out between 60-80% quality from Photoshop, Gimp or other photo editing package. For logos, navigational items and other small decorative elements, save as PNG24.
If you are really keen to reduce file size, for example you are designing a mobile specific site, saving as a GIF and hand selecting the colours included when the file is saved can be beneficial.
Finally, make sure you output the images at the size you wish for them to be displayed on your page. Simply changing the dimensions in HTML will not reduce file size, and generally when this is done, the image tends to look awful. Read up on image compression at webreference.com
8. Google is your friend
Let Google host jQuery for you. Why? Simple – if you dive in to your cache folder, you will most likely notice multiple copies of the same jQuery version that have been stored from visiting numerous different sites that all require it to function. While you can’t even begin to start guessing the sites that may have already stored jQuery on a person’s computer, you can almost guarantee that they have visited Google.
By using the following code to reference jQuery on Google’s server, you will more than likely negate the need for the user to download yet another copy of jQuery as it will have already been cached from the Google domain.
Read up on Google’s AJAX Libraries API
For a further explanation of why you should let Google host jQuery for you visit encosia.com
9. Nginx – the smart choice
Nginx is a high performance web server specifically designed with speed in mind.
If you experience high volumes of traffic and have full control of your hosting solutions, then it may well be worth your while switching from Apache to Nginx.
“Apache is like Microsoft Word, it has a million options but you only need six. Nginx does those six things, and it does five of them 50 times faster than Apache.” – Chris Lea
For a technical comparison of Nginx vs Apache check out this article by Joe, at Joe’s Blog.
10. Content Delivery Networks
Last but not least, if you are experiencing high volumes of international traffic, Content Delivery Networks are the way forward. CDNs are used to distribute content from numerous different servers at once, based on the connecting clients geographic location and server load. CDNs are typically implemented to reduce connection ‘bottle necking’ on any one specific server. Thus providing optimal conditions for file serving and content delivery.
Check out Wikipedia’s page on content delivery networks for more information and links to free and commercial CDN services.
This isn’t an exhaustive list, and if you have any tips of your own, then we would love to hear them. Check back soon for my next post on how to optimize your Flash files.
