Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Heavy Web Optimization: Frontend

6,339 views

Published on

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

Published in: Technology, Art & Photos

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!

×