Web Performance Facts.

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 :

1. Increased user frustration
2. Increased blood pressure
3. Are perceived as less interesting
4. 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 :

Most web pages include resources that change infrequently, such as CSS files, image files, JavaScript files, and so on. These resources take time to download over the network, which increases the time it takes to load a web page. HTTP caching allows these resources to be saved, or cached, by a browser or proxy. Once a resource is cached, a browser or proxy can refer to the locally cached copy instead of having to download it again on subsequent visits to the web page

MINIMIZING HTTP REQUESTS :

One of the most important aspects of improving a web page’s performance is “minimizing number of round trips” that the browser needs to make to the server. Every file that your website includes (such as CSS, JavaScript or images) all need to be downloaded to the browser.

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.

You can minify HTML, CSS & JavaScript. If you’re not doing this then you should start thinking about it now. Fortunately for us there are many online tools that can help both minimize and restore our code such as YUI compressor.

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.

IMAGE COMPRESSION:

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.