How to optimize the Front-End to get the maximum loading speed

1. Front-End Performance Optimizing How to optimize the Front-End to get the maximum loading speed © 2010 by Michael Pehl - http://www.cookielessdomain.com

2. Front-End Performance Optimizing “ Front-End Performance Optimizing”? What is that? 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,...) © 2010 by Michael Pehl - http://www.cookielessdomain.com

3. Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (1-3) : 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 © 2010 by Michael Pehl - http://www.cookielessdomain.com

4. Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (4-6) : 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 © 2010 by Michael Pehl - http://www.cookielessdomain.com

5. Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (7-9) : 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 the 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) © 2010 by Michael Pehl - http://www.cookielessdomain.com