httpswwwflickrcomphotossharynmorrow643126727

Speed Mattershellip So why is your site so slow

AndyDavies ReDevelop 2015 August 2015

httpswwwflickrcomphotosdullhunk3930915541

But Irsquom frustratedhellip

httpwwwflickrcomphotossybrenstuvel2468506922

The Web is Too Slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

(itrsquos just) Too many sites are too slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

and itrsquos getting worse

Only 12 of the top 100 (US) retail sites rendered feature content in less than 3 seconds

Year-on-year the median page has slowed down by 23

Tammy Everts - Radware State of the Union Fall 2014

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpswwwflickrcomphotosdullhunk3930915541

But Irsquom frustratedhellip

httpwwwflickrcomphotossybrenstuvel2468506922

The Web is Too Slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

(itrsquos just) Too many sites are too slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

and itrsquos getting worse

Only 12 of the top 100 (US) retail sites rendered feature content in less than 3 seconds

Year-on-year the median page has slowed down by 23

Tammy Everts - Radware State of the Union Fall 2014

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

But Irsquom frustratedhellip

httpwwwflickrcomphotossybrenstuvel2468506922

The Web is Too Slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

(itrsquos just) Too many sites are too slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

and itrsquos getting worse

Only 12 of the top 100 (US) retail sites rendered feature content in less than 3 seconds

Year-on-year the median page has slowed down by 23

Tammy Everts - Radware State of the Union Fall 2014

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

The Web is Too Slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

(itrsquos just) Too many sites are too slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

and itrsquos getting worse

Only 12 of the top 100 (US) retail sites rendered feature content in less than 3 seconds

Year-on-year the median page has slowed down by 23

Tammy Everts - Radware State of the Union Fall 2014

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

(itrsquos just) Too many sites are too slow

httpwwwflickrcomphotosthe_justified_sinner3507390621

and itrsquos getting worse

Only 12 of the top 100 (US) retail sites rendered feature content in less than 3 seconds

Year-on-year the median page has slowed down by 23

Tammy Everts - Radware State of the Union Fall 2014

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

and itrsquos getting worse

Only 12 of the top 100 (US) retail sites rendered feature content in less than 3 seconds

Year-on-year the median page has slowed down by 23

Tammy Everts - Radware State of the Union Fall 2014

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

ldquoWersquore not being deliberate about performancerdquo Tim Kadlec

httpswwwflickrcomphotoslukew7382528728

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

But only if we build it that wayhellip

http3bpblogspotcom-0RqujOyE1roUp9HF7bPxbIAAAAAAAAAbMIjudm6uq-dgs1600This+is+for+Everyonejpg

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Reader panel (3000 people) rated speed (fast page load time) as their second most important driver

Speed had the highest percentage of people saying it was VERY important to them

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Speed matters

Walmart 2012

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpwwwslidesharenetcliffcrockervelocity-ny-how-to-measure-revenue-in-milliseconds

Increased conversions by 10

Shaved 1 second off median home page time 6 seconds of 98th percentile

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Improved load time from 12s to 05s

+28 page views session+21 time on site visit+20 conversion rate

httpblogquanta-computingcometam-earns-20-of-conversion-by-optimising-its-online-store

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Wersquore more tolerant as we get further into purchase funnels

Less Tolerant

More Tolerant

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

and sometimes we get suspicious if somethingrsquos too fast

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

and sometimes we get suspicious if somethingrsquos too fast

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Design is all about finding solutions within constraintsif there were no constraints itrsquos not design mdash itrsquos art

Matias Duarte

ldquordquo

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpwwwflickrcomphotoscommunityfriend2342578485

Embrace those constraintshellip set a performance budget

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Setting a budget

An event that matters to the visitorwithin a set timeunder defined network conditions

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

ldquoUsable within 10 seconds on GPRS connectionrdquoBBC News

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

ldquoSpeedIndex under 1000rdquoPaul Irish

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Could use page size or number of objects buthellip

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

helliphow well would they work here

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

We know how to make fast sites there are plenty of recipes out there

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

How well do we understand our medium

httpswwwflickrcomphotos37873897N066924775578

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Do we understand our fundamental building blocks

httpswwwflickrcomphotosogimogi2253657555

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Which will be faster

10Mbps 1Mbps

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Which will be faster

10Mbps 1Mbps 280ms RTT 28ms RTT

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

We often think of the network as a pipe

httpswwwflickrcomphotos63567936N004181042889

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

thatrsquos sometimes really bad

httpswwwflickrcomphotoschesh20004487000196

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

but the reality is closer to

http1m0esx2939yhjwld8419obqhybwpenginenetdna-cdncomwp-contentuploads201406DSC_0492jpg

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

ldquoMore Bandwidth Doesnrsquot Matter (much)rdquoMike Belshe

Page

Loa

d T

ime

Bandwidth (Mbps)

1 2 3 4 5 6 7 8 9 10

136s137s138s139s141s144s150s163s

195s

311s

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Latency = time between request and response

Browser Server

Request

Response

Tim

e

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

But latency has a linear impactPa

ge L

oad

Tim

e (s

)

1

2

3

4

Round Trip Time (ms)

0 20 40 60 80 100 120 140 160 180 200 220 240

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpwwwvectortemplatescomBT Backbone roundtrip times from London httpippmbtnethoureuropeloshtml

Latency increases with distance

81ms

201ms

156ms

266ms

232ms

28ms

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpwwwvectortemplatescom

CDN = content closer to visitor = less latency = faster

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Therersquos the last mile latency too (and routers other networking kit mobile latencies too)

httpswwwflickrcomphotoskiwanja3170292282

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

TCP and the Lower Bound of Web PerformanceJohn Rauser

Will probably need more than one round trip

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

We can cheat the latency penalty (sometimes)

httpsspeakerdeckcommikeyksecrets-to-lightning-fast-mobile-design

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

User gets feedback

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

User gets feedback

Network request still in progress

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Convert HTML helliplthtmlgt ltheadgt ltmeta name=viewport content=width=device-widthinitial-scale=10gt ltlink href=stylescss rel=stylesheetgt ltscript src=scriptjsgtltscriptgt lttitlegtHTML Examplelttitlegt ltheadgt ltbodygt lth1gtTitlelth1gt ltpgtSome introductory text and picture ltimg src=imagejpggtltpgt ltbodygt lthtmlgt

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

hellip into Document Object Model (DOM)

html

head body

meta link script title h1 p

img

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Convert CSS hellip

body font-size 16px h1 text-decoration underline p font-weight bold p gt span color 000 img border 1px solid ccc

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

hellip into CSS Object Model (CSSOM)

body

h1 p

span

font-size 16px

font-size 16px text-decoration underline

font-size 16px font-weight bold

font-size 16px font-weight bold color 000

imgfont-size 16px border 1px solid ccc

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Combine DOM and CSSOM to build Render Tree

body

h1 p

img

font-size 16px text-decoration underline

font-size 16px font-weight bold border 1px solid ccc

font-size 16px font-weight bold

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Render the Page

HTML

CSS

DOM

CSSOM

RenderTree Layout Paint

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

But what about JavaScript

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript

DOM

CSSOM

JavaScript

JavaScript blocks DOM constructionCSSOM construction blocks JavaScript execution

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

async attribute avoids JavaScript blocking DOM construction

ltscript async src=myscriptjsgtltscriptgt

Widely supported - 8959 (httpcaniusecomscript-async)

Doesnrsquot incur delays of using inline script to load other scripts eg Google Analytics snippet

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

HTML

CSS

DOM

CSSOM

RenderTree Layout PaintJavaScript RenderTree

Fonts and background images discovered

when render tree builds

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

And we all hate thishellip right

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Use font foundries that prioritise your visitorrsquos experience

httpwwwflickrcomphotossplorp4951916342

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Do we need all those glyphs Open Sans mdash 221 kB

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

$ amp ( ) + - 0 1 2 3 4 5 6 7 8 9 lt = gt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z | ~ iexcl cent pound curren yen brvbar sect uml copy ordf laquo not reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ΄ ΅ Ά Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ ndash mdash ― lsquo rsquo sbquo ‛ ldquo rdquo bdquo dagger Dagger bull hellip permil prime Prime lsaquo rsaquo frasl ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ euro trade Ω ⅛ ⅜ ⅝ ⅞ part ∆ prod sum minus radic infin int asymp ne le ge loz ff fi fl ffi ffl

Just Latin glyphshellip 149 kB mdash 33 saving

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

A proposal that may helphellip

font-display auto | block | swap | fallback | optional

httpstabatkinsgithubiospecscss-font-rendering

Proposal to help control font blocking - CSS Font Rendering Controls

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Another proposal that should help - link rel=ldquopreloadrdquohellip

httpsw3cgithubiopreload

lt-- preload a widget component --gt ltlink rel=preload href=componentswidgethtml as=iframegt

lt-- preload an application script --gt ltlink rel=preload href=appscriptjs as=javascriptgt

lt-- preload a CSS stylesheet --gt ltlink rel=preload href=stylestylecss as=stylesheetgt

lt-- preload a font --gt ltlink rel=preload href=examplecomfontwoff2 as=fontgt

lt-- preload an image asset --gt ltlink rel=preload href=examplecomimagejpg as=image media=max-width 640pxgt

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Some other ways of hinting are already here

ltlink rel=dns-prefetch href=otherhostnamecomgt

ltlink rel=subresource href=some_other_resourcejsgt

ltlink rel=prefetch href=some_other_resourcejpeggt

ltlink rel=prerender href=ldquodomaincomnext_pagehtmlrdquogt

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpswwwflickrcomphotoschristian_bachellier582457911

And HTTP2 server push is here now too

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Be deliberate design for performance

httpswwwflickrcomphotos9760699N083748770917

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Measure frequently - during build and in live

httpwwwflickrcomphotoschandramarsono4324373384

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

Remember the constraints of our medium

httpswwwflickrcomphotos33649815N033367739514

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpswwwflickrcomphotosbasheertome4762529213

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies

httpwwwflickrcomphotosnzbuu4093456029

Thank You

andydavies13andydaviesnccgroupcom13

httpslidesharenetandydavies