Slides from talk to NCC Group customers at AutoTrader Manchester on 22 Oct 2015

1. Making Mobile Sites Faster
@andydavies
NCC Group, Oct 2015
http://www.flickr.com/photos/b-tal/156919562

2. The mobile web is under threat…
Digital media usage time is exploding right now, and it’
predominantly being driven by mobile apps.
476,553 480,967 550,522
409,847
621,410
778,95477,081
97,440
118,299
0
200,000
400,000
600,000
800,000
1,000,000
1,200,000
1,400,000
1,600,000
Jun-2013 Jun-2014 Jun-2015
TotalMinutes(MM)
Desktop Mobile App Mobile Browser
Growth in Digital Media Time Spent
Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience
+53%
vs. 2013
+90%
vs. 2013
+16%
vs. 2013

3. And mobile audience growth is being driven more by m
properties, which are actually bigger and growing faste
Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties
Source: comScore Mobile Metrix, U.S., Age 18+
-
1,000
2,000
3,000
4,000
5,000
6,000
7,000
8,000
9,000
10,000
Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015
UniqueVisitors(000)
Apps Mobile Web +42%
y/y
+21%
y/y
Or is it?

4. 29%
15%
11%
6%
6%
4%
3%
3%
23%
Social Networking
Radio
Games
Multimedia
Instant Messengers
Music
Retail
News/Information
All Others
Share of Mobile App Time Spent
Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015
Social media and entertainment account for the six top
categories and drive two-thirds of total time spent on aApp usage is very specific

5. “At the beginning of 2013 mobile (excluding tablet)
accounted for 26% of our traffic, and we ended the
year with it contributing 33%.”
Stuart McMillan, Schuh
As of Feb 2015 - 45%

6. “Historically, mobile baskets have always been
lower value than desktop but just before
Christmas the difference was only about 6%”
Stuart McMillan, Schuh

7. Strangeloop Networks
“85% of mobile users expect sites to load at least
as fast or faster than sites on their desktop”

8. 0.0%
0.5%
1.0%
1.5%
2.0%
0 2.0 4.0 6.0 8.0 10.0 12.0 14.0 16.0 18.0 20.0 22.0 24.0
Tablet
Phone
Desktop
But we’re not quite meeting expectations
Page Load Time
%ofvisitorsperdevice

9. “We’ve remade the Internet in our image… obese.”
Jason Grigsby
http://www.flickr.com/photos/mrtopher/1414159786

10. Mobile Pages are Growing
0
100
200
300
400
500
600
700
800
900
1,000
1,100
1,200
1,300
1,400
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
Size doubled in just
three years!

11. We’re relying on ever faster phones and networks
http://www.flickr.com/photos/willposh/3825768273/

12. 4G isn’t going to bail us out
GSMA Intelligence + operators
Estimated 20% of connections will be LTE by end of 2017
77.3M
mobile connections
2-3M 4G
connections

13. http://www.flickr.com/photos/endlisnis/174511509

14. So many devices… so much variation…
http://www.flickr.com/photos/adactio/12674230513

15. Meet the $25 Smartphone
http://www.flickr.com/photos/mozillaeu/12748349115

16. Networks are Improving
2G 2.5G 3G 4G WiFi
Faster, Lower Latency???
Special networks…
Conference, Hotel, Coffee shop WiFi

17. Latency is still the big issue
“In 2012, the average worldwide RTT to
Google is still ~100ms, and ~50-60ms within
the US.”
http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
“we are looking at 100-1000ms RTT range
on mobile”
Ilya Grigorik

18. http://www.flickr.com/photos/fastjack/2943793818
It’s not just about speed

19. 3G Radio Resource Control
http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
IDLE CELL_FACH
CELL_DCH Idle for 5s
Idle for 12s
1-2s delay!
Exact timings vary and depend on carrier NOT device
1s delay

20. Fast mobile sites have shorter waterfalls

21. 0
100
200
300
400
500
600
700
800
900
1,000
1,100
1,200
1,300
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
HTML CSS
Fonts Javascript
Images Other
What are mobile sites made of?
http://mobile.httparchive.org/

22. HTML size isn’t changing much
0
10
20
30
40
50
60
70
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/

23. Images are the Bulk of Download
0
100
200
300
400
500
600
700
800
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/

24. Time to bury bitmapped images?
http://www.flickr.com/photos/tonyjcase/7183556158

25. Use vector graphics instead?
SVG: 12 KB vs PNG: 86KB

26. Or CSS?
border-radius: 20px;
background: linear-gradient(left, #f06, #ff0);
Some combinations produce poor paint performance

27. What if only a bitmap image will do?
http://www.flickr.com/photos/orkomedix/5026054826

28. Size images for the viewport
http://www.flickr.com/photos/emzee/139794246

29. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport

30. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport
srcset specifies the images and their width

31. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport
sizes specifies how they should be displayed at each window width

32. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport
fall back for browsers that don’t support srcset

33. Runner gets
lost as image
shrinks
As images get smaller need to focus on subject

34. As images get smaller need to focus on subject

35. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
Switch images for different viewports

36. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
Source element specifies uses media query to indicate which image to use
Switch images for different viewports

37. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
Can specify multiple sources with different media queries
Switch images for different viewports

38. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
img fallback for browsers that don’t support picture or when no query matches
Switch images for different viewports

39. ???

40. http://www.flickr.com/photos/wiertz/6922984303
What’s needed to render the page?

41. Prioritise the Content
Guardian divide page into:
- Content
- Enhancements
- Leftovers

42. How it looks in practice

43. Fonts, Stylesheets, JavaScript all block the page
http://www.flickr.com/photos/timo/3995227

44. CSS size is creeping up
0
10
20
30
40
50
60
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/

45. Doubled Javascript in 3 Years!
0
50
100
150
200
250
300
350
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
How much of it do we
actually need?

46. Added 160kB to page
Increased bounce rate by 12% on mobile
https://speakerdeck.com/lara/design-for-performance

47. We’ve fallen in love with web fonts
http://www.flickr.com/photos/splorp/4951916342

48. and their use has exploded!
0
10
20
30
40
50
60
70
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/

49. But at what cost to visitors experience?

50. Fonts are discovered late in rendering process
HTML
CSS
DOM
CSSOM
Render
Tree
Layout PaintJavaScript
Fonts discovered
when render tree
builds

51. ! " # $ % & ' ( ) * + , - . / 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

52. ! " # $ % & ' ( ) * + , - . / 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 
14.9 kB — 33% saving

53. ! " # $ % & ' ( ) * + , - . / 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 
8.3 kB — 62% saving

54. font-display: auto | block | swap | fallback | optional;
(coming soon)
https://tabatkins.github.io/specs/css-font-display/
Control whether a font blocks rendering

55. Heydings by Heydon Works
Replace icon fonts with SVG

56. Death to Icon Fonts
@ninjanails
Epic FEL, Sept 2015
https://www.flickr.com/photos/minifig/3186925111/

57. W3C Resource Hints should help too
<link rel="dns-prefetch" href=“//example.com”>
<link rel="preconnect" href=“//example.com”>
<link rel="preload" href=“//example.com/font.woff” as=“font”>

58. What can we put off until later?
http://www.flickr.com/photos/melodramababs/5962771148

59. https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design

60. User gets
feedback
Network request
still in progress

61. Magic, the Art of Misdirection
http://www.flickr.com/photos/nozzer/3990622685

62. http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook

63. http://www.flickr.com/photos/communityfriend/2342578485
Embrace Constraints… Set a budget

64. http://www.flickr.com/photos/communityfriend/2342578485
Requests, page size etc. are easier to measure but may not
represent real world experience
Embrace Constraints… Set a budget
“Usable within 10 seconds on GPRS connection” - BBC News
“SpeedIndex under 1000” - Paul Irish, Google

65. Be deliberate, design for performance
https://www.flickr.com/photos/9760699@N08/3748770917

66. Measure frequently - during build…
http://www.flickr.com/photos/chandramarsono/4324373384

67. 0.0%
0.5%
1.0%
1.5%
2.0%
0 2.0 4.0 6.0 8.0 10.0 12.0 14.0 16.0 18.0 20.0 22.0 24.0
Tablet
Phone
Desktop
and in live - visitor’s experience varies
Page Load Time
%ofvisitorsperdevice

68. New opportunities are arriving too
https://www.flickr.com/photos/inucara/14981917985

69. They mix reach of the web, with ease of apps
Service Worker
(programmable proxy in the browser)
Installable Web Apps
(add launch icon to home screen plus control
behaviour)
Push Notifications
(native notifications via web APIs)

70. For a faster mobile site:
Move less bytes
Prioritise what you move
Move them while no-one is looking
Deploy Service Workers etc.
Distract the visitor!

71. Thank You!
@andydavies
andy.davies@nccgroup.trust
http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029