Upload
vo-duy-tuan
View
4.446
Download
1
Tags:
Embed Size (px)
DESCRIPTION
This slide show some main techniques to optimize speed for front-end.
Citation preview
Heavy Web Optimization
FRONT-END
Vo Duy Tuan – CEO/Founder
$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
$table_of_content
Front-end Optimization Minification CSS Sprite Domain sharding Image Optimizing HTTP Caching
Front-end Optimization1
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.”
1.2. Front-end Optimize Theory
Reduce request Reduce size Reduce duplicated
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/
Minification2
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
2.2. Minification example: JS
2.2. Minification example: CSS
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/
2.3. Minify in APC
2.3. Minify library
CSS Sprite3
3.1. CSS Sprite: Case study
Menu with 3 icons & Hover change icon effect. Total 6 images.
3.1. CSS Sprite: Case study
Merge 6 icons & using CSS magical background-position property to use CSS Sprite
3.1. CSS Sprite: Case Study
After:
3.2. CSS Sprite Showcase
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.
3.4. CSS Sprite
Domain Sharding4
4.1. Domain Sharding
4.1. Domain Sharding
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.
4.3. Domain sharding
Image Optimizing5
5.1. Image Optimizing
5
5.1. Image Optimizing
5
5.2. Photoshop Output
5
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
HTTP Caching6
Way #1: Automatic
6
Way #2: ETag - Automatic
6
Way #3: Manual with Apache Mods
6
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
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>
6.4. Example: Before
6
6.4. Example: After
6
6.5. Caching Note
6 Time of cache Way of clearing cache Other caching techniques: html cache, server
cache…
It’s time to query …
Contact:
Fullname: Vo Duy Tuan
Email: [email protected]
Phone: 0938 916 902
Thank you!