Heavy Web Optimization FRONT-END Vo Duy Tuan – CEO/Founder
$who_am_I? <ul><li>My Name is Võ Duy Tuấn </li></ul><ul><li>PHP 5 Zend Certified Engineer </li></ul><ul><li>Interests: PHP...
$table_of_content <ul><li>Front-end Optimization </li></ul><ul><li>Minification </li></ul><ul><li>CSS Sprite </li></ul><ul...
Front-end Optimization 1
1.1. Where is Front-end? “ 80% of the end-user response time is spent on the front-end. Most of this time is tied up in do...
1.2. Front-end Optimize Theory <ul><li>Reduce request </li></ul><ul><li>Reduce size </li></ul><ul><li>Reduce duplicated </...
1.2. Performance testing tools <ul><li>Firefox with extension: </li></ul><ul><ul><li>Web developer </li></ul></ul><ul><ul>...
Minification 2
2.1. What is Minification? <ul><li>Remove unnecessary characters. </li></ul><ul><li>Do not change functionality. </li></ul...
2.2. Minification example: JS
2.2. Minification example: CSS
2.3. Minify library <ul><li>PHP 5 library </li></ul><ul><li>Support Javascript, CSS </li></ul><ul><li>Combine multiple fil...
2.3. Minify in APC
2.3. Minify library
CSS Sprite 3
3.1. CSS Sprite: Case study Menu with 3 icons & Hover change icon effect. Total 6 images.
3.1. CSS Sprite: Case study Merge 6 icons & using CSS magical  background-position  property to use  CSS Sprite
3.1. CSS Sprite: Case Study After:
3.2. CSS Sprite Showcase
3.3. CSS Sprite Best Practice:  <ul><li>SPAN tag </li></ul><ul><li>Horizontal & Vertical balance.  </li></ul><ul><li>Horiz...
3.4. CSS Sprite
Domain Sharding 4
4.1. Domain Sharding
4.1. Domain Sharding
4.2. Best practice <ul><li>More Domain/Sub-domain, more parallel download. </li></ul><ul><li>2-4 domains/sub-domain is goo...
4.3. Domain sharding
Image Optimizing 5
5.1. Image Optimizing 5
5.1. Image Optimizing 5
5.2. Photoshop Output 5
5.3. Best practice <ul><li>Do not use big image for thumbnail </li></ul><ul><li>Multiple sizes of an image </li></ul><ul><...
HTTP Caching 6
Way #1: Automatic 6
Way #2: ETag - Automatic 6
Way #3: Manual with Apache Mods 6
6.2. Completed headers for cache <ul><li>Last-modified:  Thu, 18 Aug 2011 02:23:30 GMT </li></ul><ul><li>ETag:  “5b8946-19...
6.3. Sample .htaccess caching with mod_headers & mod_expires <ul><li><IfModule mod_expires.c> </li></ul><ul><li>ExpiresAct...
6.4. Example: Before 6
6.4. Example: After 6
6.5. Caching Note <ul><li>Time of cache </li></ul><ul><li>Way of clearing cache </li></ul><ul><li>Other caching techniques...
<ul><li>It’s time to  query  … </li></ul><ul><li>Contact: </li></ul><ul><li>Fullname: Vo Duy Tuan </li></ul><ul><li>Email:...
Upcoming SlideShare
Loading in...5
×

Heavy Web Optimization: Frontend

4,496

Published on

This slide show some main techniques to optimize speed for front-end.

Published in: Technology, Art & Photos
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,496
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
136
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Heavy Web Optimization: Frontend

  1. 1. Heavy Web Optimization FRONT-END Vo Duy Tuan – CEO/Founder
  2. 2. $who_am_I? <ul><li>My Name is Võ Duy Tuấn </li></ul><ul><li>PHP 5 Zend Certified Engineer </li></ul><ul><li>Interests: PHP, Social Network, Optimize Web </li></ul><ul><li>Works: </li></ul><ul><ul><li>Harvey Nash Technical Lead </li></ul></ul><ul><ul><li>Reader.vn CEO/Founder </li></ul></ul><ul><ul><li>Trainer </li></ul></ul><ul><ul><li>Freelancer </li></ul></ul>
  3. 3. $table_of_content <ul><li>Front-end Optimization </li></ul><ul><li>Minification </li></ul><ul><li>CSS Sprite </li></ul><ul><li>Domain sharding </li></ul><ul><li>Image Optimizing </li></ul><ul><li>HTTP Caching </li></ul>
  4. 4. Front-end Optimization 1
  5. 5. 1.1. Where is Front-end? “ 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.”
  6. 6. 1.2. Front-end Optimize Theory <ul><li>Reduce request </li></ul><ul><li>Reduce size </li></ul><ul><li>Reduce duplicated </li></ul>
  7. 7. 1.2. Performance testing tools <ul><li>Firefox with extension: </li></ul><ul><ul><li>Web developer </li></ul></ul><ul><ul><li>YSlow </li></ul></ul><ul><li>Google Chrome Inspector </li></ul><ul><li>Google chrome with pagespeed extension </li></ul><ul><li>Charles: Web Debugging Proxy Application </li></ul><ul><li>Online Testing: </li></ul><ul><ul><li>http://webpagetest.org/ </li></ul></ul>
  8. 8. Minification 2
  9. 9. 2.1. What is Minification? <ul><li>Remove unnecessary characters. </li></ul><ul><li>Do not change functionality. </li></ul><ul><li>Good for Javascript, CSS. </li></ul><ul><li>Merge multiple scripts. </li></ul><ul><li>The superstar: Minify library </li></ul><ul><li>Advice: </li></ul><ul><ul><li>Put CSS at the beginning of web page </li></ul></ul><ul><ul><li>Put Javascript at the bottom of web page </li></ul></ul>
  10. 10. 2.2. Minification example: JS
  11. 11. 2.2. Minification example: CSS
  12. 12. 2.3. Minify library <ul><li>PHP 5 library </li></ul><ul><li>Support Javascript, CSS </li></ul><ul><li>Combine multiple files into a single file </li></ul><ul><li>Caching </li></ul><ul><li>Gzipping </li></ul><ul><li>Download: http://code.google.com/p/minify/ </li></ul>
  13. 13. 2.3. Minify in APC
  14. 14. 2.3. Minify library
  15. 15. CSS Sprite 3
  16. 16. 3.1. CSS Sprite: Case study Menu with 3 icons & Hover change icon effect. Total 6 images.
  17. 17. 3.1. CSS Sprite: Case study Merge 6 icons & using CSS magical background-position property to use CSS Sprite
  18. 18. 3.1. CSS Sprite: Case Study After:
  19. 19. 3.2. CSS Sprite Showcase
  20. 20. 3.3. CSS Sprite Best Practice: <ul><li>SPAN tag </li></ul><ul><li>Horizontal & Vertical balance. </li></ul><ul><li>Horizontal better than vertical sprite. </li></ul><ul><li>Make room for future </li></ul><ul><li>Make sprite image small size. </li></ul>
  21. 21. 3.4. CSS Sprite
  22. 22. Domain Sharding 4
  23. 23. 4.1. Domain Sharding
  24. 24. 4.1. Domain Sharding
  25. 25. 4.2. Best practice <ul><li>More Domain/Sub-domain, more parallel download. </li></ul><ul><li>2-4 domains/sub-domain is good. (DNS Lookup problem) </li></ul><ul><li>Consistent resource domain </li></ul><ul><li>Cookieless domain/subdomain for static resource requests. </li></ul>
  26. 26. 4.3. Domain sharding
  27. 27. Image Optimizing 5
  28. 28. 5.1. Image Optimizing 5
  29. 29. 5.1. Image Optimizing 5
  30. 30. 5.2. Photoshop Output 5
  31. 31. 5.3. Best practice <ul><li>Do not use big image for thumbnail </li></ul><ul><li>Multiple sizes of an image </li></ul><ul><li>Using “ Save for web ” in Photoshop </li></ul><ul><li>Re-use background pattern for button, menu </li></ul>5
  32. 32. HTTP Caching 6
  33. 33. Way #1: Automatic 6
  34. 34. Way #2: ETag - Automatic 6
  35. 35. Way #3: Manual with Apache Mods 6
  36. 36. 6.2. Completed headers for cache <ul><li>Last-modified: Thu, 18 Aug 2011 02:23:30 GMT </li></ul><ul><li>ETag: “5b8946-190ef-4aabe4c73ac80” </li></ul><ul><li>Expires: Sat, 26 Nov 2011 05:42:46 GMT </li></ul><ul><li>Cache-control: max-age=604800, public </li></ul>6
  37. 37. 6.3. Sample .htaccess caching with mod_headers & mod_expires <ul><li><IfModule mod_expires.c> </li></ul><ul><li>ExpiresActive On </li></ul><ul><li>ExpiresDefault A0 </li></ul><ul><li><FilesMatch &quot;.(jpg|jpeg|png|gif)$&quot;> </li></ul><ul><li> Header set Cache-Control &quot;max-age=604800, public&quot; </li></ul><ul><li></FilesMatch> </li></ul><ul><li><FilesMatch &quot;.(jpg|jpeg|png|gif)$&quot;> </li></ul><ul><li> ExpiresDefault A604800 </li></ul><ul><li> Header append Cache-Control &quot;public&quot; </li></ul><ul><li></FilesMatch> </li></ul><ul><li><FilesMatch &quot;.(jpg|jpeg|png|gif)$&quot;> </li></ul><ul><li> ExpiresDefault A604800 </li></ul><ul><li></FilesMatch> </li></ul><ul><li></IfModule> </li></ul>6
  38. 38. 6.4. Example: Before 6
  39. 39. 6.4. Example: After 6
  40. 40. 6.5. Caching Note <ul><li>Time of cache </li></ul><ul><li>Way of clearing cache </li></ul><ul><li>Other caching techniques: html cache, server cache… </li></ul>6
  41. 41. <ul><li>It’s time to query … </li></ul><ul><li>Contact: </li></ul><ul><li>Fullname: Vo Duy Tuan </li></ul><ul><li>Email: [email_address] </li></ul><ul><li>Phone: 0938 916 902 </li></ul>Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×