Today the loading speed of a website is essential for its success.
Google, Yahoo and Amazon made tests that has shown the importance of performance.
In short:
- Google slowed down their page for 500ms - 20% drop in traffic
- Yahoo slowed down their page for 400ms - 5-9% drop in full-page traffic (users leaving before site finished loading)
- Amazon slowed down their page for 100ms - 1% drop in sales
20% of traffic lost for Google... immense drop.
How To Optimize The Front-End To Get The Maximum Loading Speed
Front-End Optimizing is optimizing a website with different techniques to achieve the fastest possible loading speed. In this case only the Front-End counts.
The Front-End is the part of the website that is transferred and executed/rendered to the client (browser) and contains at least the following four parts:
- HTML code
- CSS code
- JavaScript code
- Image files
(optional media files like .swf, .mov,.mp3,... )
How does Front-End Performance Optimizing Work?
The different parts of the optimizing process are:
1. Common HTML Programming Tasks
- Avoid HTML errors (W3C Validation)
- Delete comments from HTML document
2. Common CSS Programming Tasks
- Avoid CSS expressions
3. Optimizing HTML
- Optimize the order of styles and scripts
- Avoid usage of tables for website design
- Avoid usage of inline styles
- Avoid usage of inline JavaScript
4. Optimizing CSS
- Remove unused CSS
5. Optimizing JavaScript
- Remove unused JavaScript
6. Minimize HTTP Requests
- Combine external CSS
- Combine external JavaScript
- Use CSS Sprites to reduce the amount of images to download
7. Compressing CSS/JavaScript/image files
- Minify combined CSS
- Minify combined JavaScript
- Optimize image file size with tools like Yahoo SmushIt
8. Reduce download size and increment number of concurrent downloads
- Serve static content (CSS/JavaScript/image files) from a cookieless domain
- Parallelize downloads across hostnames
9. Server-Side Compression and Browser Caching
- Enable compression (mod_gzip/mod_deflate on Apache web server)
- Leverage browser caching (mod_expires on Apache web server)
- Specify a Vary: Accept-Encoding header (mod_headers on Apache web server)
These are the essential parts to get a really fast loading website.
The following online tools can help you to get the best results
Combining and Minifying CSS/JavaScript files - Scriptalizer
Minifying JavaScript/CSS files - e.g. the compressor at ebiene.de
Compress Graphic files - Yahoo! SmushIt
Minify CSS/JavaScript and Compress Graphic files with Google Page Speed for Firebug (Firefox addon)
Another tool to check the loading time compared to other sites:
Compare loading speeds of websites - whichloadsfaster.com
A website I developed has more JavaScript and content then the Google start page but loads as twice as fast (ofcourse it depends from where you access the website).
To get such a fast loading website is not impossible, it should be a must to satisfy your visitors.
Summary
Google recommends loading times under 500ms for a website. The tests mentioned above has proven that visitors do not want to wait to get the informations they need.
The faster your website is loading the more visitors you get, the more conversions/sales.
The loading speed of websites will influence your ranking in search engines, sooner or later.
Thank you for reading.
Post a Comment