Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
https://www.flickr.com/photos/sharynmorrow/643126727
Speed Matters…
So why is your site so slow?
@AndyDavies
ReDevelop 2015...
https://www.flickr.com/photos/dullhunk/3930915541
But I’m frustrated…
http://www.flickr.com/photos/sybrenstuvel/2468506922
The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
(it’s just) Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
and it’s getting worse!
Only 12% of the top 100 (US) retail sites rendered
feature content in less than 3 seconds. !
!
Yea...
“We’re not being deliberate about performance”!
Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728
But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+...
Reader panel (3,000 people) rated speed (fast page
load time) as their second most important driver!
!
Speed had the highe...
Speed matters!
Walmart 2012
http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
Increased conversions by 10%!
!
...
Improved load time from 1.2s to 0.5s!
!
+28% page views / session!
+21% time on site / visit!
+20% conversion rate
http://...
We’re more tolerant as we get further into purchase funnels
Less Tolerant
More Tolerant
and sometimes we get suspicious if something’s too fast
and sometimes we get suspicious if something’s too fast
Design is all about finding solutions within constraints,!
if there were no constraints, it’s not design — it’s art.!
Matia...
http://www.flickr.com/photos/communityfriend/2342578485
Embrace those constraints… set a performance budget
Setting a budget
An event that matters to the visitor!
within a set time!
under defined network conditions
“Usable within 10 seconds on GPRS connection”!
BBC News
“SpeedIndex under 1000”!
Paul Irish
Could use page size or number of objects but…
…how 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?
https://www.flickr.com/photos/37873897@N06/6924775578
Do we understand our fundamental building blocks?
https://www.flickr.com/photos/ogimogi/2253657555
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
https://www.flickr.com/photos/63567936@N00/4181042889
that’s sometimes really bad
https://www.flickr.com/photos/chesh2000/4487000196
but the reality is closer to
http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492...
“More Bandwidth Doesn’t Matter (much)”!
Mike Belshe
PageLoadTime
Bandwidth (Mbps)
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39...
Latency = time between request and response
Browser Server
Request
Response
Time
But latency has a linear impact
PageLoadTime(s)
1
2
3
4
Round Trip Time (ms)
0 20 40 60 80 100 120 140 160 180 200 220 240
http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency inc...
http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency inc...
http://www.vectortemplates.com
CDN = content closer to visitor = less latency = faster
There’s the last mile latency too
(and routers, other networking kit, mobile latencies too)
https://www.flickr.com/photos/k...
TCP and the Lower Bound of Web Performance!
John Rauser
Will probably need more than one round trip
71kB
143kB
214kB
285kB...
We can cheat the latency penalty
(sometimes)
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
User gets
feedback
User gets
feedback
Network request
still in progress
???
Convert HTML …
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="styles.css"...
… into Document Object Model (DOM)
html
head body
meta link script title h1 p
img
Convert CSS …
body { font-size: 16px }
h1 { text-decoration: underline}
p { font-weight: bold }
p > span { color: #000 }
i...
… into CSS Object Model (CSSOM)
body
h1 p
span
font-size: 16px
font-size: 16px
text-decoration: underline
font-size: 16px
...
Combine DOM and CSSOM to build Render Tree
body
h1 p
img
font-size: 16px
text-decoration: underline
font-size: 16px
font-w...
Render the Page
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout Paint
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
DOM
CSSOM
JavaScript
JavaScript blocks D...
async attribute avoids JavaScript blocking DOM construction
!
<script async src="myscript.js"></script>
Widely supported -...
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript Render!
Tree
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript Render!
Tree
Fonts and background
images discovered
when render tre...
And we all hate this… right?
Use font foundries that prioritise your visitor’s experience
http://www.flickr.com/photos/splorp/4951916342
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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 [  ] ^...
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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 proposal that may help…
font-display: auto | block | swap | fallback | optional;
https://tabatkins.github.io/specs/css-f...
Another proposal that should help - link rel=“preload”…
https://w3c.github.io/preload/
<!-- preload a widget component -->...
Some other ways of hinting are already here
<link rel="dns-prefetch" href="other.hostname.com">
!
<link rel="subresource" ...
https://www.flickr.com/photos/christian_bachellier/582457911
And HTTP/2 server push is here now too
Be deliberate, design for performance
https://www.flickr.com/photos/9760699@N08/3748770917
Measure frequently - during build and in live
http://www.flickr.com/photos/chandramarsono/4324373384
Remember the constraints of our medium
https://www.flickr.com/photos/33649815@N03/3367739514
https://www.flickr.com/photos/basheertome/4762529213
http://www.flickr.com/photos/nzbuu/4093456029
ThankYou!
@andydavies
andy.davies@nccgroup.com
http://slideshare.net/andydavi...
Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?
Upcoming SlideShare
Loading in …5
×

Speed matters, So why is your site so slow?

22,026 views

Published on

Slides from my talk at ReDevelop 2015

Covers business case for web performance, along with the fundamentals of how latency and the critical rendering path affect page load performance

Published in: Internet, Engineering, Software

Speed matters, So why is your site so slow?

  1. https://www.flickr.com/photos/sharynmorrow/643126727 Speed Matters… So why is your site so slow? @AndyDavies ReDevelop 2015, August 2015
  2. https://www.flickr.com/photos/dullhunk/3930915541
  3. But I’m frustrated… http://www.flickr.com/photos/sybrenstuvel/2468506922
  4. The Web is Too Slow http://www.flickr.com/photos/the_justified_sinner/3507390621
  5. (it’s just) Too many sites are too slow http://www.flickr.com/photos/the_justified_sinner/3507390621
  6. and it’s 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
  7. “We’re not being deliberate about performance”! Tim Kadlec https://www.flickr.com/photos/lukew/7382528728
  8. But only if we build it that way… http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
  9. Reader panel (3,000 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
  10. Speed matters! Walmart 2012
  11. http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds Increased conversions by 10%! ! Shaved 1 second off median home page time! 6 seconds of 98th percentile
  12. Improved load time from 1.2s to 0.5s! ! +28% page views / session! +21% time on site / visit! +20% conversion rate http://blog.quanta-computing.com/etam-earns-20-of-conversion-by-optimising-its-online-store/
  13. We’re more tolerant as we get further into purchase funnels Less Tolerant More Tolerant
  14. and sometimes we get suspicious if something’s too fast
  15. and sometimes we get suspicious if something’s too fast
  16. Design is all about finding solutions within constraints,! if there were no constraints, it’s not design — it’s art.! Matias Duarte “ ”
  17. http://www.flickr.com/photos/communityfriend/2342578485 Embrace those constraints… set a performance budget
  18. Setting a budget An event that matters to the visitor! within a set time! under defined network conditions
  19. “Usable within 10 seconds on GPRS connection”! BBC News
  20. “SpeedIndex under 1000”! Paul Irish
  21. Could use page size or number of objects but…
  22. …how well would they work here?
  23. We know how to make fast sites, there are plenty of recipes out there
  24. How well do we understand our medium? https://www.flickr.com/photos/37873897@N06/6924775578
  25. Do we understand our fundamental building blocks? https://www.flickr.com/photos/ogimogi/2253657555
  26. Which will be faster? 10Mbps 1Mbps
  27. Which will be faster? 10Mbps 1Mbps
  28. Which will be faster? 10Mbps 1Mbps
  29. Which will be faster? 10Mbps 1Mbps
  30. Which will be faster? 10Mbps 1Mbps/ 280ms RTT / 28ms RTT
  31. We often think of the network as a pipe https://www.flickr.com/photos/63567936@N00/4181042889
  32. that’s sometimes really bad https://www.flickr.com/photos/chesh2000/4487000196
  33. but the reality is closer to http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg
  34. “More Bandwidth Doesn’t Matter (much)”! Mike Belshe PageLoadTime Bandwidth (Mbps) 1 2 3 4 5 6 7 8 9 10 1.36s1.37s1.38s1.39s1.41s1.44s1.50s 1.63s 1.95s 3.11s
  35. Latency = time between request and response Browser Server Request Response Time
  36. But latency has a linear impact PageLoadTime(s) 1 2 3 4 Round Trip Time (ms) 0 20 40 60 80 100 120 140 160 180 200 220 240
  37. http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml Latency increases with distance
  38. http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml Latency increases with distance 81ms 201ms 156ms 266ms 232ms 28ms
  39. http://www.vectortemplates.com CDN = content closer to visitor = less latency = faster
  40. There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282
  41. TCP and the Lower Bound of Web Performance! John 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
  42. We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
  43. User gets feedback
  44. User gets feedback Network request still in progress
  45. ???
  46. Convert HTML … <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <script src="script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> </body> </html>
  47. … into Document Object Model (DOM) html head body meta link script title h1 p img
  48. Convert CSS … body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }
  49. … 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 img font-size: 16px border: 1px solid #ccc
  50. 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
  51. Render the Page HTML CSS DOM CSSOM Render! Tree Layout Paint
  52. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript
  53. But what about JavaScript? HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript DOM CSSOM JavaScript JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution
  54. async attribute avoids JavaScript blocking DOM construction ! <script async src="myscript.js"></script> Widely supported - 89.59% (http://caniuse.com/script-async)! ! Doesn’t incur delays of using inline script to load other scripts e.g. Google Analytics snippet
  55. HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript Render! Tree
  56. HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript Render! Tree Fonts and background images discovered when render tree builds
  57. And we all hate this… right?
  58. Use font foundries that prioritise your visitor’s experience http://www.flickr.com/photos/splorp/4951916342
  59. ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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 { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҂ ҃ ҄ ҅ ҆ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ – — ― ‗ ‘ ’ ‚ ‛ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‼ ⁄ ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ € ℅ № ℠ ™ Ω ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  Do we need all those glyphs? Open Sans — 22.1 kB
  60. ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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 { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҂ ҃ ҄ ҅ ҆ ҈ ҉ Ҋ ҋ Ҍ ҍ Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ – — ― ‗ ‘ ’ ‚ ‛ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‼ ⁄ ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣ ₤ ₧ ₫ € ℅ № ℠ ™ Ω ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  Just Latin glyphs… 14.9 kB — 33% saving
  61. A proposal that may help… font-display: auto | block | swap | fallback | optional; https://tabatkins.github.io/specs/css-font-rendering/ Proposal to help control font blocking - CSS Font Rendering Controls
  62. Another proposal that should help - link rel=“preload”… https://w3c.github.io/preload/ <!-- preload a widget component --> <link rel="preload" href="/components/widget.html" as="iframe"> ! <!-- preload an application script --> <link rel="preload" href="/app/script.js" as="javascript"> ! <!-- preload a CSS stylesheet --> <link rel="preload" href="/style/style.css" as="stylesheet"> ! <!-- preload a font --> <link rel="preload" href="//example.com/font.woff2" as="font"> ! <!-- preload an image asset --> <link rel="preload" href="//example.com/image.jpg" as="image" media="max-width: 640px">
  63. Some other ways of hinting are already here <link rel="dns-prefetch" href="other.hostname.com"> ! <link rel="subresource" href="/some_other_resource.js"> ! <link rel="prefetch" href="/some_other_resource.jpeg"> ! <link rel="prerender" href=“//domain.com/next_page.html”>
  64. https://www.flickr.com/photos/christian_bachellier/582457911 And HTTP/2 server push is here now too
  65. Be deliberate, design for performance https://www.flickr.com/photos/9760699@N08/3748770917
  66. Measure frequently - during build and in live http://www.flickr.com/photos/chandramarsono/4324373384
  67. Remember the constraints of our medium https://www.flickr.com/photos/33649815@N03/3367739514
  68. https://www.flickr.com/photos/basheertome/4762529213
  69. http://www.flickr.com/photos/nzbuu/4093456029 ThankYou! @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies

×