Slides from my talk on mobile performance at NCC Group's Web Performance and Optimisation day (5th March 2014)

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

2. Imagine… later today…
http://www.flickr.com/photos/andrew_bolin/3909446250

3. How long would you wait?
http://www.flickr.com/photos/oatsy40/6198212129

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

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

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. “We’ve remade the Internet in our image… obese.”
Jason Grigsby
http://www.flickr.com/photos/mrtopher/1414159786

8. Mobile Pages are Growing
Requests
Size (kB)
900
800
700
600
500
400
300
200
100
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

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

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

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

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

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

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

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

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

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

18. Fast mobile sites have short waterfalls

19. What are mobile sites made of?
HTML
Fonts
Images
CSS
Javascript
Other
900
800
700
600
500
400
300
200
100
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

20. HTML
Requests
Size (kB)
50
45
40
35
30
25
20
15
10
5
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

21. Images are the Bulk of Download
Requests
Size (kB)
600
500
400
300
200
100
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

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

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

24. Icon fonts
★ ★
☆ ☆
♥ ♥
☁ ☁
Heydings by Heydon Works
“Bog Standard Font”

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

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

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

28. As images get smaller need to focus on subject
“Art Direction” - Jason Grigsby
http://www.flickr.com/photos/barackobamadotcom/5795228030

29. Standards for Responsive Images are Coming

30. ???

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

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

33. Fonts, Stylesheets, JavaScript block rendering
http://www.flickr.com/photos/timo/3995227

34. CSS size is creeping up
Requests
Size (kB)
40
35
30
25
20
15
10
5
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

35. 25% More Javascript
Requests
Size (kB)
200
175
150
125
100
75
50
25
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

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

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

38. But at what cost?

39. 300% Larger in 12 Months!
Requests
Size (kB)
30
25
20
15
10
5
Fe
b
Jan
ec
D
N
ov
ct
O
p
Se
g
Au
Ju
l
Ju
n
M
ay
r
Ap
M
ar
'
13
0
http://mobile.httparchive.org/

40. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK
LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu
vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃ
ÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèé
êëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒ
ēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ
ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦ
ŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘ
ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ
ΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχ
ψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙК
ЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмно
прстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦ
ѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ
ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲ
ҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖ
ӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼ
ӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạ
ẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉ
ỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬử
ỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣
₤ ₧ ₫ € ℅ ℓ № ℠ ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl 
Do we need all those glyphs?
Open Sans — 22.1 kB

41. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK
LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu
vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃ
ÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèé
êëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒ
ēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ
ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦ
ŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘ
ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ
ΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχ
ψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙК
ЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмно
прстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦ
ѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ
ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲ
ҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖ
ӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼ
ӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạ
ẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉ
ỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬử
ỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣
₤ ₧ ₫ € ℅ ℓ № ℠ ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl 
14.9 kB — 33% saving

42. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJK
LMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstu
vwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃ
ÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèé
êëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒ
ēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľ
ĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦ
ŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘ
ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ
ΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχ
ψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙК
ЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмно
прстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥѦ
ѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ
ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲ
ҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖ
ӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼ
ӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạ
ẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉ
ỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬử
ỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣
₤ ₧ ₫ € ℅ ℓ № ℠ ™ Ω ℮ ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl 
8.3 kB — 62% saving

43. Provide hints before a resource is discovered
<link
!
!
<link
!
!
<link
!
!
<link
rel="dns-prefetch" href="other.hostname.com">
rel="subresource" href="/some_other_resource.js">
rel="prefetch" href="/some_other_resource.jpeg">
rel="prerender" href="//domain.com/next_page.html">

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

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

46. Network request
still in progress
User gets
feedback

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

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

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

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

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

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