heavy web optimization: frontend
DESCRIPTION
This slide show some main techniques to optimize speed for front-end.TRANSCRIPT
![Page 1: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/1.jpg)
Heavy Web Optimization
FRONT-END
Vo Duy Tuan – CEO/Founder
![Page 2: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/2.jpg)
$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
![Page 3: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/3.jpg)
$table_of_content
Front-end Optimization Minification CSS Sprite Domain sharding Image Optimizing HTTP Caching
![Page 4: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/4.jpg)
Front-end Optimization1
![Page 5: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/5.jpg)
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.”
![Page 6: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/6.jpg)
1.2. Front-end Optimize Theory
Reduce request Reduce size Reduce duplicated
![Page 7: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/7.jpg)
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/
![Page 8: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/8.jpg)
Minification2
![Page 9: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/9.jpg)
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
![Page 10: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/10.jpg)
2.2. Minification example: JS
![Page 11: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/11.jpg)
2.2. Minification example: CSS
![Page 12: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/12.jpg)
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/
![Page 13: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/13.jpg)
2.3. Minify in APC
![Page 14: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/14.jpg)
2.3. Minify library
![Page 15: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/15.jpg)
CSS Sprite3
![Page 16: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/16.jpg)
3.1. CSS Sprite: Case study
Menu with 3 icons & Hover change icon effect. Total 6 images.
![Page 17: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/17.jpg)
3.1. CSS Sprite: Case study
Merge 6 icons & using CSS magical background-position property to use CSS Sprite
![Page 18: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/18.jpg)
3.1. CSS Sprite: Case Study
After:
![Page 19: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/19.jpg)
3.2. CSS Sprite Showcase
![Page 20: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/20.jpg)
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.
![Page 21: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/21.jpg)
3.4. CSS Sprite
![Page 22: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/22.jpg)
Domain Sharding4
![Page 23: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/23.jpg)
4.1. Domain Sharding
![Page 24: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/24.jpg)
4.1. Domain Sharding
![Page 25: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/25.jpg)
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.
![Page 26: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/26.jpg)
4.3. Domain sharding
![Page 27: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/27.jpg)
Image Optimizing5
![Page 28: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/28.jpg)
5.1. Image Optimizing
5
![Page 29: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/29.jpg)
5.1. Image Optimizing
5
![Page 30: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/30.jpg)
5.2. Photoshop Output
5
![Page 31: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/31.jpg)
5.3. Best practice
5 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
![Page 32: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/32.jpg)
HTTP Caching6
![Page 33: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/33.jpg)
Way #1: Automatic
6
![Page 34: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/34.jpg)
Way #2: ETag - Automatic
6
![Page 35: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/35.jpg)
Way #3: Manual with Apache Mods
6
![Page 36: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/36.jpg)
6.2. Completed headers for cache
6Last-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
![Page 37: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/37.jpg)
6.3. Sample .htaccess caching with mod_headers & mod_expires
6<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>
![Page 38: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/38.jpg)
6.4. Example: Before
6
![Page 39: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/39.jpg)
6.4. Example: After
6
![Page 40: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/40.jpg)
6.5. Caching Note
6 Time of cache Way of clearing cache Other caching techniques: html cache, server
cache…
![Page 41: Heavy Web Optimization: Frontend](https://reader036.vdocuments.mx/reader036/viewer/2022062405/555a014dd8b42aa8098b4eb5/html5/thumbnails/41.jpg)
It’s time to query …
Contact:
Fullname: Vo Duy Tuan
Email: [email protected]
Phone: 0938 916 902
Thank you!