Every aspect of a web page needs to be carefully scrutinised for optimisation. Strip off anything and everything that is not needed. Less is sometimes better. (This tutorial is a part of the series – “How to become a web programmer in 4 easy steps”. Read previous post here.)
We will discuss mainly about two types of optimisations – Image Optimisation and Minifier
Image Optimisation
Anything other than the image data is extra. Strip them off – especially if your site features a lot of images. The following table detail the tools to use.
| Image Type | Tool | |
| JPG | JPEGTran | |
| PNG | PNG Optimizer | |
| GIF | Gifsicle Additional resource : Optimising Animated GIFs |
Minifiers
One of the many methods at improving performance of sites is code minification. “The goal of JavaScript abd CSS minification is to preserve the operational qualities of the code while reducing its overall byte footprint.” For this, use Yahoo!’s YUICompressor . Detailed instruction on how to use the tool can be found here.
Website Analysis Tools
There exists two Firefox plugins to give more insight into the client-server interaction and website as a whole. They are:
1. Yslow
“YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.”
2. Page Speed
Page Speed is an open-source Firefox/Firebug Add-on from Google. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. Page Speed performs several tests on a site’s web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed on their pages get a set of scores for each page, as well as helpful suggestions on how to improve its performance. Page Speed can be downloaded from this link.
3. Speed Tracer
“Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).”
LiveHTTP Headers helps to view HTTP headers of a page during client-server interaction thereby making it easy to debug/locate issues associated with pages.
Reference
To learn more about Web optimisation and how the above mentioned tools can be put to better use, read these books – “High Performance Web Sites” and “Even Faster Web Sites – Performance Best Practices for Web Developers” – written by Steve Souders.
Conclusion
When I first started out to develop a site I had no clue as to where to start and what to do. With this series of posts, I have tried to show you a path. Hope it helps. Signing off wishing you all the very best.
1 Response
[…] is not enough. To bring out the best performance, a site and its components needs to be optimised. Part 5 of this tutorial sums up the series with various ways to optimise your site for best […]