Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Front-end Optimization Standard:2012

Koji Ishimoto
November 10, 2012

Mobile Front-end Optimization Standard:2012

Sass/Compass/CSS Sprite/Gzip/

Minimize HTTP Requests! Requests 30 vs 1 (CSS Sprite) - YouTube
http://www.youtube.com/watch?v=s__XwfwxMW8

Koji Ishimoto

November 10, 2012
Tweet

More Decks by Koji Ishimoto

Other Decks in Design

Transcript

  1. Standard : 2012 Mobile Front End Optimization Internet Business Headquarters

    Web Developer Koji Ishimoto 2012.10.21 @Frontrend Vol.3
  2. agenda - What kind of work do you do? -

    Which is slower? - What should we do?
  3. 1. Make Fewer HTTP Requests 2. Use a Content Delivery

    Network (CDN) 3. Add Expires or Cache-Control Header 4. Gzip Components 5. Put Stylesheets at Top 6. Put Scripts at Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript and CSS 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make Ajax Cacheable Best Practices for Speeding Up Your Web Site by Yahoo! Developer Network
  4. 1 effectiveness difficulty High Easy Difficult Low 2 3 4

    5 6 7 8 9 10 11 12 13 14 for front-end engineer
  5. 1 effectiveness difficulty High Easy Difficult Low 2 3 4

    5 6 7 8 9 10 11 12 13 14 for front-end engineer
  6. Front-end Task 1. Make Fewer HTTP Requests 5. Put Stylesheets

    at Top 6. Put Scripts at Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External ------------------------------- 9. Reduce DNS Lookups 12. Remove Duplicate Scripts
  7. Front-end Task 1. Make Fewer HTTP Requests 5. Put Stylesheets

    at Top 6. Put Scripts at Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External ------------------------------- 9. Reduce DNS Lookups 12. Remove Duplicate Scripts
  8. Back-end Task 2. Use a Content Delivery Network (CDN) 3.

    Add Expires or Cache-Control Header 4. Gzip Components ------------------------------- 10. Minify JavaScript and CSS 11. Avoid Redirects 13. Configure ETags 14. Make Ajax Cacheable
  9. Back-end Task 2. Use a Content Delivery Network (CDN) 3.

    Add Expires or Cache-Control Header 4. Gzip Components ------------------------------- 10. Minify JavaScript and CSS 11. Avoid Redirects 13. Configure ETags 14. Make Ajax Cacheable
  10. Over the next decade, Internet bandwidth will likely become 57

    times faster, while computers will become 100 times more powerful. Mobile Sites vs. Apps: e Coming Strategy Shi
  11. 1,000 1,500 2,000 2,500 3,000 3,500 1Mbps 2Mbps 3Mbps 4Mbps

    5Mbps 6Mbps 7Mbps 8Mbps 9Mbps 10Mbps Page Load Time per Bandwidth (ms) More Bandwidth Doesn’t Matter (Much) « Mike's Lookout
  12. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Client Server DNS Lookup First Connect
  13. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Client Server DNS Lookup Connecting First Connect
  14. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Client Server DNS Lookup Connecting First Connect First HTTP Request
  15. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Send Data Receive Data Client Server DNS Lookup Connecting First Connect First HTTP Request
  16. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Send Data Receive Data Client Server DNS Lookup Connecting Waiting First Connect First HTTP Request
  17. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting First Connect First HTTP Request
  18. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request
  19. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request RTT
  20. HTTP Request Structure Set TCP Connection DNS Look up ISP

    Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request RTT DL
  21. DNS resolution time. Elapsed time required to create a TCP

    connection. Elapsed time spent in a browser queue waiting for a network connection. Time needed to send request data to the server. Waiting for the response (till the first byte is received from the server). Time necessary to download response body. DNS Lookup: Connecting: Blocking: Sending: Waiting: Receiving:
  22. t32k at MacBookPro in ~ $ gem install compass $

    compass create my_project $ cd /my_project $ compass watch Command line
  23. t32k at MacBookPro in ~ $ gem install compass $

    compass create my_project $ cd /my_project $ compass watch Command line
  24. .category-sprite, .category-chat, .category- fav, .category-home, .category-love, .category- mind, .category-new, .category-nightlife,

    .category-work { background: url(/sprites/category-s87c70fb891.png) no- repeat; } .category-chat { background-position: 0 -168px; } .category-fav { background-position: 0 -42px; } .category-home { background-position: 0 -294px; } .category-love { background-position: 0 -252px; } .category-mind { background-position: 0 -84px; } .category-new { background-position: 0 -210px; } .category-nightlife { background-position: 0 0; } .category-work { background-position: 0 -126px; } CSS
  25. .category-sprite, .category-chat, .category- fav, .category-home, .category-love, .category- mind, .category-new, .category-nightlife,

    .category-work { background: url(/sprites/category-s87c70fb891.png) no- repeat; } .category-chat { background-position: 0 -168px; } .category-fav { background-position: 0 -42px; } .category-home { background-position: 0 -294px; } .category-love { background-position: 0 -252px; } .category-mind { background-position: 0 -84px; } .category-new { background-position: 0 -210px; } .category-nightlife { background-position: 0 0; } .category-work { background-position: 0 -126px; } CSS
  26. // For Retina @2x @mixin sprites($map, $map-item, $isCommon:false) { @if

    $isCommon { display: inline-block; background-image: sprite-url($map); background-repeat: no-repeat; background-size: (image-width(sprite-path($map)) / 2) (image- height(sprite-path($map)) / 2); } @else { $pos-y: round(nth(sprite-position($map, $map-item), 2) / 2); width: image-width(sprite-file($map, $map-item)) / 2; height: image-height(sprite-file($map, $map-item)) / 2; background-position: 0 $pos-y; } } @mixin
  27. $sprites-category: sprite-map("sprites/category/*.png"); .common-property { @include sprites($sprites-category, foo, true); } .indivisual-property-fav

    { @include sprites($sprites-category, fav, false); } .indivisual-property-chat { @include sprites($sprites-category, chat, false); } Usage
  28. .common-property { display: inline-block; background-image: url('/images/sprites/category-s13fa409ec6.png'); background-repeat: no-repeat; background-size: 21px

    168px; } .indivisual-property-fav { width: 21px; height: 21px; background-position: 0 -21px; } .indivisual-property-chat { width: 21px; height: 21px; background-position: 0 -84px; } CSS
  29. .foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px;

    border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } CSS .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  30. .foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px;

    border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Uncompressed: .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 416B
  31. .foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px;

    border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Compressed: .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 122B 130B
  32. .foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px;

    border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } CSS .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } -69% -71%
  33. For example, on Google's search results page, when HTML attributes

    were alphabetized, a 1.5% reduction in the size of the gzipped output resulted. Minimize payload size - Make the Web Faster
  34. $ What should we do? >> Focus on front end

    task $ What should we do?
  35. $ What should we do? >> Focus on front end

    task $ What should we do? >> Improve network phase
  36. $ What should we do? >> Focus on front end

    task $ What should we do? >> Improve network phase $ What should we do?
  37. $ What should we do? >> Focus on front end

    task $ What should we do? >> Improve network phase $ What should we do? >> Minimize RTT + payload size
  38. Thank you :) koji.ishimoto @kojiISHIMOTO t32k The slide design is

    inspired by Jina Bolton. Thanks to @jina :)
  39. photo credit - http://www.flickr.com/photos/expose_switch/4566783151/ - http://www.flickr.com/photos/ivko999/5082864854/ - http://www.flickr.com/photos/peasap/4684467836/ - http://www.flickr.com/photos/emrank/2191608962/

    - http://www.flickr.com/photos/spilt-milk/6042115943/ - http://www.flickr.com/photos/avidlyabide/7509737450/ - http://www.flickr.com/photos/hinkelstone/2435823037/ - http://www.flickr.com/photos/alex-d/2770828285/ - http://www.flickr.com/photos/expose_switch/4566783201/ - http://www.flickr.com/photos/expose_switch/4566783171/