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

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)
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/