Making Mobile Sites Faster

Andy Davies
Andy DaviesIndependent Web Performance Consultant at Asteno
Making Mobile Sites Faster

@andydavies
NCC Group, Mar 2014

http://www.flickr.com/photos/b-tal/156919562
Imagine… later today…
http://www.flickr.com/photos/andrew_bolin/3909446250
How long would you wait?
http://www.flickr.com/photos/oatsy40/6198212129
“85% of mobile users expect sites to load at least
as fast or faster than sites on their desktop”
Strangeloop Networks
“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
“Historically, mobile baskets have always been
lower value than desktop but just before
Christmas the difference was only about 6%”
Stuart McMillan, Schuh
“We’ve remade the Internet in our image… obese.”
Jason Grigsby

http://www.flickr.com/photos/mrtopher/1414159786
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/
We’re relying on ever faster phones and networks

http://www.flickr.com/photos/willposh/3825768273/
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
http://www.flickr.com/photos/endlisnis/174511509
So many devices… so much variation…

http://www.flickr.com/photos/adactio/12674230513
Meet the $25 Smartphone

http://www.flickr.com/photos/mozillaeu/12748349115
Networks are Improving
2G

2.5G

3G

4G

WiFi

Faster, Lower Latency???

Special networks…
Conference, Hotel, Coffee shop WiFi
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/
It’s not just about speed
http://www.flickr.com/photos/fastjack/2943793818
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
Fast mobile sites have short waterfalls
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/
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/
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/
Time to bury bitmapped images?
http://www.flickr.com/photos/tonyjcase/7183556158
Use vector graphics instead?

SVG: 12 KB vs PNG: 86KB
Icon fonts
★ ★
☆ ☆
♥ ♥
☁ ☁
Heydings by Heydon Works

“Bog Standard Font”
Use CSS
border-radius: 20px;

background: linear-gradient(left, #f06, #ff0);

Some combinations produce poor paint performance
What if only a bitmap image will do?

http://www.flickr.com/photos/orkomedix/5026054826
Size images for the viewport

http://www.flickr.com/photos/emzee/139794246
As images get smaller need to focus on subject

“Art Direction” - Jason Grigsby
http://www.flickr.com/photos/barackobamadotcom/5795228030
Standards for Responsive Images are Coming
???
What’s needed to render the page?
http://www.flickr.com/photos/wiertz/6922984303
Prioritise the Content
Guardian divide page into:	

!

- Content	

- Enhancements	

- Leftovers
Fonts, Stylesheets, JavaScript block rendering
http://www.flickr.com/photos/timo/3995227
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/
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/
Added 160kB to page
Increased bounce rate by 12% on mobile

https://speakerdeck.com/lara/design-for-performance
We’ve fallen in love with web fonts

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

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

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

8.3 kB — 62% saving
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">
What can we put off until later?

http://www.flickr.com/photos/melodramababs/5962771148
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
Network request
still in progress

User gets
feedback
Magic, the Art of Misdirection

http://www.flickr.com/photos/nozzer/3990622685
http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook
Embrace Constraints… Set a budget

http://www.flickr.com/photos/communityfriend/2342578485
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
For a faster mobile site:
Move less bytes	

Prioritise what you move	

Move them while no-one is looking	

Distract the visitor!
Thank You!
@andydavies	

!

andy.davies@nccgroup.com 	

!

http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029
1 of 52

More Related Content

What's hot(16)

Discipulado para jovens e adultosDiscipulado para jovens e adultos
Discipulado para jovens e adultos
Vilmar Nascimento2.5K views
Super FantásticoSuper Fantástico
Super Fantástico
Partitura de Banda5K views
For sale-01For sale-01
For sale-01
venkatesha912.7K views
Feasts of the lord (telugu)Feasts of the lord (telugu)
Feasts of the lord (telugu)
Shalem Arasavelli1.6K views
Manual Prático de Marca da IASD [Versão 1.2]Manual Prático de Marca da IASD [Versão 1.2]
Manual Prático de Marca da IASD [Versão 1.2]
Igreja Adventista do Sétimo Dia25.9K views
Noções sobre oração!Noções sobre oração!
Noções sobre oração!
ESTUDANTETEOLOGIA3.9K views
O batismo nas águasO batismo nas águas
O batismo nas águas
Pastor Marcello Rocha14.7K views
Uma vida cheia de gratidãoUma vida cheia de gratidão
Uma vida cheia de gratidão
José Reinaldo da Silva1.6K views
discipulado-basico-novos-convertidos.pdfdiscipulado-basico-novos-convertidos.pdf
discipulado-basico-novos-convertidos.pdf
JooAlbertoSoaresdaSi1.7K views

Similar to Making Mobile Sites Faster

Speed Matters!Speed Matters!
Speed Matters!Andy Davies
1.8K views71 slides

Similar to Making Mobile Sites Faster(20)

GTALUG Presentation on CouchDBGTALUG Presentation on CouchDB
GTALUG Presentation on CouchDB
Myles Braithwaite444 views
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy Davies2.2K views
Speed Matters!Speed Matters!
Speed Matters!
Andy Davies1.8K views
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy Davies23.3K views
Revolutions The AppendixRevolutions The Appendix
Revolutions The Appendix
Shunsaku Kudo2K views
Fast and Beautiful Images: PyConWebFast and Beautiful Images: PyConWeb
Fast and Beautiful Images: PyConWeb
Doug Sillars287 views
Web Performance - A Whistlestop TourWeb Performance - A Whistlestop Tour
Web Performance - A Whistlestop Tour
Andy Davies3.7K views
Playful IAs @ Euro IA Summit 2007Playful IAs @ Euro IA Summit 2007
Playful IAs @ Euro IA Summit 2007
Kars Alfrink1.4K views
Faster FrontendsFaster Frontends
Faster Frontends
Andy Davies1.2K views
UX For DevelopersUX For Developers
UX For Developers
Mike Pearce2K views
Silent Running Side E AppendixSilent Running Side E Appendix
Silent Running Side E Appendix
Shunsaku Kudo12.7K views
Game wardenpowerpoint2Game wardenpowerpoint2
Game wardenpowerpoint2
TravisCramp429 views
Map Analytics - Ignite SpatialMap Analytics - Ignite Spatial
Map Analytics - Ignite Spatial
Robert Coup646 views
H h-sgp-upload-riegerH h-sgp-upload-rieger
H h-sgp-upload-rieger
danhoffman187 views
H h-sgp-upload-riegerH h-sgp-upload-rieger
H h-sgp-upload-rieger
danhoffman153 views

Recently uploaded(20)

ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
Maximiliano Firtman161 views
ThroughputThroughput
Throughput
Moisés Armani Ramírez31 views
Liqid: Composable CXL PreviewLiqid: Composable CXL Preview
Liqid: Composable CXL Preview
CXL Forum120 views
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)
CSUC - Consorci de Serveis Universitaris de Catalunya59 views

Making Mobile Sites Faster