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

Be Responsive: Performance: HTTP2 in a 1.5 world

Be Responsive: Performance: HTTP2 in a 1.5 world

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

Peter Wilson

March 08, 2016
Tweet

More Decks by Peter Wilson

Other Decks in Programming

Transcript

  1. ~$ telnet 117.53.163.91 80 Connected to 117.53.163.91. GET / HTTP/1.1

    Host: example.com nextSlideOnWindowFocus:"off", disableFocusListener:false, } }); } }); /*ready*/ </script> <link rel='stylesheet' id='mediaelement-css' href="http://example.com/wp-includes/js/mediaelement/mediaelementplayer.min.css?01c19f" type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href="http://example.com/wp-includes/js/mediaelement/wp-mediaelement.css?01c19f" type='text/css' media='all' /> <link rel='stylesheet' id='joy-twitter-widget-css' href="http://example.com/wp-content/plugins/joy-twitter-widget/joy-twitter-widget.css?01c19f" type='text/css' media='all' /> <script type='text/javascript' src="http://example.com/wp-includes/js/jquery/ui/core.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-includes/js/jquery/ui/datepicker.min.js?01c19f"></script> <script type='text/javascript'> /* <![CDATA[ */ var scriptParams = {"google_search_engine_id":"017877086915232438708:-pvqphefyyw"}; /* ]]> */ </script> <script type='text/javascript' src="http://example.com/wp-content/plugins/wp-google-search/assets/js/google_cse_v2.js?01c19f"></script> <script type='text/javascript' src="//example.com/wp-content/plugins/connections/vendor/picturefill/picturefill.min.js?01c19f"></script> <script type='text/javascript'> /* <![CDATA[ */ 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\/? 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-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:\/\/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\/":[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\/02\/new-taste- radio-dates\/":[0,1,"http:\/\/example.com\/training\/taste-of-radio\/"]},"siteURL":"http:\/\/example.com","siteURLq":"http:\/\/example.com"}; /* ]]> */ </script> <script type='text/javascript' src="http://example.com/wp-content/plugins/quick-pagepost-redirect-plugin/js/qppr_frontend_script.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/themes/morning/js/dropdown.js?01c19f"></script> <script type='text/javascript'> /* <![CDATA[ */ var zoomOptions = []; /* ]]> */ </script> <script type='text/javascript' src="http://example.com/wp-content/themes/morning/js/functions.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/themes/morning/functions/wpzoom/assets/js/galleria.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/themes/morning/functions/wpzoom/assets/js/wzslider.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/plugins/bj-lazy-load/js/bj-lazy-load.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/plugins/wp-jquery-lightbox/jquery.touchwipe.min.js?01c19f"></script> <script type='text/javascript'> /* <![CDATA[ */ 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 gallery","image":"Image ","of":" of ","download":"Download","pause":"(pause slideshow)","play":"(play slideshow)"}; /* ]]> */ </script> <script type='text/javascript' src="http://example.com/wp-content/plugins/wp-jquery-lightbox/jquery.lightbox.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-includes/js/wp-embed.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/plugins/powerpress/player.min.js?01c19f"></script> <script type='text/javascript'> /* <![CDATA[ */ 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 Fullscreen":"Go Fullscreen","Unmute":"Unmute","Mute":"Mute","Captions\/Subtitles":"Captions\/Subtitles"}}; var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/"}; /* ]]> */ </script> <script type='text/javascript' src="http://example.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-includes/js/mediaelement/wp-mediaelement.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/plugins/joy-public-website-joy-nownext-widget/js/json-jquery.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/plugins/joy-newest-tracks-widget/js/newest-tracks.min.js?01c19f"></script> <script type='text/javascript' src="http://example.com/wp-content/plugins/joy-facebook-page-widget/js/joy-facebook-page.js?01c19f"></script> <script type='text/javascript'> /* <![CDATA[ */ var JOYTwitter_config = {"ajaxurl":"https:\/\/example.com\/wp-admin\/admin-ajax.php","sec":"ecaf121956"}; /* ]]> */ </script> <script type='text/javascript' src="http://example.com/wp-content/plugins/joy-twitter-widget/joy-twitter-widget-min.js?01c19f"></script> <!--Plugin WP Missed Schedule Active - Secured with Genuine Authenticity KeyTag--> <!-- This site is patched against a big problem not solved since WordPress 2.5 --> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"70c3bbd35e","applicationID":"1953133","transactionName":"M1RRZ0FUX0ZTV0ZRWAoeclBHXF5bHV1cXFIc","queueTime":0,"applicationTime": 1036,"atts":"HxNSEQlOTEg=","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/ Page Caching using disk: enhanced Object Caching 20213/20862 objects using apc Application Monitoring using New Relic
  2. Everything you know about performance is now wrong and former

    best practices are now an anti-pattern and considered harmful.
  3. 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¡ÿÕþ³<Aáè²Ç{á {®è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]<PÈ®7Ydzs3·à×ϼÚR_7cÃM6á_ÜÄmo1,bÝDT¶îN,O |ç¶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Ö_ä~%Ðü
  4. ~$ ssh 117.53.163.91 443 Connected to 117.53.163.91. Ciphers: c02b,c02f,9e… Host:

    example.com Protocols: TLSv1.2 TLSv1.1 Cert: 14:9f:f0:9e:ab… Supported: http/2 http/1.1 [Protocol, Cipher, etc]
  5. Protocols: TLSv1.2 TLSv1.1 Cert: 14:9f:f0:9e:ab… Supported: http/2 http/1.1 [Protocol, Cipher,

    etc] Key: 8C:77:8D:21:D1:82… GET / HTTP/2 Host: example.com
  6. Protocols: TLSv1.2 TLSv1.1 Cert: 14:9f:f0:9e:ab… Supported: http/2 http/1.1 [Protocol, Cipher,

    etc] Key: 8C:77:8D:21:D1:82… GET / HTTP/2 Host: example.com GET /style.css HTTP/2 GET /picturefill.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}
  7. 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¡ÿÕþ³<Aáè²Ç{á {®è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]<PÈ®7Ydzs3·à×ϼÚR_7cÃM6á_ÜÄmo1,bÝDT¶îN,O |ç¶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Ö_ä~%Ðü Cert: 14:9f:f0:9e:ab… Supported: http/2 http/1.1 [Protocol, Cipher, etc] Key: 8C:77:8D:21:D1:82… YWL / ZLLH/2 Zgkl: bgq.gjy.sm TRG Dfglyr.pff UGGC2c QOD Izsmdebopsvv.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}
  8. Protocols: TLSv1.2 TLSv1.1 Cert: 14:9f:f0:9e:ab… Supported: http/2 http/1.1 [Protocol, Cipher,

    etc] Key: 8C:77:8D:21:D1:82… GET / HTTP/2 Host: example.com PUSH /style.css HTTP/2 PUSH /picturefill.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}
  9. Everything you know about performance is now wrong and former

    best practices are now an anti-pattern and considered harmful.
  10. Critical path CSS <html> <head> <title>Example.com</title> <style type='text/css'> html{font-family:sans-serif;} body{margin:0}

    article,aside,details,figcaption,figure, footer,header,hgroup,main,nav,section,summary
  11. Server push if ( is_http2() ) { // Set HTTP

    Push headers, do not replace header( 'link:</style.css>; rel=preload', false ); header( 'link:</functions.js>; rel=preload', false ); }
  12. Server push // Set HTTP Push headers, do not replace

    if ( ! is_cached( '/style.css' ) && is_http2() ) { header( 'link:</style.css>; rel=preload', false ); }
  13. Server push // Set HTTP Push headers, do not replace

    if ( ! is_cached( '/style.css' ) && is_http2() ) { header( 'link:</style.css>; rel=preload’, false ); setcookie( '/style.css', 'cached', 0, '/' ); }
  14. is_cached() function is_cached( $filename ) { if ( 'cached' ===

    $_COOKIE[ $filename ] ) { return true; } else { return false; } }
  15. <style type='text/css'>/* Critical CSS */</style> <script> function loadCSS(){/* Source inline

    */} function setcookie(){/* Source inline */} loadCSS( '/style.css' ); setcookie( '/style.css', 'cached', 0, '/' ); </script> <noscript> <link rel="stylesheet" href="/style.css" /></noscript> HTML: uncached HTTP 1
  16. <html><head> <?php if ( is_http2() || is_cached( '/style.css') ) :

    /* HTML: cached or HTTP 2 */ else : /* HTML: uncached HTTP 1 */ endif; ?> </head>
  17. Everything you know about performance is now wrong and former

    best practices are now an anti-pattern and considered harmful.