Your SlideShare is downloading. ×
0
Front-End Performance Optimizing
Front-End Performance Optimizing
Front-End Performance Optimizing
Front-End Performance Optimizing
Front-End Performance Optimizing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front-End Performance Optimizing

274

Published on

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

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×