Be Responsive: Performance: HTTP2 in a 1.5 world

1dd9fded718f9b344d48f37f9bfcb159?s=47 Peter Wilson
March 08, 2016
Programming
1
96

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.

1dd9fded718f9b344d48f37f9bfcb159?s=128

Peter Wilson

March 08, 2016
Tweet

More Decks by Peter Wilson

See All by Peter Wilson
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
0
430
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
1
280
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
0
80
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
0
72
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
0
300
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
1
100
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
0
180
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
4
290
1dd9fded718f9b344d48f37f9bfcb159?s=48 peterwilsoncc
1
700

Other Decks in Programming

See All in Programming
804bf3fd2baebf9a27e4774553688d37?s=48 saki4869
0
170
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
1
1k
Dbab5e5a1fd54531e1119ede6b3b9e65?s=48 horie1024
1
330
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
130
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
140
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
610
51105482dc2e3d01b3ba64c9751d75c6?s=48 showwin
0
110
7e9e111546b163cc05d517eec128c04f?s=48 yamotuki
0
120
4782d92d3deeb4ab527ba6f867bf07c3?s=48 mizdra
7
4.8k
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
9
4.5k
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
190
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
1
160

Featured

See All Featured
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
56
6.3k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
260
11k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
26
1.3k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
19k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
14
1.1k

Transcript

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

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

  3. Performance: HTTP2 in a 1.5 world Peter Wilson • peterwilson.cc

    • @pwcc
  4. None

  5. World Super Cars at English Wikipedia (CC) • VIA Gallery

    (CC) - flic.kr/p/5QTEFc

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

  7. ~$ telnet 117.53.163.91 80 Connected to 117.53.163.91.

  8. ~$ telnet 117.53.163.91 80 Connected to 117.53.163.91.

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

    Host: example.com

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

  11. But, we have HTTP/2 now.

  12. Everything you know about performance is now wrong and former

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

  13. These titles are considered harmful

  14. caniuse.com/http2 • browser use: Statcounter Global stats.

  15. caniuse.com/http2 • browser use: Statcounter Global stats.

  16. Sites using HTTP/2 W3Techs, 28 Feb 2016: w3techs.com

  17. Traffic

  18. Your site running HTTP/2

  19. HTTP/2 A fictional guide

  20. 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Ö_ä~%Ðü

  21. ~$ ssh 117.53.163.91 443 Connected to 117.53.163.91.

  22. ~$ 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]

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

  24. 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}

  25. 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}

  26. Server push

  27. 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}

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

  29. Performance wars

  30. Everything you know about performance is now wrong and former

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

  31. HTTP1’s former best practices can be harmful over HTTP2.

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

  33. HTTP 1, without critical path CSS HTML CSS

  34. HTTP 1, with critical path CSS HTML CSS

  35. HTTP 2, with critical path CSS HTML CSS

  36. HTTP 2, without critical path CSS HTML CSS

  37. HTTP2 server push

  38. Server push

  39. 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 ); }

  40. Server push is unsophisticated

  41. Server push // Set HTTP Push headers, do not replace

    if ( ! is_cached( '/style.css' ) && is_http2() ) { header( 'link:</style.css>; rel=preload', false ); }

  42. 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, '/' ); }

  43. is_cached() function is_cached( $filename ) { if ( 'cached' ===

    $_COOKIE[ $filename ] ) { return true; } else { return false; } }

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

  45. Critical path CSS A modern approach

  46. pwcc.cc/brmelb/loadcss

  47. w3.org/TR/preload/

  48. HTTP 1, with critical path CSS HTML CSS

  49. HTTP 2, without critical path CSS HTML CSS

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

  51. <html> <head> <link rel="stylesheet" href="/style.css" /> </head> HTML: cached or

    HTTP 2

  52. <html><head> <?php if ( is_http2() || is_cached( '/style.css') ) :

    /* HTML: cached or HTTP 2 */ else : /* HTML: uncached HTTP 1 */ endif; ?> </head>

  53. Everything you know about performance is now wrong and former

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

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

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