Yow West - Performance: The path to HTTP/2 is Full of Potholes

HTTP2 is here to solve all our performance woes. Well, not quite, even on websites that enable it, a significant proportion of traffic uses the older, slower protocol. It’s our job as web developers to account for both.

Everything just got a whole lot more complicated.

Discover some of the techniques available to developers during this transitional period, the new catches in HTTP2 and – importantly – how to keep your visitors from giving up before your site even loads.

Transcript

1. Wed 29 Oct 1969
   ~ ucla$ ░
   

   View Slide

2. Wed 29 Oct 1969
   ~ ucla$ ░
   

   View Slide

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

   View Slide

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

   View Slide

5. Peter Wilson • peterwilson.cc • @pwcc
   Performance: 

   The path to HTTP/2 is Full of Potholes
   

   View Slide

6. View Slide

7. Linnaea Mallette
   

   View Slide

8. Today
   

   View Slide

9. Bytes on the page
   

   View Slide

10. 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

11. Total page size
    Percent of Nov 2011
    50%
    100%
    150%
    200%
    250%
    300%
    350%
    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 2016
    

    View Slide

12. Assets per page
    Nov 2011 - March 2016
    20
    40
    60
    80
    100
    120
    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

13. Webfonts
    Multiple of Nov 2011 (requests)
    5
    10
    15
    20
    25
    30
    35
    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 2016
    

    View Slide

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

    View Slide

15. Load time
    Start render: 4.2 seconds
    

    View Slide

16. Load time
    Visually complete: 12.7 seconds
    

    View Slide

17. Load time
    Document complete: 15.23 sec
    

    View Slide

18. 
    
    
    Herbie:
    Fully Loaded star Lindsay
    Lohan
    
    Australian from London color="#FF6633">Clive James
    
    Stand-up comedian color="#FF6633">Charlie Pickering
    
    Jebediah
    

    View Slide

19. View Slide

20. Money
    

    View Slide

21. View Slide

22. 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

23. Shopzilla: 12% revenue increase
    globaldots.com/how-website-speed-affects-conversion-rates
    

    View Slide

24. Yahoo!: 9% traffic increase
    globaldots.com/how-website-speed-affects-conversion-rates
    

    View Slide

25. [A] slowdown of one second could
    cost [Amazon] $1.6 billion in sales
    pwcc.cc/go/1.6billion
    

    View Slide

26. [A] slowdown of one second could
    cost [Amazon] $1.6 billion in sales
    Esther Vargas (CC) - flic.kr/p/fstSrg
    

    View Slide

27. Each 100ms delay costs 1% of sales
    pwcc.cc/go/amazon (ppt)
    

    View Slide

28. Measure a starting point
    

    View Slide

29. View Slide

30. View Slide

31. WebPageTest - webpagetest.org
    

    View Slide

32. WebPageTest - webpagetest.org
    

    View Slide

33. 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

34. Timeline view
    

    View Slide

35. 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

36. 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

37. 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

38. 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

39. Speed index
    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

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

    much it’s costing
    

    View Slide

41. World Super Cars at English Wikipedia (CC) • VIA Gallery (CC) - flic.kr/p/5QTEFc
    

    View Slide

42. ~$
    

    View Slide

43. ~$ nslookup example.com
    

    View Slide

44. ~$ nslookup example.com
    Non-authoritative answer:
    Name:example.com
    Address: 117.53.163.91
    ~$
    

    View Slide

45. ~$
    

    View Slide

46. ~$ telnet 117.53.163.91 80
    

    View Slide

47. ~$ telnet 117.53.163.91 80
    Connected to 117.53.163.91.
    

    View Slide

48. ~$ telnet 117.53.163.91 80
    Connected to 117.53.163.91.
    GET / HTTP/1.1
    Host: example.com
    

    View Slide

49. ~$ telnet 117.53.163.91 80
    Connected to 117.53.163.91.
    GET / HTTP/1.1
    Host: example.com
    fallbacks: {
    simplifyAll:"off",
    nextSlideOnWindowFocus:"off",
    disableFocusListener:false,
    }
    });
    }
    }); /*ready*/
    
    
    
    
    
    
    <br/>/* <![CDATA[ */<br/>var scriptParams = {"google_search_engine_id":"017877086915232438708:-pvqphefyyw"};<br/>/* ]]> */<br/>
    
    
    <br/>/* <![CDATA[ */<br/>var qpprFrontData = {"linkData":{"http:\/\/example.com\/?p=3925":[0,1,"http:\/\/example.com\/?p=3893"],"http:\/\/example.com\/blog\/2014\/10\/sponsorship-directory\/":[0,1,""],"http:\/\/example.com\/?p=4437":[0,1,"http:\/\/example.com\/centrestage"],"http:\/\/example.com\/?<br/>p=4522":[0,1,"http:\/\/example.com\/blog\/vacancy\/2015-radiothon-fundraising-events-coordinator\/"],"http:\/\/example.com\/blog\/2015\/05\/remember-joy-join\/":[0,1,""],"http:\/\/example.com\/blog\/2015\/06\/taste-of-radio\/":[0,1,"http:\/\/example.com\/training\/taste-of-<br/>radio\/"],"http:\/\/example.com\/blog\/2015\/06\/new-music-to-weekdays\/":[0,1,"http:\/\/example.com\/music"],"http:\/\/example.com\/?p=4916":[0,1,"http:\/\/example.com\/rebel-heart-tour\/"],"http:\/\/example.com\/blog\/2015\/07\/centre-stage-the-winners\/":[0,1,"http:\/\/<br/>example.com\/centrestage"],"http:\/\/example.com\/blog\/2015\/08\/latest-podcasts\/":[0,1,"http:\/\/example.com\/podcasts"],"http:\/\/example.com\/?p=5079":[0,1,"https:\/\/www.surveymonkey.com\/r\/joy949survey"],"http:\/\/example.com\/blog\/2015\/12\/volunteer-vacancies\/":<br/>[0,1,"http:\/\/example.com\/vacancies-category\/volunteer\/"],"http:\/\/example.com\/blog\/2015\/11\/94days-of-summer-is-coming\/":[0,1,""],"http:\/\/example.com\/?p=5282":[0,1,"https:\/\/www.outix.net\/booktickets\/event\/JOYFundraiserDanish"],"http:\/\/example.com\/blog\/2016\/<br/>02\/new-taste-radio-dates\/":[0,1,"http:\/\/example.com\/training\/taste-of-radio\/"]},"siteURL":"http:\/\/example.com","siteURLq":"http:\/\/example.com"};<br/>/* ]]> */<br/>
    
    
    <br/>/* <![CDATA[ */<br/>var zoomOptions = [];<br/>/* ]]> */<br/>
    
    
    
    
    
    <br/>/* <![CDATA[ */<br/>var JQLBSettings = {"showTitle":"1","showCaption":"1","showNumbers":"1","fitToScreen":"1","resizeSpeed":"400","showDownload":"0","navbarOnTop":"0","marginSize":"20","slideshowSpeed":"4000","prevLinkTitle":"previous image","nextLinkTitle":"next image","closeTitle":"close image<br/>gallery","image":"Image ","of":" of ","download":"Download","pause":"(pause slideshow)","play":"(play slideshow)"};<br/>/* ]]> */<br/>
    
    
    
    <br/>/* <![CDATA[ */<br/>var mejsL10n = {"language":"en-US","strings":{"Close":"Close","Fullscreen":"Fullscreen","Download File":"Download File","Download Video":"Download Video","Play\/Pause":"Play\/Pause","Mute Toggle":"Mute Toggle","None":"None","Turn off Fullscreen":"Turn off Fullscreen","Go<br/>Fullscreen":"Go Fullscreen","Unmute":"Unmute","Mute":"Mute","Captions\/Subtitles":"Captions\/Subtitles"}};<br/>var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/"};<br/>/* ]]> */<br/>
    
    
    
    
    
    <br/>/* <![CDATA[ */<br/>var JOYTwitter_config = {"ajaxurl":"https:\/\/example.com\/wp-admin\/admin-ajax.php","sec":"ecaf121956"};<br/>/* ]]> */<br/>
    
    
    
    window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"70c3bbd35e","applicationID":"1953133","transactionName":"M1RRZ0FUX0ZTV0ZRWAoeclBHXF5bHV1cXFIc","queueTime":0,"applicationTime":<br/>1036,"atts":"HxNSEQlOTEg=","errorBeacon":"bam.nr-data.net","agent":""}

    View Slide

50. View Slide

51. Assets on a page
    

    View Slide

52. Blockers
    HTML
    

    View Slide

53. Blockers
    HTML
    CSS
    

    View Slide

54. Blockers
    HTML
    CSS
    IMG
    IMG
    IMG
    FONTS
    

    View Slide

55. Blockers
    HTML
    CSS
    IMG
    IMG
    IMG
    JS
    FONTS
    

    View Slide

56. Blockers
    HTML
    CSS
    IMG
    IMG
    IMG
    JS
    IFRAME
    FONTS
    

    View Slide

57. Waterfall
    WebPageTest - webpagetest.org
    

    View Slide

58. Waterfall
    WebPageTest - webpagetest.org
    

    View Slide

59. Waterfall
    WebPageTest - webpagetest.org
    

    View Slide

60. Waterfall
    WebPageTest - webpagetest.org
    

    View Slide

61. But, we have HTTP/2 now.
    

    View Slide

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

    View Slide

63. These titles are
    considered harmful
    

    View Slide

64. caniuse.com/http2, March 2016
    

    View Slide

65. caniuse.com/http2, March 2016
    

    View Slide

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

    View Slide

67. Traffic
    

    View Slide

68. Your site running HTTP/2
    

    View Slide

69. HTTP/2
    A fictional guide
    

    View Slide

70. n¾I®L3æ©Í#t\Qòα`ÐݳAàWøCÀcUÛ%ųd|Äæ½BøwÒ$qk¡GáÄÃÉüª½ÁîHõõ¾uIG:CÛ»>ñ
    e½ÚësÃ(*áyì:V÷äÔmeê1É62ðÀúæ¾ñ¿´ÝVèíR6ªR~vË÷=ñÇÏéÞµU¸$ãJçÄgW¤Õ¬RÂ>wbý
    ¶u}¡AtNéSÏ|úÔ/ntùMÌ 9ë×ìì#6fÝÓåSò·¯µe^xfÈØqé×ÔøÜ65ÊM«£e¡ÿÕþ³{®èfy¥ay¼3FeÏÞÉÈ?Zñßé:Ýé¡Ü±ùòÆvqÆp9ï^á{«Ùéz£ÉË,I,rD©óUþèÉãóïìû[yçëh¨
    ÈbO cþ@ÌpÍNÐI¯#äñÕ#RMÉn¯øï¦yÐ)óüÊÀpÄ·#¦x¯LðÆýAµyÅ«w"\3âC}z}ÆjÜÇr4«·
    6ÐÛÁqQÐƹ«´Ü’ÞÏäÕ¥8ÉY¾Úm±ÅÌ1ä¡úyY/|¤ÌCï1sÆWk&°còáPÅ0{uúþuñ;øçÄcqáù@©
    uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})
    àØ#E«köÚ6²+!L²”»~÷ºúG5åѧ:óP}¼Î,4§V\±G»×.z]¤þh¼bÙ/Ë)áIèõÔIá}Ré,.¢nß7
    ÷*SjTÛÙÈïõºýÀZÂmVo5Ì~^Ѥq¹úã.k°ÿ{B(8¦îд0s´Eòd÷×Øá2YƵ;úiºÑ7Ö_ä~%Ðü
    Sâ½U¯¯¥q*ªsìá¶Ø9ÈQÇ9â¹H|¨Ù_AÚÃ-ÌIJD¡fAÆpTnà1^õq§^M¬I{r¢îÝäòyi)1AÉÍÖÕ
    üWâ¯Æ·n.|¼!óùñçÕ7$¡RNyIÊþ·]ü¼¯sZØJî|®èר\ÜɶBIbm-ÆøFxÁ®:ûLA!yPäûqÅ}!
    y¨Ã5âHm£mÞlɽTç/2zy#5ôÏßÄ×s]|ç¶qÅqúR=Ñy¼öû¯ñ§Fö1oW²Ä3òüC×+×txÔ§ÅÒ8sçïÜó×ùê¸IÔnUßשÇRHñO[^©YT&:t®
    VÆ+Õ]£rô¯j½XÛܨt¯$Ô`67*Ð>¦¼ìe*{[=ÏMkÙþîGá^´Úm¦°q4È¥äNsô¯Ðç0ʾcd~Uë÷v
    zÝÝG0-Á#;DoqßÐäWÏá)èÚG·ÖäÕíøÿÖý÷Ó¾+k×{ìw+påß*2Y’Á>ßzm¯þ×7cs+é_%éú=ÍÌ
    æuQo’÷¢ÀÁ=Ï~kÓôÝ3^Ó7UvÁÎÖãÔtλM¤ù<15÷VÞ;ÖRíFïëRÄ·7ùÎINCXZu¡°Ê÷Ûã##5Ñ
    uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})
    ÷*SjTÛÙÈïõºýÀZÂmVo5Ì~^Ѥq¹úã.k°ÿ{B(8¦îд0s´Eòd÷×Øá2YƵ;úiºÑ7Ö_ä~%Ðü
    

    View Slide

71. ~$
    

    View Slide

72. ~$ ssh 117.53.163.91 443
    Connected to 117.53.163.91.
    

    View Slide

73. ~$ ssh 117.53.163.91 443
    Connected to 117.53.163.91.
    Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    

    View Slide

74. ~$ ssh 117.53.163.91 443
    Connected to 117.53.163.91.
    Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    

    View Slide

75. ~$ ssh 117.53.163.91 443
    Connected to 117.53.163.91.
    Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    

    View Slide

76. ~$ ssh 117.53.163.91 443
    Connected to 117.53.163.91.
    Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    

    View Slide

77. Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    

    View Slide

78. Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    

    View Slide

79. Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    

    View Slide

80. Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    GET /style.css HTTP/2
    GET /script.js HTTP/2
    .comment-respond{clear:both}
    @media only screen and (min-width:35em){.comment-form>div{width:50%;float:left}
    .Comment .comment-form>div{width:auto;float:none}
    .comment-form>div:nth-child(2n){padding-right:1rem}
    .Comment .comment-form>div:nth-child(2n){padding-right:0}
    .comment-form>div:nth-child(2n-1){padding-left:1rem}
    .Comment .comment-form>div:nth-child(2n-1){padding-left:0}
    .comment-form>.comment-form_comment.comment-form_comment{width:auto;clear:left;float:none;padding-left:0;padding-right:0}
    .comment-form_comment ~ div:nth-child(2n){padding-left:1rem;padding-right:0}
    .Comment .comment-form_comment ~ div:nth-child(2n){padding-left:0}
    .comment-form_comment ~ div:nth-child(2n-1){padding-right:1rem;padding-left:0}
    .Comment .comment-form_comment ~ div:nth-child(2n-1){padding-right:0}
    .comment-form_comment ~ :nth-child(2n-1),.comment-form_comment ~ .form-submit{clear:left}
    }
    .SocialShare{color:#bdc2c7}
    .SocialShare_Title{font-size:13px;font-size:0.8125rem;text-transform:uppercase;line-height:1.8461538462;margin-bottom:0}
    .SocialShare_List{list-style:none;margin-left:0}
    .SocialShare_List>li{margin-bottom:0;font-size:13px;font-size:0.8125rem}
    .SocialLink,.SocialLink:visited{color:inherit;font-size:13px;font-size:0.8125rem;line-height:1.6923076923;min-width:3rem;display:inline-block;text-decoration:none;border:1px solid;border-radius:3px;margin-bottom:.
    5rem;padding-right:.3em}
    .SocialLink:hover,.SocialLink:focus,.SocialLink:active{color:inherit;text-decoration:none}
    .SocialLink_Count{visibility:hidden}
    .SocialLink:hover .SocialLink_Count,.SocialLink:focus .SocialLink_Count,.SocialLink_Count .SocialLink:active{visibility:visible}
    .Comment{font-size:14px;font-size:0.875rem;line-height:1.7142857143;display:block}
    .Comment,.Comment p,.Comment blockquote,.Comment pre{margin-bottom:1.7142857143em}
    .Comment-withAvatar{margin-left:64px;min-height:56px}
    .Comment_Meta{color:#bdc2c7}
    .Comment_Avatar{width:48px;height:48px;position:absolute;margin-top:4px;margin-left:-64px}
    .Comment_Avatar>img{width:48px;height:48px}
    .Comment_Name,.Comment_Time,.Comment_Time>a{font-family:inherit;font-size:inherit;text-transform:inherit;font-weight:inherit;font-style:inherit;margin-bottom:0}
    .Comment_Name{float:left}
    .Comment_Time{float:right}
    .Comment_Time>a{color:inherit}
    .Comment_Moderation.Comment_Moderation{margin-bottom:0;font-style:italic}
    .Comment_Body{clear:right}
    .Comment-withAvatar .Comment_Body{float:left}
    .Comment_Body :last-child{margin-bottom:0}
    .comment-reply-link,.comment-reply-link:visited{color:#bdc2c7;text-transform:uppercase}
    .comment-reply-link:hover,.comment-reply-link:focus,.comment-reply-link:visited{color:#bdc2c7}
    .CommentList{margin-left:0;display:block}
    .CommentList+.Pagination{margin-bottom:6rem}
    .Section{margin-bottom:6rem;margin-left:1em;margin-right:1em}
    @media only screen and (min-width:48em){.Section{margin-left:6em;margin-right:6em}
    }
    .PostList{list-style:none;margin-left:0}
    .PostList_Post{margin-bottom:6rem}
    .PostList_Post-NoExcerpt{margin-bottom:3rem}
    .more-link{display:block;margin-top:1.5em}
    .Page_Main{padding-top:1.5rem;padding-bottom:1.5rem;background-color:#fff}
    .Page_Footer{padding-top:1.5rem}
    @media (min-width:60em){.Page_Header{float:left;width:220px}
    .Page_Main{float:left;width:calc( 100% - 440px )}
    .Page_Sidebar{float:left;width:220px;min-height:50px}
    .Page_Footer{clear:both}
    }
    .t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:1rem;margin-right:1rem}
    @media only screen and (min-width:48em){.t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:6rem;margin-right:6rem}
    }
    .Pagination-PrevNextPost{margin-bottom:3rem}
    .EntryMeta{position:relative}
    .EntryMeta .SocialShare_List>li{display:inline-block;padding-right:.25em}
    @media only screen and (min-width:60em){.EntryMeta .SocialShare_List>li{display:list-item}
    .EntryMeta .SocialShare{position:absolute;width:70px;background:white;top:0;left:100%;padding-left:.5rem;padding-top:2em;left:calc( 100% + 6rem )}
    }
    .fluid-width-video-wrapper{width:100%;max-width:126.6666666667vh;position:relative;padding:0;margin-left:auto;margin-right:auto}
    .fluid-width-video-wrapper:before{display:block;width:100%;padding-top:75%;content:' '}
    .fluid-width-video-wrapper>iframe,.fluid-width-video-wrapper>object,.fluid-width-video-wrapper>embed{position:absolute;top:0;left:0;width:100%;height:100%}
    .alignleft{float:left;margin-right:1em;margin-bottom:1em;margin-left:-1rem}
    @media only screen and (min-width:60em){.alignleft{margin-left:-5rem}
    }
    .alignright{float:right;margin-left:1em;margin-bottom:1em;margin-right:-1rem}
    @media only screen and (min-width:60em){.alignright{margin-right:-5rem}
    }
    .instagram-image .keyring-img,.wp-post-image,figure.alignnone,img.alignnone,.aligncenter{display:block;margin-left:auto;margin-right:auto}
    .post-password-form label{color:#bdc2c7;font-size:13px;font-size:0.8125rem;line-height:1.2307692308;text-transform:uppercase;display:block;margin-bottom:.5rem}
    .post-password-form [type=password]{width:100%;border-radius:2px;color:#2a2b2b;background-color:#f3f3f3;font-size:14px;font-size:0.875rem;line-height:1.7142857143;border-width:1px;outline:none;padding:calc( .5rem -
    1px ) 0.75rem;border-style:solid;border-color:#f3f3f3}
    

    View Slide

81. n¾I®L3æ©Í#t\Qòα`ÐݳAàWøCÀcUÛ%ųd|Äæ½BøwÒ$qk¡GáÄÃÉüª½ÁîHõõ¾uIG:CÛ»>ñ
    e½ÚësÃ(*áyì:V÷äÔmeê1É62ðÀúæ¾ñ¿´ÝVèíR6ªR~vË÷=ñÇÏéÞµU¸$ãJçÄgW¤Õ¬RÂ>wbý
    ¶u}¡AtNéSÏ|úÔ/ntùMÌ 9ë×ìì#6fÝÓåSò·¯µe^xfÈØqé×ÔøÜ65ÊM«£e¡ÿÕþ³{®èfy¥ay¼3FeÏÞÉÈ?Zñßé:Ýé¡Ü±ùòÆvqÆp9ï^á{«Ùéz£ÉË,I,rD©óUþèÉãóïìû[yçëh¨
    ÈbO cþ@ÌpÍNÐI¯#äñÕ#RMÉn¯øï¦yÐ)óüÊÀpÄ·#¦x¯LðÆýAµyÅ«w"\3âC}z}ÆjÜÇr4«·
    6ÐÛÁqQÐƹ«´Ü’ÞÏäÕ¥8ÉY¾Úm±ÅÌ1ä¡úyY/|¤ÌCï1sÆWk&°còáPÅ0{uúþuñ;øçÄcqáù@©
    uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})
    àØ#E«köÚ6²+!L²”»~÷ºúG5åѧ:óP}¼Î,4§V\±G»×.z]¤þh¼bÙ/Ë)áIèõÔIá}Ré,.¢nß7
    ÷*SjTÛÙÈïõºýÀZÂmVo5Ì~^Ѥq¹úã.k°ÿ{B(8¦îд0s´Eòd÷×Øá2YƵ;úiºÑ7Ö_ä~%Ðü
    Sâ½U¯¯¥q*ªsìá¶Ø9ÈQÇ9â¹H|¨Ù_AÚÃ-ÌIJD¡fAÆpTnà1^õq§^M¬I{r¢îÝäòyi)1AÉÍÖÕ
    üWâ¯Æ·n.|¼!óùñçÕ7$¡RNyIÊþ·]ü¼¯sZØJî|®èר\ÜɶBIbm-ÆøFxÁ®:ûLA!yPäûqÅ}!
    y¨Ã5âHm£mÞlɽTç/2zy#5ôÏßÄ×s]|ç¶qÅqúR=Ñy¼öû¯ñ§Fö1oW²Ä3òüC×+×txÔ§ÅÒ8sçïÜó×ùê¸IÔnUßשÇRHñO[^©YT&:t®
    VÆ+Õ]£rô¯j½XÛܨt¯$Ô`67*Ð>¦¼ìe*{[=ÏMkÙþîGá^´Úm¦°q4È¥äNsô¯Ðç0ʾcd~Uë÷v
    zÝÝG0-Á#;DoqßÐäWÏá)èÚG·ÖäÕíøÿÖý÷Ó¾+k×{ìw+påß*2Y’Á>ßzm¯þ×7cs+é_%éú=ÍÌ
    æuQo’÷¢ÀÁ=Ï~kÓôÝ3^Ó7UvÁÎÖãÔtλM¤ù<15÷VÞ;ÖRíFïëRÄ·7ùÎINCXZu¡°Ê÷Ûã##5Ñ
    uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})
    ÷*SjTÛÙÈïõºýÀZÂmVo5Ì~^Ѥq¹úã.k°ÿ{B(8¦îд0s´Eòd÷×Øá2YƵ;úiºÑ7Ö_ä~%Ðü
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    YWL / ZLLH/2
    Zgkl: bgq.gjy.sm
    TRG Dfglyr.pff UGGC2c
    QOD Izsfmde.cc RDDZPK
    .comment-respond{clear:both}
    @media only screen and (min-width:35em){.comment-form>div{width:50%;float:left}
    .Comment .comment-form>div{width:auto;float:none}
    .comment-form>div:nth-child(2n){padding-right:1rem}
    .Comment .comment-form>div:nth-child(2n){padding-right:0}
    .comment-form>div:nth-child(2n-1){padding-left:1rem}
    .Comment .comment-form>div:nth-child(2n-1){padding-left:0}
    .comment-form>.comment-form_comment.comment-form_comment{width:auto;clear:left;float:none;padding-left:0;padding-right:0}
    .comment-form_comment ~ div:nth-child(2n){padding-left:1rem;padding-right:0}
    .Comment .comment-form_comment ~ div:nth-child(2n){padding-left:0}
    .comment-form_comment ~ div:nth-child(2n-1){padding-right:1rem;padding-left:0}
    .Comment .comment-form_comment ~ div:nth-child(2n-1){padding-right:0}
    .comment-form_comment ~ :nth-child(2n-1),.comment-form_comment ~ .form-submit{clear:left}
    }
    .SocialShare{color:#bdc2c7}
    .SocialShare_Title{font-size:13px;font-size:0.8125rem;text-transform:uppercase;line-height:1.8461538462;margin-bottom:0}
    .SocialShare_List{list-style:none;margin-left:0}
    .SocialShare_List>li{margin-bottom:0;font-size:13px;font-size:0.8125rem}
    .SocialLink,.SocialLink:visited{color:inherit;font-size:13px;font-size:0.8125rem;line-height:1.6923076923;min-width:3rem;display:inline-block;text-decoration:none;border:1px solid;border-radius:3px;margin-bottom:.
    5rem;padding-right:.3em}
    .SocialLink:hover,.SocialLink:focus,.SocialLink:active{color:inherit;text-decoration:none}
    .SocialLink_Count{visibility:hidden}
    .SocialLink:hover .SocialLink_Count,.SocialLink:focus .SocialLink_Count,.SocialLink_Count .SocialLink:active{visibility:visible}
    .Comment{font-size:14px;font-size:0.875rem;line-height:1.7142857143;display:block}
    .Comment,.Comment p,.Comment blockquote,.Comment pre{margin-bottom:1.7142857143em}
    .Comment-withAvatar{margin-left:64px;min-height:56px}
    .Comment_Meta{color:#bdc2c7}
    .Comment_Avatar{width:48px;height:48px;position:absolute;margin-top:4px;margin-left:-64px}
    .Comment_Avatar>img{width:48px;height:48px}
    .Comment_Name,.Comment_Time,.Comment_Time>a{font-family:inherit;font-size:inherit;text-transform:inherit;font-weight:inherit;font-style:inherit;margin-bottom:0}
    .Comment_Name{float:left}
    .Comment_Time{float:right}
    .Comment_Time>a{color:inherit}
    .Comment_Moderation.Comment_Moderation{margin-bottom:0;font-style:italic}
    .Comment_Body{clear:right}
    .Comment-withAvatar .Comment_Body{float:left}
    .Comment_Body :last-child{margin-bottom:0}
    .comment-reply-link,.comment-reply-link:visited{color:#bdc2c7;text-transform:uppercase}
    .comment-reply-link:hover,.comment-reply-link:focus,.comment-reply-link:visited{color:#bdc2c7}
    .CommentList{margin-left:0;display:block}
    .CommentList+.Pagination{margin-bottom:6rem}
    .Section{margin-bottom:6rem;margin-left:1em;margin-right:1em}
    @media only screen and (min-width:48em){.Section{margin-left:6em;margin-right:6em}
    }
    .PostList{list-style:none;margin-left:0}
    .PostList_Post{margin-bottom:6rem}
    .PostList_Post-NoExcerpt{margin-bottom:3rem}
    .more-link{display:block;margin-top:1.5em}
    .Page_Main{padding-top:1.5rem;padding-bottom:1.5rem;background-color:#fff}
    .Page_Footer{padding-top:1.5rem}
    @media (min-width:60em){.Page_Header{float:left;width:220px}
    .Page_Main{float:left;width:calc( 100% - 440px )}
    .Page_Sidebar{float:left;width:220px;min-height:50px}
    .Page_Footer{clear:both}
    }
    .t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:1rem;margin-right:1rem}
    @media only screen and (min-width:48em){.t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:6rem;margin-right:6rem}
    }
    .Pagination-PrevNextPost{margin-bottom:3rem}
    .EntryMeta{position:relative}
    .EntryMeta .SocialShare_List>li{display:inline-block;padding-right:.25em}
    @media only screen and (min-width:60em){.EntryMeta .SocialShare_List>li{display:list-item}
    .EntryMeta .SocialShare{position:absolute;width:70px;background:white;top:0;left:100%;padding-left:.5rem;padding-top:2em;left:calc( 100% + 6rem )}
    }
    .fluid-width-video-wrapper{width:100%;max-width:126.6666666667vh;position:relative;padding:0;margin-left:auto;margin-right:auto}
    .fluid-width-video-wrapper:before{display:block;width:100%;padding-top:75%;content:' '}
    .fluid-width-video-wrapper>iframe,.fluid-width-video-wrapper>object,.fluid-width-video-wrapper>embed{position:absolute;top:0;left:0;width:100%;height:100%}
    .alignleft{float:left;margin-right:1em;margin-bottom:1em;margin-left:-1rem}
    @media only screen and (min-width:60em){.alignleft{margin-left:-5rem}
    }
    .alignright{float:right;margin-left:1em;margin-bottom:1em;margin-right:-1rem}
    @media only screen and (min-width:60em){.alignright{margin-right:-5rem}
    }
    .instagram-image .keyring-img,.wp-post-image,figure.alignnone,img.alignnone,.aligncenter{display:block;margin-left:auto;margin-right:auto}
    .post-password-form label{color:#bdc2c7;font-size:13px;font-size:0.8125rem;line-height:1.2307692308;text-transform:uppercase;display:block;margin-bottom:.5rem}
    .post-password-form [type=password]{width:100%;border-radius:2px;color:#2a2b2b;background-color:#f3f3f3;font-size:14px;font-size:0.875rem;line-height:1.7142857143;border-width:1px;outline:none;padding:calc( .5rem -
    1px ) 0.75rem;border-style:solid;border-color:#f3f3f3}
    

    View Slide

82. n¾I®L3æ©Í#t\Qòα`ÐݳAàWøCÀcUÛ%ųd|Äæ½BøwÒ$qk¡GáÄÃÉüª½ÁîHõõ¾uIG:CÛ»>ñ
    e½ÚësÃ(*áyì:V÷äÔmeê1É62ðÀúæ¾ñ¿´ÝVèíR6ªR~vË÷=ñÇÏéÞµU¸$ãJçÄgW¤Õ¬RÂ>wbý
    ¶u}¡AtNéSÏ|úÔ/ntùMÌ 9ë×ìì#6fÝÓåSò·¯µe^xfÈØqé×ÔøÜ65ÊM«£e¡ÿÕþ³{®èfy¥ay¼3FeÏÞÉÈ?Zñßé:Ýé¡Ü±ùòÆvqÆp9ï^á{«Ùéz£ÉË,I,rD©óUþèÉãóïìû[yçëh¨
    ÈbO cþ@ÌpÍNÐI¯#äñÕ#RMÉn¯øï¦yÐ)óüÊÀpÄ·#¦x¯LðÆýAµyÅ«w"\3âC}z}ÆjÜÇr4«·
    6ÐÛÁqQÐƹ«´Ü’ÞÏäÕ¥8ÉY¾Úm±ÅÌ1ä¡úyY/|¤ÌCï1sÆWk&°còáPÅ0{uúþuñ;øçÄcqáù@©
    uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})
    àØ#E«köÚ6²+!L²”»~÷ºúG5åѧ:óP}¼Î,4§V\±G»×.z]¤þh¼bÙ/Ë)áIèõÔIá}Ré,.¢nß7
    ÷*SjTÛÙÈïõºýÀZÂmVo5Ì~^Ѥq¹úã.k°ÿ{B(8¦îд0s´Eòd÷×Øá2YƵ;úiºÑ7Ö_ä~%Ðü
    Sâ½U¯¯¥q*ªsìá¶Ø9ÈQÇ9â¹H|¨Ù_AÚÃ-ÌIJD¡fAÆpTnà1^õq§^M¬I{r¢îÝäòyi)1AÉÍÖÕ
    üWâ¯Æ·n.|¼!óùñçÕ7$¡RNyIÊþ·]ü¼¯sZØJî|®èר\ÜɶBIbm-ÆøFxÁ®:ûLA!yPäûqÅ}!
    y¨Ã5âHm£mÞlɽTç/2zy#5ôÏßÄ×s]|ç¶qÅqúR=Ñy¼öû¯ñ§Fö1oW²Ä3òüC×+×txÔ§ÅÒ8sçïÜó×ùê¸IÔnUßשÇRHñO[^©YT&:t®
    VÆ+Õ]£rô¯j½XÛܨt¯$Ô`67*Ð>¦¼ìe*{[=ÏMkÙþîGá^´Úm¦°q4È¥äNsô¯Ðç0ʾcd~Uë÷v
    zÝÝG0-Á#;DoqßÐäWÏá)èÚG·ÖäÕíøÿÖý÷Ó¾+k×{ìw+påß*2Y’Á>ßzm¯þ×7cs+é_%éú=ÍÌ
    æuQo’÷¢ÀÁ=Ï~kÓôÝ3^Ó7UvÁÎÖãÔtλM¤ù<15÷VÞ;ÖRíFïëRÄ·7ùÎINCXZu¡°Ê÷Ûã##5Ñ
    uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})
    ÷*SjTÛÙÈïõºýÀZÂmVo5Ì~^Ѥq¹úã.k°ÿ{B(8¦îд0s´Eòd÷×Øá2YƵ;úiºÑ7Ö_ä~%Ðü
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    YWL / ZLLH/2
    Zgkl: bgq.gjy.sm
    TRG Dfglyr.pff UGGC2c
    QOD Izsfmde.cc RDDZPK
    .comment-respond{clear:both}
    @media only screen and (min-width:35em){.comment-form>div{width:50%;float:left}
    .Comment .comment-form>div{width:auto;float:none}
    .comment-form>div:nth-child(2n){padding-right:1rem}
    .Comment .comment-form>div:nth-child(2n){padding-right:0}
    .comment-form>div:nth-child(2n-1){padding-left:1rem}
    .Comment .comment-form>div:nth-child(2n-1){padding-left:0}
    .comment-form>.comment-form_comment.comment-form_comment{width:auto;clear:left;float:none;padding-left:0;padding-right:0}
    .comment-form_comment ~ div:nth-child(2n){padding-left:1rem;padding-right:0}
    .Comment .comment-form_comment ~ div:nth-child(2n){padding-left:0}
    .comment-form_comment ~ div:nth-child(2n-1){padding-right:1rem;padding-left:0}
    .Comment .comment-form_comment ~ div:nth-child(2n-1){padding-right:0}
    .comment-form_comment ~ :nth-child(2n-1),.comment-form_comment ~ .form-submit{clear:left}
    }
    .SocialShare{color:#bdc2c7}
    .SocialShare_Title{font-size:13px;font-size:0.8125rem;text-transform:uppercase;line-height:1.8461538462;margin-bottom:0}
    .SocialShare_List{list-style:none;margin-left:0}
    .SocialShare_List>li{margin-bottom:0;font-size:13px;font-size:0.8125rem}
    .SocialLink,.SocialLink:visited{color:inherit;font-size:13px;font-size:0.8125rem;line-height:1.6923076923;min-width:3rem;display:inline-block;text-decoration:none;border:1px solid;border-radius:3px;margin-bottom:.
    5rem;padding-right:.3em}
    .SocialLink:hover,.SocialLink:focus,.SocialLink:active{color:inherit;text-decoration:none}
    .SocialLink_Count{visibility:hidden}
    .SocialLink:hover .SocialLink_Count,.SocialLink:focus .SocialLink_Count,.SocialLink_Count .SocialLink:active{visibility:visible}
    .Comment{font-size:14px;font-size:0.875rem;line-height:1.7142857143;display:block}
    .Comment,.Comment p,.Comment blockquote,.Comment pre{margin-bottom:1.7142857143em}
    .Comment-withAvatar{margin-left:64px;min-height:56px}
    .Comment_Meta{color:#bdc2c7}
    .Comment_Avatar{width:48px;height:48px;position:absolute;margin-top:4px;margin-left:-64px}
    .Comment_Avatar>img{width:48px;height:48px}
    .Comment_Name,.Comment_Time,.Comment_Time>a{font-family:inherit;font-size:inherit;text-transform:inherit;font-weight:inherit;font-style:inherit;margin-bottom:0}
    .Comment_Name{float:left}
    .Comment_Time{float:right}
    .Comment_Time>a{color:inherit}
    .Comment_Moderation.Comment_Moderation{margin-bottom:0;font-style:italic}
    .Comment_Body{clear:right}
    .Comment-withAvatar .Comment_Body{float:left}
    .Comment_Body :last-child{margin-bottom:0}
    .comment-reply-link,.comment-reply-link:visited{color:#bdc2c7;text-transform:uppercase}
    .comment-reply-link:hover,.comment-reply-link:focus,.comment-reply-link:visited{color:#bdc2c7}
    .CommentList{margin-left:0;display:block}
    .CommentList+.Pagination{margin-bottom:6rem}
    .Section{margin-bottom:6rem;margin-left:1em;margin-right:1em}
    @media only screen and (min-width:48em){.Section{margin-left:6em;margin-right:6em}
    }
    .PostList{list-style:none;margin-left:0}
    .PostList_Post{margin-bottom:6rem}
    .PostList_Post-NoExcerpt{margin-bottom:3rem}
    .more-link{display:block;margin-top:1.5em}
    .Page_Main{padding-top:1.5rem;padding-bottom:1.5rem;background-color:#fff}
    .Page_Footer{padding-top:1.5rem}
    @media (min-width:60em){.Page_Header{float:left;width:220px}
    .Page_Main{float:left;width:calc( 100% - 440px )}
    .Page_Sidebar{float:left;width:220px;min-height:50px}
    .Page_Footer{clear:both}
    }
    .t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:1rem;margin-right:1rem}
    @media only screen and (min-width:48em){.t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:6rem;margin-right:6rem}
    }
    .Pagination-PrevNextPost{margin-bottom:3rem}
    .EntryMeta{position:relative}
    .EntryMeta .SocialShare_List>li{display:inline-block;padding-right:.25em}
    @media only screen and (min-width:60em){.EntryMeta .SocialShare_List>li{display:list-item}
    .EntryMeta .SocialShare{position:absolute;width:70px;background:white;top:0;left:100%;padding-left:.5rem;padding-top:2em;left:calc( 100% + 6rem )}
    }
    .fluid-width-video-wrapper{width:100%;max-width:126.6666666667vh;position:relative;padding:0;margin-left:auto;margin-right:auto}
    .fluid-width-video-wrapper:before{display:block;width:100%;padding-top:75%;content:' '}
    .fluid-width-video-wrapper>iframe,.fluid-width-video-wrapper>object,.fluid-width-video-wrapper>embed{position:absolute;top:0;left:0;width:100%;height:100%}
    .alignleft{float:left;margin-right:1em;margin-bottom:1em;margin-left:-1rem}
    @media only screen and (min-width:60em){.alignleft{margin-left:-5rem}
    }
    .alignright{float:right;margin-left:1em;margin-bottom:1em;margin-right:-1rem}
    @media only screen and (min-width:60em){.alignright{margin-right:-5rem}
    }
    .instagram-image .keyring-img,.wp-post-image,figure.alignnone,img.alignnone,.aligncenter{display:block;margin-left:auto;margin-right:auto}
    .post-password-form label{color:#bdc2c7;font-size:13px;font-size:0.8125rem;line-height:1.2307692308;text-transform:uppercase;display:block;margin-bottom:.5rem}
    .post-password-form [type=password]{width:100%;border-radius:2px;color:#2a2b2b;background-color:#f3f3f3;font-size:14px;font-size:0.875rem;line-height:1.7142857143;border-width:1px;outline:none;padding:calc( .5rem -
    1px ) 0.75rem;border-style:solid;border-color:#f3f3f3}
    

    View Slide

83. Server push
    

    View Slide

84. Handshake Type: Client Hello
    Version: TLS 1.2
    Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    

    View Slide

85. Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    

    View Slide

86. Server name: example.com
    Certificate: 14:9f:f0:9e:ab…
    Certificate Length: 4096
    Upgrade: HTTP/2
    ClientKeyExchange: 8C:77:82…
    GET / HTTP/2
    Host: example.com
    Link:;rel=preload
    Link:;rel=preload
    .comment-respond{clear:both}
    @media only screen and (min-width:35em){.comment-form>div{width:50%;float:left}
    .Comment .comment-form>div{width:auto;float:none}
    .comment-form>div:nth-child(2n){padding-right:1rem}
    .Comment .comment-form>div:nth-child(2n){padding-right:0}
    .comment-form>div:nth-child(2n-1){padding-left:1rem}
    .Comment .comment-form>div:nth-child(2n-1){padding-left:0}
    .comment-form>.comment-form_comment.comment-form_comment{width:auto;clear:left;float:none;padding-left:0;padding-right:0}
    .comment-form_comment ~ div:nth-child(2n){padding-left:1rem;padding-right:0}
    .Comment .comment-form_comment ~ div:nth-child(2n){padding-left:0}
    .comment-form_comment ~ div:nth-child(2n-1){padding-right:1rem;padding-left:0}
    .Comment .comment-form_comment ~ div:nth-child(2n-1){padding-right:0}
    .comment-form_comment ~ :nth-child(2n-1),.comment-form_comment ~ .form-submit{clear:left}
    }
    .SocialShare{color:#bdc2c7}
    .SocialShare_Title{font-size:13px;font-size:0.8125rem;text-transform:uppercase;line-height:1.8461538462;margin-bottom:0}
    .SocialShare_List{list-style:none;margin-left:0}
    .SocialShare_List>li{margin-bottom:0;font-size:13px;font-size:0.8125rem}
    .SocialLink,.SocialLink:visited{color:inherit;font-size:13px;font-size:0.8125rem;line-height:1.6923076923;min-width:3rem;display:inline-block;text-decoration:none;border:1px solid;border-radius:3px;margin-bottom:.
    5rem;padding-right:.3em}
    .SocialLink:hover,.SocialLink:focus,.SocialLink:active{color:inherit;text-decoration:none}
    .SocialLink_Count{visibility:hidden}
    .SocialLink:hover .SocialLink_Count,.SocialLink:focus .SocialLink_Count,.SocialLink_Count .SocialLink:active{visibility:visible}
    .Comment{font-size:14px;font-size:0.875rem;line-height:1.7142857143;display:block}
    .Comment,.Comment p,.Comment blockquote,.Comment pre{margin-bottom:1.7142857143em}
    .Comment-withAvatar{margin-left:64px;min-height:56px}
    .Comment_Meta{color:#bdc2c7}
    .Comment_Avatar{width:48px;height:48px;position:absolute;margin-top:4px;margin-left:-64px}
    .Comment_Avatar>img{width:48px;height:48px}
    .Comment_Name,.Comment_Time,.Comment_Time>a{font-family:inherit;font-size:inherit;text-transform:inherit;font-weight:inherit;font-style:inherit;margin-bottom:0}
    .Comment_Name{float:left}
    .Comment_Time{float:right}
    .Comment_Time>a{color:inherit}
    .Comment_Moderation.Comment_Moderation{margin-bottom:0;font-style:italic}
    .Comment_Body{clear:right}
    .Comment-withAvatar .Comment_Body{float:left}
    .Comment_Body :last-child{margin-bottom:0}
    .comment-reply-link,.comment-reply-link:visited{color:#bdc2c7;text-transform:uppercase}
    .comment-reply-link:hover,.comment-reply-link:focus,.comment-reply-link:visited{color:#bdc2c7}
    .CommentList{margin-left:0;display:block}
    .CommentList+.Pagination{margin-bottom:6rem}
    .Section{margin-bottom:6rem;margin-left:1em;margin-right:1em}
    @media only screen and (min-width:48em){.Section{margin-left:6em;margin-right:6em}
    }
    .PostList{list-style:none;margin-left:0}
    .PostList_Post{margin-bottom:6rem}
    .PostList_Post-NoExcerpt{margin-bottom:3rem}
    .more-link{display:block;margin-top:1.5em}
    .Page_Main{padding-top:1.5rem;padding-bottom:1.5rem;background-color:#fff}
    .Page_Footer{padding-top:1.5rem}
    @media (min-width:60em){.Page_Header{float:left;width:220px}
    .Page_Main{float:left;width:calc( 100% - 440px )}
    .Page_Sidebar{float:left;width:220px;min-height:50px}
    .Page_Footer{clear:both}
    }
    .t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:1rem;margin-right:1rem}
    @media only screen and (min-width:48em){.t-Singular .Headline,.t-Singular .EntryMeta,.Pagination-PrevNextPost{margin-left:6rem;margin-right:6rem}
    }
    .Pagination-PrevNextPost{margin-bottom:3rem}
    .EntryMeta{position:relative}
    .EntryMeta .SocialShare_List>li{display:inline-block;padding-right:.25em}
    @media only screen and (min-width:60em){.EntryMeta .SocialShare_List>li{display:list-item}
    .EntryMeta .SocialShare{position:absolute;width:70px;background:white;top:0;left:100%;padding-left:.5rem;padding-top:2em;left:calc( 100% + 6rem )}
    }
    .fluid-width-video-wrapper{width:100%;max-width:126.6666666667vh;position:relative;padding:0;margin-left:auto;margin-right:auto}
    .fluid-width-video-wrapper:before{display:block;width:100%;padding-top:75%;content:' '}
    .fluid-width-video-wrapper>iframe,.fluid-width-video-wrapper>object,.fluid-width-video-wrapper>embed{position:absolute;top:0;left:0;width:100%;height:100%}
    .alignleft{float:left;margin-right:1em;margin-bottom:1em;margin-left:-1rem}
    @media only screen and (min-width:60em){.alignleft{margin-left:-5rem}
    }
    .alignright{float:right;margin-left:1em;margin-bottom:1em;margin-right:-1rem}
    @media only screen and (min-width:60em){.alignright{margin-right:-5rem}
    }
    .instagram-image .keyring-img,.wp-post-image,figure.alignnone,img.alignnone,.aligncenter{display:block;margin-left:auto;margin-right:auto}
    .post-password-form label{color:#bdc2c7;font-size:13px;font-size:0.8125rem;line-height:1.2307692308;text-transform:uppercase;display:block;margin-bottom:.5rem}
    .post-password-form [type=password]{width:100%;border-radius:2px;color:#2a2b2b;background-color:#f3f3f3;font-size:14px;font-size:0.875rem;line-height:1.7142857143;border-width:1px;outline:none;padding:calc( .5rem -
    1px ) 0.75rem;border-style:solid;border-color:#f3f3f3}
    

    View Slide

87. Server push
    Nag your system admins to install this.
    

    View Slide

88. Performance wars
    

    View Slide

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

    View Slide

90. HTTP/1’s former best practices can
    be harmful over HTTP/2.
    

    View Slide

91. Critical path CSS
    
    
    Example.com
    <br/>html{font-family:sans-serif}<br/>body{margin:0}<br/>article,aside,details,figcaption,figure,<br/>footer,header,hgroup,main,nav,section,summary<br/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

95. HTTP/2, with critical path CSS
    HTML
    CSS
    

    View Slide

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

    View Slide

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

    View Slide

98. HTTP/2 server push
    

    View Slide

99. w3.org/TR/preload/
    

    View Slide

100. Server push
     

     View Slide

101. Server push
     

     View Slide

102. Server push
     if ( is_http2() ) {
     header( 'link:; rel=preload; as=style' );
     header( 'link:; rel=preload; as=script');
     }
     

     View Slide

103. Server push
     if ( is_http2() ) {
     header( 'link:; rel=preload; as=style' );
     header( 'link:; rel=preload; as=script');
     }
     PHP code samples
     

     View Slide

104. Server push
     if ( is_http2() ) {
     header( 'link:; rel=preload; as=style' );
     header( 'link:; rel=preload; as=script');
     }
     

     View Slide

105. Server push is unsophisticated
     

     View Slide

106. Server push
     if ( ! is_cached( '/style.css' ) && is_http2() ) {
     header( 'link:; rel=preload; as=style' );
     }
     

     View Slide

107. Server push
     if ( ! is_cached( '/style.css' ) && is_http2() ) {
     header( 'link:; rel=preload; as=style' );
     setcookie( '/style.css', 'cached', 0, '/' );
     }
     

     View Slide

108. is_cached()
     function is_cached( $filename ) {
     if ( 'cached' === $_COOKIE[ $filename ] ) {
     return true;
     }
     else {
     return false;
     }
     }
     

     View Slide

109. https://h2o.examp1e.net/configure/http2_directives.html
     

     View Slide

110. https://h2o.examp1e.net/configure/http2_directives.html
     

     View Slide

111. Critical path CSS
     A modern approach
     

     View Slide

112. View Slide

113. pwcc.cc/go/loadcss
     

     View Slide

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

     View Slide

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

     View Slide

116. /* Critical CSS */
     <br/>function loadCSS(){/* Source inline */}<br/>function setcookie(){/* Source inline */}<br/>loadCSS( '/style.css' );<br/>setcookie( '/style.css', 'cached', 0, '/' );<br/>
     
     
     HTML: uncached HTTP/1
     

     View Slide

117. if ( ! is_cached( '/style.css' ) && is_http2() ) {
     header( 'link:; rel=preload; as=style' );
     setcookie( '/style.css', 'cached', 0, '/' );
     }
     ?>
     
     
     

     View Slide

118. 
     
     if ( is_http2() || is_cached( '/style.css') ) :
     /* HTML: cached or HTTP 2 */
     else :
     /* HTML: uncached HTTP 1 */
     endif;
     ?>
     
     

     View Slide

119. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     View Slide

120. Web fonts
     

     View Slide

121. View Slide

122. Visual progress
     Via WebPageTest
     

     View Slide

123. Visual progress
     Via WebPageTest
     

     View Slide

124. Blocking render with web fonts
     href='https://fonts.googleapis.com/css? ↩︎

     family=Open+Sans:400,400italic,700,700italic' 

     rel='stylesheet' type='text/css'>
     <br/>html {<br/>font-family: "Open Sans", sans-serif; }<br/>
     

     View Slide

125. External resources
     

     View Slide

126. External resources
     prevent server push
     

     View Slide

127. External resources
     in effect, drop back to HTTP/1
     

     View Slide

128. View Slide

129. View Slide

130. View Slide

131. caniuse.com/font-loading, March 2016
     

     View Slide

132. caniuse.com/font-loading, March 2016
     

     View Slide

133. View Slide

134. pwcc.cc/go/fout
     

     View Slide

135. FOUT
     var openSans = new FontFaceObserver( "Open Sans" );
     openSans
     .check()
     .then( function(){
     document.documentElement.className += " wf-active";
     setCookie( 'wf', 'active' );
     } );
     

     View Slide

136. FOUT
     var openSans = new FontFaceObserver( "Open Sans" );
     openSans
     .check()
     .then( function(){
     document.documentElement.className += " wf-active";
     setCookie( 'wf', 'active' );
     } );
     

     View Slide

137. FOUT
     href='https://fonts.googleapis.com/css? ↩︎

     family=Open+Sans:400,400italic,700,700italic' 

     rel='stylesheet' type='text/css'>
     <br/>html {<br/>font-family: "Open Sans", sans-serif; }<br/>
     

     View Slide

138. href='https://fonts.googleapis.com/css? ↩︎

     family=Open+Sans:400,400italic,700,700italic' 

     rel='stylesheet' type='text/css'>
     <br/>html.wf-active {<br/>font-family: "Open Sans", sans-serif; }<br/>
     FOUT
     

     View Slide

139. href='https://fonts.googleapis.com/css? ↩︎

     family=Open+Sans:400,400italic,700,700italic' 

     rel='stylesheet' type='text/css'>
     <br/>html.wf-active {<br/>font-family: "Open Sans", sans-serif; }<br/>
     FOUT
     

     View Slide

140. family=Open+Sans:400,400italic,700,700italic' 

     rel='stylesheet' type='text/css'>
     <br/>html.wf-active {<br/>font-family: "Open Sans", sans-serif; }<br/>
     <br/>if ( 'active' === getCookie( 'wf' ) ) {<br/>document.documentElement.className += " wf-active";<br/>}<br/>
     FOUT
     

     View Slide

141. Web fonts are an enhancement
     

     View Slide

142. Locally hosted fonts
     

     View Slide

143. Locally hosted, HTTP/2 fonts
     HTML
     Font
     

     View Slide

144. HTTP/2 presents an opportunity
     

     View Slide

145. …to break the web, again
     

     View Slide

146. Yutaka Tsutano (CC) - flic.kr/p/dq5sCy
     

     View Slide

147. Breaking things
     /* ------ TABLET ------ */
     @media only screen and
     ( min-width : 768px ) and
     ( max-width : 1024px ) {
     }
     

     View Slide

148. Mike Deerkoski (CC) - flic.kr/p/bWmqBT
     It’s the same size but smaller
     

     View Slide

149. ⭐⭐⭐⭐"
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide