Front-End Performance Optimizing

Today the loading speed of a website is essential for it’s 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

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
- 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 Smu****

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 – http://scriptalizer.com/

Minifying JavaScript/CSS files – http://compressor.ebiene.de/

Compress Graphic files – Yahoo Smush It (Google for it)

Minify CSS/JavaScript and Compress Graphic files with Google Page Speed for Firebug (Firefox addon)

Another tool to check the loading time:

Compare loading speeds of websites – http://faster.1click.at

If you need some informations about cookieless domain then visit http://www.cookielessdomain.com/blog/

 

Yahoo did the test.

Check here: http://www.slideshare.net/stubbornella/after-yslow-a

 

Very nice tips, thanks for sharing them.

 

Those are not tipps, this will be the future of Front-End development.

 

Good writeup mate. Thanks. I still need to optimize my website A long time pending job.

 

Thanks my friend.

Don't wait too long