Front-End Performance Optimizing
by, 10-05-2010 at 05:05 PM (569 Views)
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.
- 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
ATTENTION: this post is really very technical. If you want to boost your websites loading speed but you have no clue about what I am talking about, feel free to contact me. I am sure I can help you.
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
- 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
4. Optimizing CSS
- Remove unused CSS
6. Minimize HTTP Requests
- Combine external CSS
- Use CSS Sprites to reduce the amount of images to download
- Minify combined CSS
- Optimize image file size with tools like Yahoo SmushIt
8. Reduce download size and increment number of concurrent downloads
- 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:
Compress Graphic files Yahoo! SmushIt
Another tool to check the loading time:
Compare loading speeds of websites faster.1click.at
I removed the subdomain because this site is non-public yet, will be public next week.
As you can see (or just try out yourself on faster.1click.at) the site I developed has more content and is much faster then the Google site.
Thank you for reading.