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

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

Everything just got a whole lot more complicated.

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

Transcript

1. Wed 29 Oct 1969 ~ ucla$ ░
2. Wed 29 Oct 1969 ~ ucla$ ░
3. Wed 29 Oct 1969 ~ ucla$ lo ░ gin
4. Wed 29 Oct 1969 ~ ucla$ lo ░ ░
5. Peter Wilson • peterwilson.cc • @pwcc Performance: 
 The path to HTTP/2 is Full of Potholes
7. Linnaea Mallette
8. Today
9. Bytes on the page
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
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
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
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
14. Load time httparchive.org/trends.php, March 2016
15. Load time Start render: 4.2 seconds
16. Load time Visually complete: 12.7 seconds
17. Load time Document complete: 15.23 sec
18. <table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> <a href="/guests/" class="stdtext"><b>Herbie: Fully Loaded</b> star <font color="#FF6633"><b>Lindsay Lohan</b></font><br> Australian from London <font color="#FF6633"><b>Clive James</b></font><br> Stand-up comedian <font color="#FF6633"><b>Charlie Pickering</b></font><br> <font color="#FF6633"><b>Jebediah</b></font>
20. Money
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+
23. Shopzilla: 12% revenue increase globaldots.com/how-website-speed-affects-conversion-rates
24. Yahoo!: 9% traffic increase globaldots.com/how-website-speed-affects-conversion-rates
25. [A] slowdown of one second could cost [Amazon] $1.6 billion in sales pwcc.cc/go/1.6billion
26. [A] slowdown of one second could cost [Amazon] $1.6 billion in sales Esther Vargas (CC) - flic.kr/p/fstSrg
27. Each 100ms delay costs 1% of sales pwcc.cc/go/amazon (ppt)
28. Measure a starting point
31. WebPageTest - webpagetest.org
32. WebPageTest - webpagetest.org
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
34. Timeline view
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
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
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
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
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
40. 53 / 100 Our PageSpeed score is you won’t believe how
 much it’s costing
41. World Super Cars at English Wikipedia (CC) • VIA Gallery (CC) - flic.kr/p/5QTEFc
42. ~$
43. ~$ nslookup example.com
44. ~$ nslookup example.com Non-authoritative answer: Name:example.com Address: 117.53.163.91 ~$
45. ~$
46. ~$ telnet 117.53.163.91 80
47. ~$ telnet 117.53.163.91 80 Connected to 117.53.163.91.
48. ~$ telnet 117.53.163.91 80 Connected to 117.53.163.91. GET / HTTP/1.1 Host: example.com
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*/ </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
51. Assets on a page
52. Blockers HTML
53. Blockers HTML CSS
54. Blockers HTML CSS IMG IMG IMG FONTS
55. Blockers HTML CSS IMG IMG IMG JS FONTS
56. Blockers HTML CSS IMG IMG IMG JS IFRAME FONTS
57. Waterfall WebPageTest - webpagetest.org
58. Waterfall WebPageTest - webpagetest.org
59. Waterfall WebPageTest - webpagetest.org
60. Waterfall WebPageTest - webpagetest.org
61. But, we have HTTP/2 now.
62. Everything you know about performance is now wrong and former best practices are now an anti-pattern and considered harmful.
63. These titles are considered harmful
64. caniuse.com/http2, March 2016
65. caniuse.com/http2, March 2016
66. Sites using HTTP/2 w3techs.com, March 2016
67. Traffic
68. Your site running HTTP/2
69. HTTP/2 A fictional guide
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¡ÿÕþ³<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Ö_ä~%Ðü
71. ~$
72. ~$ ssh 117.53.163.91 443 Connected to 117.53.163.91.
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
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
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
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
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
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
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
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}
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¡ÿÕþ³<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Ö_ä~%Ðü 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}
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¡ÿÕþ³<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Ö_ä~%Ðü 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}
83. Server push
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
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
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:</style.css>;rel=preload Link:</script.js>;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}
87. Server push Nag your system admins to install this.
88. Performance wars
89. Everything you know about performance is now wrong and former best practices are now an anti-pattern and considered harmful.
90. HTTP/1’s former best practices can be harmful over HTTP/2.
91. 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
92. HTTP/1, without critical path CSS HTML CSS
93. HTTP/1, without critical path CSS HTML CSS
94. HTTP/1, with critical path CSS HTML CSS
95. HTTP/2, with critical path CSS HTML CSS
96. HTTP/2, without critical path CSS HTML CSS
97. HTTP/2, without critical path CSS HTML CSS
98. HTTP/2 server push
99. w3.org/TR/preload/
100. Server push
101. Server push
102. Server push if ( is_http2() ) { header( 'link:</style.css>; rel=preload; as=style' ); header( 'link:</script.js>; rel=preload; as=script'); }
103. Server push if ( is_http2() ) { header( 'link:</style.css>; rel=preload; as=style' ); header( 'link:</script.js>; rel=preload; as=script'); } PHP code samples
104. Server push if ( is_http2() ) { header( 'link:</style.css>; rel=preload; as=style' ); header( 'link:</script.js>; rel=preload; as=script'); }
105. Server push is unsophisticated
106. Server push if ( ! is_cached( '/style.css' ) && is_http2() ) { header( 'link:</style.css>; rel=preload; as=style' ); }
107. Server push if ( ! is_cached( '/style.css' ) && is_http2() ) { header( 'link:</style.css>; rel=preload; as=style' ); setcookie( '/style.css', 'cached', 0, '/' ); }
108. is_cached() function is_cached( $filename ) { if ( 'cached' === $_COOKIE[ $filename ] ) { return true; } else { return false; } }
109. https://h2o.examp1e.net/configure/http2_directives.html
110. https://h2o.examp1e.net/configure/http2_directives.html
111. Critical path CSS A modern approach
113. pwcc.cc/go/loadcss
114. HTTP/1, with critical path CSS HTML CSS
115. HTTP/2, without critical path CSS HTML CSS
116. <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
117. <?php if ( ! is_cached( '/style.css' ) && is_http2() ) { header( 'link:</style.css>; rel=preload; as=style' ); setcookie( '/style.css', 'cached', 0, '/' ); } ?> <html> <head> <?php
118. <html> <head> <?php if ( is_http2() || is_cached( '/style.css') ) : /* HTML: cached or HTTP 2 */ else : /* HTML: uncached HTTP 1 */ endif; ?> </head>
119. <link rel='shortcut icon' href='/favicon.ico'> <link rel='apple-touch-icon' sizes='57x57' href='/….png'> <link rel='apple-touch-icon' sizes='114x114' href='/….png'> <link rel='apple-touch-icon' sizes='72x72' href='/….png'> <link rel='apple-touch-icon' sizes='144x144' href='/….png'> <link rel='apple-touch-icon' sizes='60x60' href='/….png'> <link rel='apple-touch-icon' sizes='120x120' href='/….png'> <link rel='apple-touch-icon' sizes='76x76' href='/….png'> <link rel='apple-touch-icon' sizes='152x152' href='/….png'> <link rel='icon' type='image/png' href='/….png'> <link rel='icon' type='image/png' href='/….png' sizes='160x160'> <link rel='icon' type='image/png' href='/….png' sizes='96x96'> <link rel='icon' type='image/png' href='/….png' sizes='16x16'> <link rel='icon' type='image/png' href='/….png' sizes='32x32'> <meta name='msapplication-TileColor' content='#006ef6'> <meta name='msapplication-TileImage' content='/….png'> <meta name='msapplication-config' content='/browserconfig.xml'>
120. Web fonts
122. Visual progress Via WebPageTest
123. Visual progress Via WebPageTest
124. Blocking render with web fonts <link href='https://fonts.googleapis.com/css? ↩︎
 family=Open+Sans:400,400italic,700,700italic' 
 rel='stylesheet' type='text/css'> <style> html { font-family: "Open Sans", sans-serif; } </style>
125. External resources
126. External resources prevent server push
127. External resources in effect, drop back to HTTP/1
131. caniuse.com/font-loading, March 2016
132. caniuse.com/font-loading, March 2016
134. pwcc.cc/go/fout
135. FOUT var openSans = new FontFaceObserver( "Open Sans" ); openSans .check() .then( function(){ document.documentElement.className += " wf-active"; setCookie( 'wf', 'active' ); } );
136. FOUT var openSans = new FontFaceObserver( "Open Sans" ); openSans .check() .then( function(){ document.documentElement.className += " wf-active"; setCookie( 'wf', 'active' ); } );
137. FOUT <link href='https://fonts.googleapis.com/css? ↩︎
 family=Open+Sans:400,400italic,700,700italic' 
 rel='stylesheet' type='text/css'> <style> html { font-family: "Open Sans", sans-serif; } </style>
138. <link href='https://fonts.googleapis.com/css? ↩︎
 family=Open+Sans:400,400italic,700,700italic' 
 rel='stylesheet' type='text/css'> <style> html.wf-active { font-family: "Open Sans", sans-serif; } </style> FOUT
139. <link href='https://fonts.googleapis.com/css? ↩︎
 family=Open+Sans:400,400italic,700,700italic' 
 rel='stylesheet' type='text/css'> <style> html.wf-active { font-family: "Open Sans", sans-serif; } </style> FOUT
140. family=Open+Sans:400,400italic,700,700italic' 
 rel='stylesheet' type='text/css'> <style> html.wf-active { font-family: "Open Sans", sans-serif; } </style> <script> if ( 'active' === getCookie( 'wf' ) ) { document.documentElement.className += " wf-active"; } </script> FOUT
141. Web fonts are an enhancement
142. Locally hosted fonts
143. Locally hosted, HTTP/2 fonts HTML Font
144. HTTP/2 presents an opportunity
145. …to break the web, again
146. Yutaka Tsutano (CC) - flic.kr/p/dq5sCy
147. Breaking things /* ------ TABLET ------ */ @media only screen and ( min-width : 768px ) and ( max-width : 1024px ) { }
148. Mike Deerkoski (CC) - flic.kr/p/bWmqBT It’s the same size but smaller
149. ⭐⭐⭐⭐"
150. Everything you know about performance is now wrong and former best practices are now an anti-pattern and considered harmful.
151. Everything you know about performance is now twice as complicated.
152. Thank you. Peter Wilson • peterwilson.cc • @pwcc