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?
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”
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
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
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
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
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
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
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/
54. font-display: auto | block | swap | fallback | optional;
(coming soon)
https://tabatkins.github.io/specs/css-font-display/
Control whether a font blocks rendering
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!