Heavy Web Optimization: Frontend
Download as PPT, PDF11 likes3,142 views
The document discusses various techniques for optimizing the front-end performance of websites, including minification, CSS sprites, domain sharding, image optimization, and HTTP caching. It provides examples and best practices for each technique to reduce file sizes, HTTP requests, and load times to improve user experience.
![It’s time to query … Contact: Fullname: Vo Duy Tuan Email: [email_address] Phone: 0938 916 902 Thank you!](https://image.slidesharecdn.com/frontendoptimize-111122031131-phpapp02/85/Heavy-Web-Optimization-Frontend-41-320.jpg)
Heavy Web Optimization: Frontend
- 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
- 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/
- 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
- 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
- 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.
- 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 "\.(jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif)$"> ExpiresDefault A604800 Header append Cache-Control "public" </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif)$"> 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!