WordCamp Ubud: Performance - Moving to HTTP2

Transcript

1. Wed 29 Oct 1969
   ~ ucla$ ░
   

   View Slide

2. Wed 29 Oct 1969
   ~ ucla$ ░
   

   View Slide

3. Wed 29 Oct 1969
   ~ ucla$
   

   View Slide

4. Wed 29 Oct 1969
   ~ ucla$ lo ░
   gin
   

   View Slide

5. Wed 29 Oct 1969
   ~ ucla$ lo ░
   ░
   

   View Slide

6. Seven times faster: 

   a study in front-end optimisation
   Peter Wilson • peterwilson.cc • @pwcc
   

   View Slide

7. View Slide

8. WordPress is slow
   

   View Slide

9. Front-end code is slow
   

   View Slide

10. Bytes on the page
    

    View Slide

11. Total page size (MB)
    Nov 2011 - April 2017
    0.5
    1.0
    1.5
    2.0
    2.5
    3.0
    1 Nov '11 1 Jul '12 1 Mar '13 1 Nov '13 1 Jul '14 1 Mar '15 1 Nov '15 1 Jul '16 1 Mar '17
    httparchive.org/trends.php, April 2017
    

    View Slide

12. Assets per page
    Nov 2011 - April 2017
    20
    40
    60
    80
    100
    120
    140
    1 Nov '1115 May '121 Dec '1215 Jun '13 1 Jan '14 15 Jul '14 1 Feb '1515 Aug '151 Mar '1615 Sep '16 1 Apr '17
    httparchive.org/trends.php, March 2017
    

    View Slide

13. Webfonts
    Multiple of Nov 2011 (bytes)
    2
    4
    6
    8
    10
    12
    14
    16
    18
    1 Nov '11 15 May '12 1 Dec '12 15 Jun '13 1 Jan '14 15 Jul '14 1 Feb '15 15 Aug '15 1 Mar '16
    httparchive.org/trends.php, March 2016
    

    View Slide

14. Load time
    httparchive.org/trends.php, March 2016
    

    View Slide

15. Load time
    httparchive.org/trends.php, March 2016
    

    View Slide

16. Load time
    Start render
    Visually complete
    15.23 seconds
    

    View Slide

17. Two seconds
    

    View Slide

18. Walmart conversion rate
    slideshare.net/devonauerswald/walmart-pagespeedslide
    0 - 1
    1 - 2
    2 - 3
    3 - 4
    4 - 5
    5 - 6
    6 - 7
    7 - 8
    8 - 9
    9 - 10
    10 - 11
    11 - 12
    12 - 13
    13 - 14
    14 - 15
    15+
    

    View Slide

19. The average site kills conversions.
    

    View Slide

20. Measure a starting point
    

    View Slide

21. View Slide

22. WebPageTest - webpagetest.org
    

    View Slide

23. WebPageTest - webpagetest.org
    

    View Slide

24. Key metrics
    Document Complete Fully Loaded
    Load Time First Byte Start Render Speed Index
    DOM
    Elements
    Time Requests Bytes In Time Requests Bytes In
    3.770s 0.771s 1.789s 1834 397 3.770s 27 635 KB 4.072s 33 661 KB
    WebPageTest - webpagetest.org
    

    View Slide

25. Timeline view
    

    View Slide

26. Comparison timelines
    Additional blocking request in HTML Header
    Timed using WebPageTest - pwcc.cc/go/blocking
    0.5s 1.0s 1.5s 2.0s
    0% 0% 0% 100%
    0% 86% 100%
    Blocked
    Unblocked
    

    View Slide

27. Comparison timelines
    Additional blocking request in HTML Header
    0.5s 1.0s 1.5s 2.0s
    0% 0% 0% 100%
    0% 86% 100%
    Blocked
    Unblocked
    Timed using WebPageTest - pwcc.cc/wceu/blocking
    

    View Slide

28. 53 / 100
    Our PageSpeed score is
    you won’t believe how

    much it’s costing
    

    View Slide

29. What will get my visitors
    reading quickest?
    “
    ”
    

    View Slide

30. Doing it wrong
    

    View Slide

31. JavaScript in the footer
    

    View Slide

32. All visitors have JavaScript
    disabled while it downloads.
    – Every progressive enhancement advocate ever
    “
    ”
    

    View Slide

33. wp_enqueue_script(
    'pwcc-scripts', // handle
    '/functions.js', // source
    null, // no dependancies
    '20160624-26', // version
    true // load in footer
    );
    JavaScript, the WordPress way
    

    View Slide

34. wp_enqueue_script(
    'pwcc-scripts', // handle
    '/functions.js', // source
    null, // no dependancies
    '20160624-26', // version
    true // load in footer
    );
    true // load in footer
    JavaScript, the WordPress way
    

    View Slide

35. wp_enqueue_script(
    'pwcc-scripts', // handle
    '/functions.js', // source
    array( 'jquery' ), // jQuery loads automatically
    '20160624-26', // version
    true // load in footer
    );
    jQuery, the WordPress way
    

    View Slide

36. wp_enqueue_script(
    'pwcc-scripts', // handle
    '/functions.js', // source
    array( 'jquery' ), // jQuery loads automatically
    '20160624-26', // version
    true // load in footer
    );
    array( 'jquery' ), // jQuery loads automatically
    jQuery, the WordPress way
    

    View Slide

37. 
    
    
    
    
    
    
    
    jQuery, doing_it_wrong()
    

    View Slide

38. 
    
    
    
    
    
    
    
    
    
    jQuery, doing_it_wrong()
    

    View Slide

39. The WordPress way blocks rendering
    Daniel Zedda (CC) - flic.kr/p/a6wwAh
    

    View Slide

40. function pwcc_jquery_to_footer() {
    if ( is_admin() )
    return;
    wp_script_add_data( 'jquery', 'group', 1 );
    wp_script_add_data( 'jquery-core', 'group', 1 );
    wp_script_add_data( 'jquery-migrate', 'group', 1 );
    }
    add_action( 'wp', 'pwcc_jquery_to_footer' );
    jQuery, doing_it_wrong()
    

    View Slide

41. function pwcc_jquery_to_footer() {
    if ( is_admin() )
    return;
    wp_script_add_data( 'jquery', 'group', 1 );
    wp_script_add_data( 'jquery-core', 'group', 1 );
    wp_script_add_data( 'jquery-migrate', 'group', 1 );
    }
    add_action( 'wp', 'pwcc_jquery_to_footer' );
    wp_script_add_data( 'jquery', 'group', 1 );
    wp_script_add_data( 'jquery-core', 'group', 1 );
    wp_script_add_data( 'jquery-migrate', 'group', 1 );
    jQuery, doing_it_wrong()
    

    View Slide

42. function pwcc_jquery_to_footer() {
    if ( is_admin() )
    return;
    wp_script_add_data( 'jquery', 'group', 1 );
    wp_script_add_data( 'jquery-core', 'group', 1 );
    wp_script_add_data( 'jquery-migrate', 'group', 1 );
    }
    add_action( 'wp', 'pwcc_jquery_to_footer' );
    wp_script_add_data( 'jquery', 'group', 1 );
    wp_script_add_data( 'jquery-core', 'group', 1 );
    wp_script_add_data( 'jquery-migrate', 'group', 1 );
    jQuery, doing_it_wrong()
    

    View Slide

43. 
    
    
    
    
    
    
    
    jQuery, the WordPress way
    

    View Slide

44. 
    
    
    
    
    
    
    
    jQuery, doing_it_wrong()
    

    View Slide

45. 
    
    
    
    
    
    
    
    
    jQuery, doing_it_wrong()
    pwcc.cc/go/jqueryfooter
    

    View Slide

46. View Slide

47. Asynchronous JavaScript
    

    View Slide

48. Asynchronous JavaScript
    type='text/javascript'
    src='/path/file.js' async>
    

    View Slide

49. Asynchronous JavaScript
    type='text/javascript'
    src='/path/file.js' async>
    async
    

    View Slide

50. function pwcc_async_js( $tag, $handle ) {
    switch ( $handle ) {
    case 'pwcc-scripts' :
    $tag = str_replace( '>}
    return $tag;
    }
    Asynchronous JavaScript
    

    View Slide

51. function pwcc_async_js( $tag, $handle ) {
    switch ( $handle ) {
    case 'pwcc-scripts' : // Falls through
    case 'picturefill' :
    $tag = str_replace( '>}
    return $tag;
    }
    Asynchronous JavaScript
    

    View Slide

52. function pwcc_async_js( $tag, $handle ) {
    switch ( $handle ) {
    case 'pwcc-scripts' : // Falls through
    case 'picturefill' :
    $tag = str_replace( '>}
    return $tag;
    }
    Asynchronous JavaScript
    

    View Slide

53. switch ( $handle ) {
    case 'pwcc-scripts' : // Falls through
    case 'picturefill' :
    $tag = str_replace( '>}
    return $tag;
    }
    add_filter( 'script_loader_tag', 'pwcc_async_js', 10, 2 );
    Asynchronous JavaScript
    

    View Slide

54. function pw_async_up() {
    wp_script_add_data( 'picturefill', 'group', 0 );
    wp_script_add_data( 'pwcc-scripts', 'group', 0 );
    }
    add_action( 'wp_enqueue_scripts', 'pw_async_up' , 99 );
    Asynchronous JS in the header
    

    View Slide

55. function pw_async_up() {
    wp_script_add_data( 'picturefill', 'group', 0 );
    wp_script_add_data( 'pwcc-scripts', 'group', 0 );
    }
    add_action( 'wp_enqueue_scripts', 'pw_async_up' , 99 );
    Asynchronous JS in the header
    pwcc.cc/wceu/asyncjs
    

    View Slide

56. Browsers initiate requests
    The blocking nature of HTTP 1
    

    View Slide

57. Blockers
    HTML
    

    View Slide

58. Blockers
    HTML
    CSS
    

    View Slide

59. Blockers
    HTML
    CSS
    

    View Slide

60. Blockers
    HTML
    CSS
    IMG
    IMG
    IMG
    FONTS
    

    View Slide

61. Blockers
    HTML
    CSS
    IMG
    IMG
    IMG
    JS
    FONTS
    

    View Slide

62. Blockers
    HTML
    CSS
    IMG
    IMG
    IMG
    JS
    IFRAME
    FONTS
    

    View Slide

63. Waterfall
    WebPageTest - webpagetest.org
    

    View Slide

64. Waterfall
    WebPageTest - webpagetest.org
    

    View Slide

65. Waterfall
    HTML
    CSS
    IMG
    IMG
    IMG
    JS
    IFRAME
    FONTS
    

    View Slide

66. Waterfall
    HTML
    CSS
    IMG
    IMG
    IMG
    JS
    IFRAME
    FONTS
    

    View Slide

67. HTTP/2
    An aside
    

    View Slide

68. Everything you know about
    performance is now wrong and
    former best practices are now an
    anti-pattern and considered
    harmful.
    

    View Slide

69. These titles are
    considered harmful
    

    View Slide

70. Sites using HTTP/2
    w3techs.com, March 2016
    

    View Slide

71. caniuse.com/http2, March 2016
    

    View Slide

72. caniuse.com/http2, March 2016
    

    View Slide

73. Critical Path CSS
    

    View Slide

74. w3.org/TR/preload/
    

    View Slide

75. HTTP/2, without critical path CSS
    HTML
    CSS
    

    View Slide

76. HTTP/2, without critical path CSS
    HTML
    CSS
    

    View Slide

77. HTTP/1, with critical path CSS
    HTML
    CSS
    

    View Slide

78. 
    
    html{font-family:sans-serif;-ms-text-size-adjust:<br/>100%;-webkit-text-size-adjust:100%}body{margin:0}article,<br/>aside,details,figcaption,figure,footer,header,hgroup,main,<br/>nav,section,summary{display:block}audio,canvas,progress,<br/>video{display:inline-block;vertical-align:baseline}<br/>audio:not([controls]){display:none;height:0}[hidden],<br/>template{display:none}a{background:transparent}a:active,<br/>a:hover{outline:0}abbr[title]{border-bottom:1px dotted}<br/>b,strong{font-weight:bold}dfn{font-style:italic}h1{font-<br/>

    View Slide

79. HTTP/1, with critical path CSS
    HTML
    CSS
    

    View Slide

80. HTTP/1, without critical path CSS
    HTML
    CSS
    

    View Slide

81. HTTP/1, without critical path CSS
    HTML
    CSS
    

    View Slide

82. CSS, the WordPress way
    wp_enqueue_style(
    'pwcc-style', // handle
    get_stylesheet_uri(), // source
    array(), // no dependancies
    '20160624-26', // version
    'all' // media
    );
    

    View Slide

83. Preloading CSS
    

    View Slide

84. Preloading CSS
    

    View Slide

85. Preloading CSS
    Link: ; rel=preload; as=style; nopush
    

    View Slide

86. Preloading CSS
    Link: ; rel=preload; as=style; nopush
    

    View Slide

87. Preloading CSS
    pwcc_preload_style( 'pwcc-style' ); // push
    pwcc_preload_style( 'pwcc-style', false ); // no push
    

    View Slide

88. Server push
    pwcc_preload_style( 'pwcc-style' );
    

    View Slide

89. Server push
    if ( is_cached( 'pwcc-style' ) ) {
    pwcc_preload_style( 'pwcc-style' );
    } else /* file not cached */ {
    pwcc_preload_style( 'pwcc-style', false );
    }
    

    View Slide

90. $version = '20160624-26';
    setcookie( 'pwcc-style', $version, 0, '/' );
    Server push
    

    View Slide

91. is_cached()
    function is_cached( $handle, $version ) {
    if ( $version === $_COOKIE[ $handle ] ) {
    return true;
    }
    else {
    return false;
    }
    }
    

    View Slide

92. 
    
    html{font-family:sans-serif;-ms-text-size-adjust:<br/>100%;-webkit-text-size-adjust:100%}body{margin:0}article,<br/>aside,details,figcaption,figure,footer,header,hgroup,main,<br/>nav,section,summary{display:block}audio,canvas,progress,<br/>video{display:inline-block;vertical-align:baseline}<br/>audio:not([controls]){display:none;height:0}[hidden],<br/>template{display:none}a{background:transparent}a:active,<br/>a:hover{outline:0}abbr[title]{border-bottom:1px dotted}<br/>b,strong{font-weight:bold}dfn{font-style:italic}h1{font-<br/>

    View Slide

93. View Slide

94. pwcc.cc/go/loadcss
    

    View Slide

95. Register loadCSS
    wp_register_script(
    'pwcc-load-css', // handle
    '/loadcss.js', // file
    array(), // dependencies
    "1.2.0", // version
    true // load in footer
    );
    

    View Slide

96. /* Critical CSS */
    as='style' onload='this.rel="stylesheet"'>
    
    
    
    HTML: uncached HTTP/1
    

    View Slide

97. if ( ! is_cached( 'pwcc-style' ) && ! is_http2() ) {
    print_style_inline( 'pwcc-style' );
    wp_enqueue_script( 'pwcc-load-css' );
    }
    Inline CSS
    

    View Slide

98. if ( ! is_cached( 'pwcc-style' ) && ! is_http2() ) {
    print_style_inline( 'pwcc-style' );
    wp_enqueue_script( 'pwcc-load-css' );
    }
    Inline CSS
    pwcc.cc/wceu/rapidcss
    

    View Slide

99. 
    
    html{font-family:sans-serif;-ms-text-size-adjust:<br/>100%;-webkit-text-size-adjust:100%}body{margin:0}article,<br/>aside,details,figcaption,figure,footer,header,hgroup,main,<br/>nav,section,summary{display:block}audio,canvas,progress,<br/>video{display:inline-block;vertical-align:baseline}<br/>audio:not([controls]){display:none;height:0}[hidden],<br/>template{display:none}a{background:transparent}a:active,<br/>a:hover{outline:0}abbr[title]{border-bottom:1px dotted}<br/>b,strong{font-weight:bold}dfn{font-style:italic}h1{font-<br/>

    View Slide

100. 
     Cached Stylesheet
     

     View Slide

101. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     View Slide

102. Everything you know about
     performance is now wrong and
     former best practices are now an
     anti-pattern and considered
     harmful.
     

     View Slide

103. Everything you know about
     performance is now
     twice as complicated.
     

     View Slide

104. Thank you
     Peter Wilson • peterwilson.cc • @pwcc
     

     View Slide