Pro Yearly is on sale from $80 to $50! »

Mobile Front-end Optimization Standard:2012

4cf842e43a782a585d8707f2ba7f9a5c?s=47 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

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

November 10, 2012
Tweet

Transcript

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

    Web Developer Koji Ishimoto 2012.10.21 @Frontrend Vol.3
  2. @t32k

  3. High Performance Web Design Coding Web Performance Long Life WPO

  4. agenda - What kind of work do you do? -

    Which is slower? - What should we do?
  5. What's kind of work do you do?

  6. back-end That is... are you? front-end

  7. back-end That is... are you? front-end

  8. I’m front-end engineer.

  9. 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
  10. 1 effectiveness difficulty High Easy Difficult Low 2 3 4

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

    5 6 7 8 9 10 11 12 13 14 for front-end engineer
  12. 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
  13. 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
  14. developers.google.com/speed/pagespeed/insights

  15. 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
  16. 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
  17. 90 PageSpeed Score +

  18. Which is slower?

  19. Network vs. Hardware

  20. 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
  21. Network is so heavy...

  22. 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
  23. Why?

  24. Chrome Developer Tools: Network Panel

  25. HTTP Request Structure Client Server

  26. HTTP Request Structure DNS Look up ISP Client Server

  27. HTTP Request Structure DNS Look up ISP Client Server DNS

    Lookup
  28. HTTP Request Structure DNS Look up ISP Client Server DNS

    Lookup First Connect
  29. HTTP Request Structure Set TCP Connection DNS Look up ISP

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

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

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

    Send Data Receive Data Client Server DNS Lookup Connecting First Connect First HTTP Request
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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:
  39. Round Trip Time RTT DL Payload Size

  40. What should we do?

  41. Round Trip Time RTT

  42. CSS Sprite Round Trip Time RTT

  43. Requests 30 vs. 1 (CSS Sprite)

  44. None
  45. None
  46. spritegen.website-performance.org

  47. spritegen.website-performance.org No Retina!

  48. Pain in the a**

  49. Know me?

  50. compass-style.org

  51. t32k at MacBookPro in ~ $ gem install compass $

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

    compass create my_project $ cd /my_project $ compass watch Command line
  53. @import "compass"; @import "/sprites/category/*.png"; @include all-category-sprites; Sass + compass

  54. .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
  55. .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
  56. Yourself Do It

  57. // 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
  58. $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
  59. .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
  60. DL Payload Size

  61. Gzip DL Payload Size

  62. github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/htaccess.md

  63. Make Compression Most Effective

  64. Yourself Don’t Repeat

  65. .foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;

    border-radius: 5px; } CSS
  66. F****** CSS

  67. Know me?

  68. @import "compass"; .foo { @include border-radius(5px); } Sass + compass

  69. .foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;

    border-radius: 5px; } Output CSS
  70. F****** CSS

  71. developers.google.com/speed/articles/gzip

  72. Ensure Consistency in Code

  73. .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; }
  74. .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
  75. .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
  76. .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%
  77. csscomb.com

  78. 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
  79. ― Ludwig Mies van der Rohe God is in the

    detail.
  80. Stop worrying…

  81. Conclusion

  82. $ What should we do?

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

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

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

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

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

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

    inspired by Jina Bolton. Thanks to @jina :)
  89. 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/