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
   

   View Slide

2. @t32k
   

   View Slide

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

   View Slide

4. agenda
   - What kind of work do you do?
   - Which is slower?
   - What should we do?
   

   View Slide

5. What's kind of work
   do you do?
   

   View Slide

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

   View Slide

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

   View Slide

8. I’m front-end
   engineer.
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. developers.google.com/speed/pagespeed/insights
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. 90
    PageSpeed Score
    +
    

    View Slide

18. Which is slower?
    

    View Slide

19. Network
    vs.
    Hardware
    

    View Slide

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
    

    View Slide

21. Network is
    so heavy...
    

    View Slide

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
    

    View Slide

23. Why?
    

    View Slide

24. Chrome Developer Tools: Network Panel
    

    View Slide

25. HTTP Request Structure
    Client
    Server
    

    View Slide

26. HTTP Request Structure
    DNS Look up
    ISP
    Client
    Server
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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:
    

    View Slide

39. Round Trip Time
    RTT
    DL
    Payload Size
    

    View Slide

40. What should we do?
    

    View Slide

41. Round Trip Time
    RTT
    

    View Slide

42. CSS Sprite
    Round Trip Time
    RTT
    

    View Slide

43. Requests 30 vs. 1 (CSS Sprite)
    

    View Slide

44. View Slide

45. View Slide

46. spritegen.website-performance.org
    

    View Slide

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

    View Slide

48. Pain in the a**
    

    View Slide

49. Know me?
    

    View Slide

50. compass-style.org
    

    View Slide

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

    View Slide

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

    View Slide

53. @import "compass";
    @import "/sprites/category/*.png";
    @include all-category-sprites;
    Sass + compass
    

    View Slide

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
    

    View Slide

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
    

    View Slide

56. Yourself
    Do
    It
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. DL
    Payload Size
    

    View Slide

61. Gzip
    DL
    Payload Size
    

    View Slide

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

    View Slide

63. Make Compression
    Most Effective
    

    View Slide

64. Yourself
    Don’t
    Repeat
    

    View Slide

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

    View Slide

66. F****** CSS
    

    View Slide

67. Know me?
    

    View Slide

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

    View Slide

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

    View Slide

70. F****** CSS
    

    View Slide

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

    View Slide

72. Ensure Consistency in Code
    

    View Slide

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;
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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%
    

    View Slide

77. csscomb.com
    

    View Slide

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
    

    View Slide

79. ― Ludwig Mies van der Rohe
    God is in the detail.
    

    View Slide

80. Stop
    worrying…
    

    View Slide

81. Conclusion
    

    View Slide

82. $ What should we do?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

88. Thank you :)
    koji.ishimoto
    @kojiISHIMOTO
    t32k
    The slide design is inspired by Jina Bolton.
    Thanks to @jina :)
    

    View Slide

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/
    

    View Slide