Your SlideShare is downloading. ×
0
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
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

Heavy Web Optimization: Frontend

4,463

Published on

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

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,463
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
132
Comments
1
Likes
9
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. Heavy Web Optimization FRONT-END Vo Duy Tuan – CEO/Founder
  • 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. $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. Front-end Optimization 1
  • 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. 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. 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. Minification 2
  • 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. 2.2. Minification example: JS
  • 11. 2.2. Minification example: CSS
  • 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. 2.3. Minify in APC
  • 14. 2.3. Minify library
  • 15. CSS Sprite 3
  • 16. 3.1. CSS Sprite: Case study Menu with 3 icons &amp; Hover change icon effect. Total 6 images.
  • 17. 3.1. CSS Sprite: Case study Merge 6 icons &amp; using CSS magical background-position property to use CSS Sprite
  • 18. 3.1. CSS Sprite: Case Study After:
  • 19. 3.2. CSS Sprite Showcase
  • 20. 3.3. CSS Sprite Best Practice: <ul><li>SPAN tag </li></ul><ul><li>Horizontal &amp; 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. 3.4. CSS Sprite
  • 22. Domain Sharding 4
  • 23. 4.1. Domain Sharding
  • 24. 4.1. Domain Sharding
  • 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. 4.3. Domain sharding
  • 27. Image Optimizing 5
  • 28. 5.1. Image Optimizing 5
  • 29. 5.1. Image Optimizing 5
  • 30. 5.2. Photoshop Output 5
  • 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. HTTP Caching 6
  • 33. Way #1: Automatic 6
  • 34. Way #2: ETag - Automatic 6
  • 35. Way #3: Manual with Apache Mods 6
  • 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. 6.3. Sample .htaccess caching with mod_headers &amp; mod_expires <ul><li>&lt;IfModule mod_expires.c&gt; </li></ul><ul><li>ExpiresActive On </li></ul><ul><li>ExpiresDefault A0 </li></ul><ul><li>&lt;FilesMatch &amp;quot;.(jpg|jpeg|png|gif)$&amp;quot;&gt; </li></ul><ul><li> Header set Cache-Control &amp;quot;max-age=604800, public&amp;quot; </li></ul><ul><li>&lt;/FilesMatch&gt; </li></ul><ul><li>&lt;FilesMatch &amp;quot;.(jpg|jpeg|png|gif)$&amp;quot;&gt; </li></ul><ul><li> ExpiresDefault A604800 </li></ul><ul><li> Header append Cache-Control &amp;quot;public&amp;quot; </li></ul><ul><li>&lt;/FilesMatch&gt; </li></ul><ul><li>&lt;FilesMatch &amp;quot;.(jpg|jpeg|png|gif)$&amp;quot;&gt; </li></ul><ul><li> ExpiresDefault A604800 </li></ul><ul><li>&lt;/FilesMatch&gt; </li></ul><ul><li>&lt;/IfModule&gt; </li></ul>6
  • 38. 6.4. Example: Before 6
  • 39. 6.4. Example: After 6
  • 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. <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!

×