Slides from my talk on mobile performance at Port 80, Newport

1. Making Mobile Sites Faster
@andydavies
#Port80, May 2013
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 here?
http://www.flickr.com/photos/oatsy40/6198212129

4. Some of this advice will expire
http://www.flickr.com/photos/21560098@N06/7127570205

5. http://www.flickr.com/photos/szene/8220511232
So many devices… lots of variation

6. Differing Network Environments
GPRS EDGE 3G 4G WiFi
Faster, Lower Latency???
Special networks…
Conference, Hotel & Coffee shop WiFi

7. Latency is a huge 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

8. 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

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

10. Some things block
http://www.flickr.com/photos/timo/3995227

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

12. Fast mobile sites have short waterfalls

13. Do you deploy your CSS like this?
<link href="screen.core.css" />
<link media="(min-width: 320px)" href="s320.css" />
<link media="(min-width: 480px)" href="s480.css" />
<link media="(min-width: 750px)" href="s750.css" />
<link media="(min-width: 960px)" href="s960.css" />

14. Do you really need that font?
http://www.flickr.com/photos/symphoney/76513801

15. And what about those scripts?
http://www.flickr.com/photos/alikins/4439062727

16. Remember GZIP and Caching
http://www.flickr.com/photos/_flood_/6732863457

17. Re-Use TCP Connections - HTTP Keep-Alive
(HTML5 Boilerplate has example settings for Apache)
Orange segments are
new TCP connections
being opened

18. Beware of Redirects
367ms and still no HTML!
Set a cache lifetime and make them private

19. #OneLessJPG
Misquoted a lot recently, original quote
refers to relative sizes of JS libraries

20. Images
Scripts
Stylesheets
Other
HTML
Images are 70% of an ‘average’ mobile site
http://mobile.httparchive.org

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

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

23. Heydings by Heydon Works
Icon fonts
&#x2605; ★
&#x2665; ♥
&#x2601; ☁
“Bog Standard Font”
&#x2606; ☆

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

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

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

27. Proposed srcset attribute
http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
<img src="beach-desktop.jpeg"
srcset="beach-mobile.jpeg 720w
beach-tablet.jpeg 1280w"
alt="The beach is gorgeous.">
image-set() is CSS equivalent

28. Compressive Images (experimental)
Double the dimensions but lower the quality

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

30. <picture>
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>
Proposed picture element
http://www.w3.org/TR/html-picture-element

31. Cache-Control: no-transform
Stop proxies recompressing your images
Unclear how many proxies follow the standard

32. Do you really want to do it by hand?
Can adapt format for visitor e.g.WebP
Automate generate image versions
http://www.flickr.com/photos/skrubu/4962771959
- CMS
- Scripts
- CDNs
- Dedicated services

33. We’re adapting on the client-side
http://seesparkbox.com

34. But we shouldn’t forget about the server
http://www.flickr.com/photos/getbutterfly/6317955134

35. device
width
Client Hints HTTP Header (proposed)
http://tools.ietf.org/html/draft-grigorik-http-client-hints-00
CH: dh=598, dw=384, dpr=2.0
device
height
device
pixel
ratio

36. ! "ipinfo": {
! ! "ip_address":"212.183.128.252",
! !"ip_type":"Mapped",
! !"Network": {
! !! "organization":"vodafone limited",
! ! !"carrier":"vodafone limited",
! ! !"asn":25135,
! ! !"connection_type":"mobile wireless",
! ! !"line_speed":"low",
! ! !"ip_routing_type":"mobile gateway",
! ! !"Domain": {
! ! !! "tld":"net",
! ! !! "sld":"vodafone"
! ! !! }
! ! !},
Quova GeoPoint API
What if we could detect mobile connections?

37. cache-control: private
&
vary: user-agent
Managing Caching

38. But loading fast is only the start…
http://www.flickr.com/photos/foodthinkers/4442279870

39. Facebook artificially slowed down
scrolling from 60fps to 30fps
User Engagement Collapsed

40. So… what wrecks smoothness?
http://www.flickr.com/photos/18854914@N04/2216950328

41. “Rendering Without Lumpy Bits”
http://www.flickr.com/photos/marcthiele/8114191496

42. Don’t just rely on rules… learn how to measure
http://www.flickr.com/photos/chandramarsono/4324373384

43. http://www.flickr.com/photos/alesimages/4215559895

44. Thank You!
@andydavies
andy@asteno.com
http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029