Why does speed matter?
- Speed is among the most significant success factors web sites face.
- Search engines like Google, measure and factor in the speed of web sites in their ranking algorithm
Consequences of poor performance :
- Increased user frustration
- Increased blood pressure
- Are perceived as less interesting
- Are perceived as less attractive
Web performance best practices :
Speed evaluates performance from the client point of view, typically measured as the page load time , The best practices are grouped into several categories that cover different aspects of page load optimization.
OPTIMIZING CACHING :
MINIMIZING HTTP REQUESTS :
MINIFYING HTML, CSS & JAVA-SCRIPT :
In order to understand the code that we are writing, we often format it in a way that is easier for us to read, in other words it’s a more human friendly format. Take a look at the sample code below:
In the example above we can clearly see that we have a form with label and input element, surrounded by a div. The example above is much clearer than reading it as:
Unfortunately, although it may be easier for us to read, the more human friendly version includes a lot of unnecessary characters. It’s not too disastrous in the example above, however, if this was a large scale site with thousands upon thousands of lines of code, then it would cost us in performance.
Unnecessary characters can include white space, comments and new line characters. These characters can be removed without affecting the code’s performance and by removing these we are reducing the file size of our code, therefore the amount of data that needs to be downloaded to the browser.
OPTIMIZING IMAGES :
One of the most performance hungry assets that the browser needs to download are images, causing some sites to be painfully slow. Wherever possible try to use CSS to generate graphics instead of images. This can be great for items such as buttons, but in some cases CSS maybe not be capable of recreating the design such as in the case of a photograph.
If you have, for instance, some form of photography showcase, or lots of photographs on the site you are designing then it may not be convenient or practical to serve them all as a sprite. This is where you will have to ‘compress your images’. By properly formatting and compressing images we are able to save many bytes of data.
By compressing images without losing the image’s look or visual quality you can save on data that needs to be downloaded. Yahoo’s smush.it service is incredibly good at doing this job for you. Simply upload the images that you want to ‘smush’ and it will losslessly compress them for you. Also there are many other tools through which one can compress images without loosing quality.