Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Peter Wilson

May 02, 2017
Tweet

More Decks by Peter Wilson

Other Decks in Technology

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