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

    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