Your SlideShare is downloading. ×
  • Like
Heavy Web Optimization: Frontend
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Heavy Web Optimization: Frontend

  • 4,315 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,315
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
127
Comments
1
Likes
8

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?
    • My Name is Võ Duy Tuấn
    • PHP 5 Zend Certified Engineer
    • Interests: PHP, Social Network, Optimize Web
    • Works:
      • Harvey Nash Technical Lead
      • Reader.vn CEO/Founder
      • Trainer
      • Freelancer
  • 3. $table_of_content
    • Front-end Optimization
    • Minification
    • CSS Sprite
    • Domain sharding
    • Image Optimizing
    • HTTP Caching
  • 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
    • Reduce request
    • Reduce size
    • Reduce duplicated
  • 7. 1.2. Performance testing tools
    • Firefox with extension:
      • Web developer
      • YSlow
    • Google Chrome Inspector
    • Google chrome with pagespeed extension
    • Charles: Web Debugging Proxy Application
    • Online Testing:
      • http://webpagetest.org/
  • 8. Minification 2
  • 9. 2.1. What is Minification?
    • Remove unnecessary characters.
    • Do not change functionality.
    • Good for Javascript, CSS.
    • Merge multiple scripts.
    • The superstar: Minify library
    • Advice:
      • Put CSS at the beginning of web page
      • Put Javascript at the bottom of web page
  • 10. 2.2. Minification example: JS
  • 11. 2.2. Minification example: CSS
  • 12. 2.3. Minify library
    • PHP 5 library
    • Support Javascript, CSS
    • Combine multiple files into a single file
    • Caching
    • Gzipping
    • Download: http://code.google.com/p/minify/
  • 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 & Hover change icon effect. Total 6 images.
  • 17. 3.1. CSS Sprite: Case study Merge 6 icons & 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:
    • SPAN tag
    • Horizontal & Vertical balance.
    • Horizontal better than vertical sprite.
    • Make room for future
    • Make sprite image small size.
  • 21. 3.4. CSS Sprite
  • 22. Domain Sharding 4
  • 23. 4.1. Domain Sharding
  • 24. 4.1. Domain Sharding
  • 25. 4.2. Best practice
    • More Domain/Sub-domain, more parallel download.
    • 2-4 domains/sub-domain is good. (DNS Lookup problem)
    • Consistent resource domain
    • Cookieless domain/subdomain for static resource requests.
  • 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
    • Do not use big image for thumbnail
    • Multiple sizes of an image
    • Using “ Save for web ” in Photoshop
    • Re-use background pattern for button, menu
    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
    • Last-modified: Thu, 18 Aug 2011 02:23:30 GMT
    • ETag: “5b8946-190ef-4aabe4c73ac80”
    • Expires: Sat, 26 Nov 2011 05:42:46 GMT
    • Cache-control: max-age=604800, public
    6
  • 37. 6.3. Sample .htaccess caching with mod_headers & mod_expires
    • <IfModule mod_expires.c>
    • ExpiresActive On
    • ExpiresDefault A0
    • <FilesMatch &quot;.(jpg|jpeg|png|gif)$&quot;>
    • Header set Cache-Control &quot;max-age=604800, public&quot;
    • </FilesMatch>
    • <FilesMatch &quot;.(jpg|jpeg|png|gif)$&quot;>
    • ExpiresDefault A604800
    • Header append Cache-Control &quot;public&quot;
    • </FilesMatch>
    • <FilesMatch &quot;.(jpg|jpeg|png|gif)$&quot;>
    • ExpiresDefault A604800
    • </FilesMatch>
    • </IfModule>
    6
  • 38. 6.4. Example: Before 6
  • 39. 6.4. Example: After 6
  • 40. 6.5. Caching Note
    • Time of cache
    • Way of clearing cache
    • Other caching techniques: html cache, server cache…
    6
  • 41.
    • It’s time to query …
    • Contact:
    • Fullname: Vo Duy Tuan
    • Email: [email_address]
    • Phone: 0938 916 902
    Thank you!