Heavy Web Optimization: Frontend
Upcoming SlideShare
Loading in...5
×
 

Heavy Web Optimization: Frontend

on

  • 4,593 views

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

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

Statistics

Views

Total Views
4,593
Views on SlideShare
2,117
Embed Views
2,476

Actions

Likes
8
Downloads
124
Comments
1

7 Embeds 2,476

http://nganhtuan.com 1243
http://bloghoctap.com 1058
http://nganhtuan.tumblr.com 91
http://www.hotskill.vn 56
http://mr80.net 26
http://dl.dropbox.com 1
http://blog.nganhtuan.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Heavy Web Optimization: Frontend Heavy Web Optimization: Frontend Presentation Transcript

  • 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 Optimization 1
  • 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/
  • Minification 2
  • 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 Sprite 3
  • 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 Sharding 4
  • 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 Optimizing 5
  • 5.1. Image Optimizing 5
  • 5.1. Image Optimizing 5
  • 5.2. Photoshop Output 5
  • 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
  • HTTP Caching 6
  • Way #1: Automatic 6
  • Way #2: ETag - Automatic 6
  • Way #3: Manual with Apache Mods 6
  • 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
  • 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
  • 6.4. Example: Before 6
  • 6.4. Example: After 6
  • 6.5. Caching Note
    • Time of cache
    • Way of clearing cache
    • Other caching techniques: html cache, server cache…
    6
    • It’s time to query …
    • Contact:
    • Fullname: Vo Duy Tuan
    • Email: [email_address]
    • Phone: 0938 916 902
    Thank you!