Presentation for WebDirections Respond 2016

A presentation at Respond by Web Directions in April 2016 in Sydney NSW, Australia by Peter Wilson

Slide 1

Slide 1

Wed 29 Oct 1969 ~ ucla$ ░

Slide 2

Slide 2

Wed 29 Oct 1969 ~ ucla$ ░

Slide 3

Slide 3

Wed 29 Oct 1969 ~ ucla$ l o

░
								
gin

Slide 4

Slide 4

Wed 29 Oct 1969 ~ ucla$ l o

░ ░

Slide 5

Slide 5

Performance: HTTP/ 2 in a 1.5 world Peter Wilson • peterwilson.cc • @pwcc

Slide 6

Slide 6

Slide 7

Slide 7

Linnaea Mallette

Slide 8

Slide 8

Today

Slide 9

Slide 9

Bytes on the page

Slide 10

Slide 10

Total page size (MB) Nov 2011 - March 2016 0.5 1.0 1.5 2.0 2.5 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

Slide 11

Slide 11

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

Slide 12

Slide 12

Assets per page Nov 2011 - March 2016 20 40 60 80 100 120 1 Nov '11 15 May '12 1 Dec '12 15 Jun '13 1 Jan '14 15 Jul '14 1 Feb '15 15 Aug '15 1 Mar '16 httparchive.org/trends.php , March 2016

Slide 13

Slide 13

Webfonts Multiple of Nov 2011 (bytes) 2 4 6 8 10 12 14 16 18 20 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

Slide 14

Slide 14

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

Slide 15

Slide 15

Load time Start render: 4.2 seconds

Slide 16

Slide 16

Load time Visually complete: 12.7 seconds

Slide 17

Slide 17

Load time Document complete: 15.23 sec

Slide 18

Slide 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

Slide 19

Slide 19

Slide 20

Slide 20

Money

Slide 21

Slide 21

Slide 22

Slide 22

Walmart conversion rate slideshare.net/devonauerswald/walmart-pagespeedslide 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 6 - 7 7 - 8 8 - 9 9 - 10 10 - 11 11 - 12 12 - 13 13 - 14 14 - 15 15+

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

Measure a starting point

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

WebPageTest - webpagetest.org

Slide 32

Slide 32

WebPageTest - webpagetest.org

Slide 33

Slide 33

Key metrics Document Complete Fully Loaded Load Time First Byte Start Render Speed Index DOM Elements Time Requests Bytes In Time Requests Bytes In 3.770s 0.771s 1.789s 1834 397 3.770s 27 635 KB 4.072s 33 661 KB WebPageTest - webpagetest.org

Slide 34

Slide 34

Timeline view

Slide 35

Slide 35

Comparison timelines Additional blocking request in HTML Header Timed using WebPageTest - pwcc.cc/respond/blocking 0.5s 1.0s 1.5s 2.0s 0% 0% 0% 100% 0% 86% 100% Blocked Unblocked

Slide 36

Slide 36

Comparison timelines Additional blocking request in HTML Header Timed using WebPageTest - pwcc.cc/respond/blocking 0.5s 1.0s 1.5s 2.0s 0% 0% 0% 100% 0% 86% 100% Blocked Unblocked

Slide 37

Slide 37

Comparison timelines Additional blocking request in HTML Header Timed using WebPageTest - pwcc.cc/respond/blocking 0.5s 1.0s 1.5s 2.0s 0% 0% 0% 100% 0% 86% 100% Blocked Unblocked

Slide 38

Slide 38

Comparison timelines Additional blocking request in HTML Header Timed using WebPageTest - pwcc.cc/respond/blocking 0.5s 1.0s 1.5s 2.0s 0% 0% 0% 100% 0% 86% 100% Blocked Unblocked

Slide 39

Slide 39

Speed index Document Complete Fully Loaded Load Time First Byte Start Render Speed Index DOM Elements Time Requests Bytes In Time Requests Bytes In 3.770s 0.771s 1.789s 1834 397 3.770s 27 635 KB 4.072s 33 661 KB WebPageTest - webpagetest.org

Slide 40

Slide 40

53 / 100 Our PageSpeed score is you won’t believe how 
 much it’s costing

Slide 41

Slide 41

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

Slide 42

Slide 42

~$

Slide 43

Slide 43

~$ n s l o o k u p e x a m p l e . c o m

Slide 44

Slide 44

~$ n s l o o k u p e x a m p l e . c o m N o n

a u t h o r i t a t i v e a n s w e r : N a m e : e x a m p l e . c o m A d d r e s s : 1 1 7 . 5 3 . 1 6 3 . 9 1 ~ $

Slide 45

Slide 45

~$

telnet 117.53.163.91 80 Connected to 117.53.163.91.

Slide 46

Slide 46

~$ telnet 117.53.163.91 80

Connected to 117.53.163.91. GET / HTTP/1.1 Host: example.com

Slide 47

Slide 47

~$ telnet 117.53.163.91 80

Connected to 117.53.163.91. GET / HTTP/1.1 Host: example.com

 	 	 	 	 	 	 nextSlideOnWindowFocus	:&#34;off&#34;	,			 	 	 	 	 	 	 disableFocusListener	:false	,			 	 	 	 	 	 }		 	 	 	 	 });		 	 	 	 }		 	 	 });		/*ready*/				 	 </	script	>				<	link		rel	=&#39;stylesheet&#39;		id	=&#39;mediaelement-css&#39;				href	=&#34;http://example.com/wp-includes/js/mediaelement/mediaelementplayer.min.css?01c19f&#34;		type	=&#39;text/css&#39;		media	=&#39;all&#39;		/>		<link		rel	=&#39;stylesheet&#39;		id	=&#39;wp-mediaelement-css&#39;				href	=&#34;http://example.com/wp-includes/js/mediaelement/wp-mediaelement.css?01c19f&#34;		type	=&#39;text/css&#39;		media	=&#39;all&#39;		/>		<link		rel	=&#39;stylesheet&#39;		id	=&#39;joy-twitter-widget-css&#39;				href	=&#34;http://example.com/wp-content/plugins/joy-twitter-widget/joy-twitter-widget.css?01c19f&#34;		type	=&#39;text/css&#39;		media	=&#39;all&#39;		/>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-includes/js/jquery/ui/core.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-includes/js/jquery/ui/datepicker.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;	>		/*	<![CDATA[	*/			var		scriptParams		=	{	&#34;google_search_engine_id&#34;	:&#34;017877086915232438708:-pvqphefyyw&#34;	};		/*	]]>	*/			</	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/wp-google-search/assets/js/google_cse_v2.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;//example.com/wp-content/plugins/connections/vendor/picturefill/picturefill.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;	>		/*	<![CDATA[	*/			var	qpprFrontData	=	{&#34;linkData&#34;:{&#34;http:\/\/example.com\/?p=3925&#34;:[0,1,&#34;http:\/\/example.com\/?p=3893&#34;],&#34;http:\/\/example.com\/blog\/2014\/10\/sponsorship-directory\/&#34;:[0,1,&#34;&#34;],&#34;http:\/\/example.com\/?p=4437&#34;:[0,1,&#34;http:\/\/example.com\/centrestage&#34;],&#34;http:\/\/example.com\/?p=4522&#34;:[0,1,&#34;http:\/\/example.com\/blog\/vacancy\/2015-radiothon-fundraising-events-coordinator\/&#34;],&#34;http:\/\/example.com\/blog\/2015\/05\/remember-joy-join\/&#34;:[0,1,&#34;&#34;],&#34;http:\/\/example.com\/blog\/2015\/06\/taste-of-radio\/&#34;:[0,1,&#34;http:\/\/example.com\/training\/taste-of-radio\/&#34;],&#34;http:\/\/example.com\/blog\/2015\/06\/new-music-to-weekdays\/&#34;:[0,1,&#34;http:\/\/example.com\/music&#34;],&#34;http:\/\/example.com\/?p=4916&#34;:[0,1,&#34;http:\/\/example.com\/rebel-heart-tour\/&#34;],&#34;http:\/\/example.com\/blog\/2015\/07\/centre-stage-the-winners\/&#34;:[0,1,&#34;http:\/\/example.com\/centrestage&#34;],&#34;http:\/\/example.com\/blog\/2015\/08\/latest-podcasts\/&#34;:[0,1,&#34;http:\/\/example.com\/podcasts&#34;],&#34;http:\/\/example.com\/?p=5079&#34;:[0,1,&#34;https:\/\/www.surveymonkey.com\/r\/joy949survey&#34;],&#34;http:\/\/example.com\/blog\/2015\/12\/volunteer-vacancies\/&#34;:[0,1,&#34;http:\/\/example.com\/vacancies-category\/volunteer\/&#34;],&#34;http:\/\/example.com\/blog\/2015\/11\/94days-of-summer-is-coming\/&#34;:[0,1,&#34;&#34;],&#34;http:\/\/example.com\/?p=5282&#34;:[0,1,&#34;https:\/\/www.outix.net\/booktickets\/event\/JOYFundraiserDanish&#34;],&#34;http:\/\/example.com\/blog\/2016\/02\/new-taste-radio-dates\/&#34;:[0,1,&#34;http:\/\/example.com\/training\/taste-of-radio\/&#34;]},&#34;siteURL&#34;:&#34;http:\/\/example.com&#34;,&#34;siteURLq&#34;:&#34;http:\/\/example.com&#34;};	/*	]]>	*/			</	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/quick-pagepost-redirect-plugin/js/qppr_frontend_script.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/themes/morning/js/dropdown.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;	>		/*	<![CDATA[	*/			var		zoomOptions		=	[];		/*	]]>	*/			</	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/themes/morning/js/functions.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/themes/morning/functions/wpzoom/assets/js/galleria.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/themes/morning/functions/wpzoom/assets/js/wzslider.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/bj-lazy-load/js/bj-lazy-load.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/wp-jquery-lightbox/jquery.touchwipe.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;	>		/*	<![CDATA[	*/			var		JQLBSettings		=	{	&#34;showTitle&#34;	:&#34;1&#34;	,&#34;showCaption&#34;	:&#34;1&#34;	,&#34;showNumbers&#34;	:&#34;1&#34;	,&#34;fitToScreen&#34;	:&#34;1&#34;	,&#34;resizeSpeed&#34;	:&#34;400&#34;	,&#34;showDownload&#34;	:&#34;0&#34;	,&#34;navbarOnTop&#34;	:&#34;0&#34;	,&#34;marginSize&#34;	:&#34;20&#34;	,&#34;slideshowSpeed&#34;	:&#34;4000&#34;	,&#34;prevLinkTitle&#34;	:&#34;previous	image&#34;	,&#34;nextLinkTitle&#34;	:&#34;next	image&#34;	,&#34;closeTitle&#34;	:&#34;close	image		gallery&#34;	,&#34;image&#34;	:&#34;Image	&#34;	,&#34;of&#34;	:&#34;	of	&#34;	,&#34;download&#34;	:&#34;Download&#34;	,&#34;pause&#34;	:&#34;(pause	slideshow)&#34;	,&#34;play&#34;	:&#34;(play	slideshow)&#34;	};		/*	]]>	*/			</	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/wp-jquery-lightbox/jquery.lightbox.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-includes/js/wp-embed.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/powerpress/player.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;	>		/*	<![CDATA[	*/			var		mejsL10n		=	{	&#34;language&#34;	:&#34;en-US&#34;	,&#34;strings&#34;	:{&#34;Close&#34;	:&#34;Close&#34;	,&#34;Fullscreen&#34;	:&#34;Fullscreen&#34;	,&#34;Download	File&#34;	:&#34;Download	File&#34;	,&#34;Download	Video&#34;	:&#34;Download	Video&#34;	,&#34;Play\/Pause&#34;	:&#34;Play\/Pause&#34;	,&#34;Mute	Toggle&#34;	:&#34;Mute	Toggle&#34;	,&#34;None&#34;	:&#34;None&#34;	,&#34;Turn	off	Fullscreen&#34;	:&#34;Turn	off	Fullscreen&#34;	,&#34;Go		Fullscreen&#34;	:&#34;Go	Fullscreen&#34;	,&#34;Unmute&#34;	:&#34;Unmute&#34;	,&#34;Mute&#34;	:&#34;Mute&#34;	,&#34;Captions\/Subtitles&#34;	:&#34;Captions\/Subtitles&#34;	}};		var		_wpmejsSettings		=	{	&#34;pluginPath&#34;	:&#34;\/wp-includes\/js\/mediaelement\/&#34;	};		/*	]]>	*/			</	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-includes/js/mediaelement/wp-mediaelement.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/joy-public-website-joy-nownext-widget/js/json-jquery.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/joy-newest-tracks-widget/js/newest-tracks.min.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/joy-facebook-page-widget/js/joy-facebook-page.js?01c19f&#34;	></	script	>		<script		type	=&#39;text/javascript&#39;	>		/*	<![CDATA[	*/			var		JOYTwitter_config		=	{	&#34;ajaxurl&#34;	:&#34;https:\/\/example.com\/wp-admin\/admin-ajax.php&#34;	,&#34;sec&#34;	:&#34;ecaf121956&#34;	};		/*	]]>	*/			</	script	>		<script		type	=&#39;text/javascript&#39;		src	=&#34;http://example.com/wp-content/plugins/joy-twitter-widget/joy-twitter-widget-min.js?01c19f&#34;	></	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	=&#34;text/javascript&#34;	>window	.NREUM	||	(NREUM	={});	NREUM	.info	={&#34;beacon&#34;	:&#34;bam.nr-data.net&#34;	,&#34;licenseKey&#34;	:&#34;70c3bbd35e&#34;	,&#34;applicationID&#34;	:&#34;1953133&#34;	,&#34;transactionName&#34;	:&#34;M1RRZ0FUX0ZTV0ZRWAoeclBHXF5bHV1cXFIc&#34;	,&#34;queueTime&#34;	:0,&#34;applicationTime&#34;	:	1036	,&#34;atts&#34;	:&#34;HxNSEQlOTEg=&#34;	,&#34;errorBeacon&#34;	:&#34;bam.nr-data.net&#34;	,&#34;agent&#34;	:&#34;&#34;	}</	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				Served	from:	example.com	@	2016-02-27	17:54:09	by	W3	Total	Cache	-->

Slide 48

Slide 48

Slide 49

Slide 49

Assets on a page

Slide 50

Slide 50

Blockers HTML

Slide 51

Slide 51

Blockers HTML CSS

Slide 52

Slide 52

Blockers HTML CSS IMG IMG IMG FONTS

Slide 53

Slide 53

Blockers HTML CSS IMG IMG IMG JS FONTS

Slide 54

Slide 54

Blockers HTML CSS IMG IMG IMG JS IFRAME FONTS

Slide 55

Slide 55

Waterfall WebPageTest - webpagetest.org

Slide 56

Slide 56

WebPageTest - webpagetest.org

Waterfall

Slide 57

Slide 57

WebPageTest - webpagetest.org

Waterfall

Slide 58

Slide 58

WebPageTest - webpagetest.org

Waterfall

Slide 59

Slide 59

But, we have HTTP/2 now.

Slide 60

Slide 60

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

Slide 61

Slide 61

These titles are considered harmful

Slide 62

Slide 62

caniuse.com/http2 , March 2016

Slide 63

Slide 63

caniuse.com/http2 , March 2016

Slide 64

Slide 64

Sites using HTTP/2 w3techs.com , March 2016

Slide 65

Slide 65

Traffic

Slide 66

Slide 66

Your site running HTTP/2

Slide 67

Slide 67

HTTP/2 A fictional guide

Slide 68

Slide 68

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&#34;\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Ö_ä~%Ðü uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})

Slide 69

Slide 69

~$

Slide 70

Slide 70

~$ s s h 1 1 7 . 5 3 . 1 6 3 . 9 1 4 4 3 C o n n e c t e d t o 1 1 7 . 5 3 . 1 6 3 . 9 1 .

Slide 71

Slide 71

~$ ssh 117.53.163.91 443 Connected to 117.53.163.91. H a n d s h a k e T y p e : C l i e n t H e l l o V e r s i o n : T L S 1 . 2 S e r v e r n a m e : e x a m p l e . c o m

Slide 72

Slide 72

~$ ssh 117.53.163.91 443 Connected to 117.53.163.91. Handshake Type: Client Hello Version: TLS 1.2

Server name: example.com C e r t i f i c a t e : 1 4 : 9 f : f 0 : 9 e : a b … C e r t i f i c a t e L e n g t h : 4 0 9 6 U p g r a d e : H T T P / 2

Slide 73

Slide 73

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 C l i e n t K e y E x c h a n g e : 8 C : 7 7 : 8 2 … G E T / H T T P / 2 H o s t : e x a m p l e . c o m

Slide 74

Slide 74

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 G E T / s t y l e . c s s H T T P / 2 G E T / s c r i p t . j s H T T P / 2

Slide 75

Slide 75

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 G E T / s t y l e . c s s H T T P / 2 G E T / s c r i p t . j s H T T P / 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.8125 rem ;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.8125 rem } .SocialLink ,.SocialLink:visited {color :inherit ;font-size :13px;font-size :0.8125 rem ;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.875 rem ;line-height :1.7142857143 ;display :block } .Comment ,.Comment p,.Comment blockquote ,.Comment pre {margin-bottom :1.7142857143 em} .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 :-64 px} .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.5 em} .Page_Main {padding-top :1.5 rem ;padding-bottom :1.5 rem ;background-color :#fff } .Page_Footer {padding-top :1.5 rem } @media (min-width :60em){.Page_Header {float :left ;width :220 px} .Page_Main {float :left ;width :calc( 100 % - 440 px )} .Page_Sidebar {float :left ;width :220 px;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 :.25 em} @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.6666666667 vh; 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.8125 rem ;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.875 rem ;line-height :1.7142857143 ;border-width :1px;outline :none ;padding :calc( .5rem - 1px ) 0.75 rem ;border-style :solid ;border-color :#f3f3f3 }

Slide 76

Slide 76

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 RDDZ PK 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&#34;\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Ö_ä~%Ðü uÚÞ㨫÷?ô»l®þ2yï[fX÷Æßô7ÆgÕsÅXúZçÆ6P#F[Ãu9üë1|KkrG”ÁÜÙÚIí|÷ã¼¼û0Üû})

Slide 77

Slide 77

Server push

Slide 78

Slide 78

Handshake Type: Client Hello Version: TLS 1.2

Server name: example.com

Certificate: 14:9f:f0:9e:ab … Certificate Length: 4096 Upgrade : HTTP/2 ClientKeyExchange: 8C:77:82…

GET / HTTP/2

Host: example.com

Slide 79

Slide 79

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

Slide 80

Slide 80

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 L i n k : < / s t y l e . c s s

; r e l

p r e l o a d L i n k : < / s c r i p t . j s

; r e l

p r e l o a d

Slide 81

Slide 81

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 L i n k : < / s t y l e . c s s

; r e l

p r e l o a d L i n k : < / s c r i p t . j s

; r e l

p r e l o a d

.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.8125 rem ;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.8125 rem } .SocialLink ,.SocialLink:visited {color :inherit ;font-size :13px;font-size :0.8125 rem ;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.875 rem ;line-height :1.7142857143 ;display :block } .Comment ,.Comment p,.Comment blockquote ,.Comment pre {margin-bottom :1.7142857143 em} .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 :-64 px} .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.5 em} .Page_Main {padding-top :1.5 rem ;padding-bottom :1.5 rem ;background-color :#fff } .Page_Footer {padding-top :1.5 rem } @media (min-width :60em){.Page_Header {float :left ;width :220 px} .Page_Main {float :left ;width :calc( 100 % - 440 px )} .Page_Sidebar {float :left ;width :220 px;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 :.25 em} @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.6666666667 vh; 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.8125 rem ;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.875 rem ;line-height :1.7142857143 ;border-width :1px;outline :none ;padding :calc( .5rem - 1px ) 0.75 rem ;border-style :solid ;border-color :#f3f3f3 }

Slide 82

Slide 82

Server push Nag your system admins to install this.

Slide 83

Slide 83

Performance wars

Slide 84

Slide 84

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

Slide 85

Slide 85

HTTP/1’s former best practices can

be harmful over HTTP/2.

Slide 86

Slide 86

Critical path CSS < html

	<

head

			<

title

Example.com</ title

			<style	type=&#39;text/css&#39;>

html{font-family:sans-serif;} body{margin:0} article,aside,details,figcaption,figure,

							footer,header,hgroup,main,nav,section,summary

							{display:block}

Slide 87

Slide 87

HTTP/1, without critical path CSS HTML CSS

Slide 88

Slide 88

HTTP/1, with critical path CSS HTML CSS

Slide 89

Slide 89

HTTP/2, with critical path CSS HTML CSS

Slide 90

Slide 90

HTTP/2, without critical path CSS HTML CSS

Slide 91

Slide 91

HTTP/2 server push

Slide 92

Slide 92

w3.org/TR/preload/

Slide 93

Slide 93

Server push

Slide 94

Slide 94

Server push

Slide 95

Slide 95

Server push if ( is_http2() ) {

header ( 'link:</style.css>; rel=preload; as=style' );

header ( 'link:</script.js>; rel=preload; as=script' );

}

Slide 96

Slide 96

Server push if ( is_http2 () ) {

header ( 'link:</style.css>; rel=preload; as=style' );

header ( 'link:</script.js>; rel=preload; as=script' );

}

PHP code samples

Slide 97

Slide 97

Server push if ( is_http2 () ) {

header ( 'link:</style.css>; rel=preload; as=style' );

header ( 'link:</script.js>; rel=preload; as=script' );

}

Slide 98

Slide 98

Server push is unsophisticated

Slide 99

Slide 99

Server push if ( ! is_cached( '/style.css' )

&& is_http2() ) {

header ( 'link:</style.css>; rel=preload; as=style' );

}

Slide 100

Slide 100

Server push if ( ! is_cached( '/style.css' ) && is_http2() ) {

header ( 'link:</style.css>; rel=preload; as=style' );

setcookie ( '/style.css' , 'cached' , 0 , '/' ); }

Slide 101

Slide 101

is_cached() function

is_cached ( $filename ) {

if ( 'cached'

=== $_COOKIE[ $filename ] ) {

return

true ; }

else {

return

false ; } }

Slide 102

Slide 102

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

Slide 103

Slide 103

Critical path CSS A modern approach

Slide 104

Slide 104

pwcc.cc/respond/loadcss

Slide 105

Slide 105

HTTP/1, with critical path CSS HTML CSS

Slide 106

Slide 106

HTTP/2, without critical path CSS HTML CSS

Slide 107

Slide 107

< 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

Slide 108

Slide 108

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

< html

< head

<?php if ( is_http2() || is_cached( &#39;/style.css&#39; ) ) :

Slide 109

Slide 109

?> < html

< head

<?php if ( is_http2() || is_cached( &#39;/style.css&#39; ) ) : /* HTML: cached or HTTP 2 */ else : /* HTML: uncached HTTP 1 */ endif ; ?>

</ head

Slide 110

Slide 110

< 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'

Slide 111

Slide 111

Web fonts

Slide 112

Slide 112

Slide 113

Slide 113

Visual progress Via WebPageTest

Slide 114

Slide 114

Visual progress Via WebPageTest

Slide 115

Slide 115

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

Slide 116

Slide 116

External resources

Slide 117

Slide 117

External resources prevent server push

Slide 118

Slide 118

External resources in effect, drop back to HTTP/1

Slide 119

Slide 119

Slide 120

Slide 120

Slide 121

Slide 121

Slide 122

Slide 122

caniuse.com/font-loading , March 2016

Slide 123

Slide 123

caniuse.com/font-loading , March 2016

Slide 124

Slide 124

pwcc.cc/respond/fout

Slide 125

Slide 125

FOUT var openSans

new

FontFaceObserver ( "Open Sans" ); openSans . check () . then ( function (){

document . documentElement . className

+=

" wf-active" ;

setCookie ( 'wf' , 'active' ); } );

Slide 126

Slide 126

FOUT var openSans

new

FontFaceObserver ( "Open Sans" ); openSans . check () . then ( function (){

document . documentElement . className

+=

" wf-active" ;

setCookie ( 'wf' , 'active' ); } );

Slide 127

Slide 127

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

Slide 128

Slide 128

< 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

< script

FOUT

Slide 129

Slide 129 

			family=Open+Sans:400,400italic,700,700italic&#39;




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

Slide 130

Slide 130

Web fonts are an enhancement

Slide 131

Slide 131

Locally hosted fonts

Slide 132

Slide 132

Locally hosted, HTTP/2 fonts HTML Font

Slide 133

Slide 133

HTTP/2 presents an opportunity

Slide 134

Slide 134

…to break the web, again

Slide 135

Slide 135

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

Slide 136

Slide 136

Breaking things /* ------ TABLET ------ */ @media

only

screen

and

						(

min-width : 768 px ) and

						(

max-width : 1024 px ) { }

Slide 137

Slide 137

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

Slide 138

Slide 138

⭐⭐⭐⭐"

Slide 139

Slide 139

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

Slide 140

Slide 140

Everything you know about performance is now

twice as complicated.

Slide 141

Slide 141

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