Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Making Mobile Sites Faster

  1. 1. Making Mobile Sites Faster @andydavies #Port80, May 2013 http://www.flickr.com/photos/b-tal/156919562
  2. 2. Imagine… later today… http://www.flickr.com/photos/andrew_bolin/3909446250
  3. 3. How long would you wait here? http://www.flickr.com/photos/oatsy40/6198212129
  4. 4. Some of this advice will expire http://www.flickr.com/photos/21560098@N06/7127570205
  5. 5. http://www.flickr.com/photos/szene/8220511232 So many devices… lots of variation
  6. 6. Differing Network Environments GPRS EDGE 3G 4G WiFi Faster, Lower Latency??? Special networks… Conference, Hotel & Coffee shop WiFi
  7. 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. 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. 9. http://www.flickr.com/photos/fastjack/2943793818 It’s not just about speed
  10. 10. Some things block http://www.flickr.com/photos/timo/3995227
  11. 11. http://www.flickr.com/photos/wiertz/6922984303 What’s needed to render the page?
  12. 12. Fast mobile sites have short waterfalls
  13. 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. 14. Do you really need that font? http://www.flickr.com/photos/symphoney/76513801
  15. 15. And what about those scripts? http://www.flickr.com/photos/alikins/4439062727
  16. 16. Remember GZIP and Caching http://www.flickr.com/photos/_flood_/6732863457
  17. 17. Re-Use TCP Connections - HTTP Keep-Alive (HTML5 Boilerplate has example settings for Apache) Orange segments are new TCP connections being opened
  18. 18. Beware of Redirects 367ms and still no HTML! Set a cache lifetime and make them private
  19. 19. #OneLessJPG Misquoted a lot recently, original quote refers to relative sizes of JS libraries
  20. 20. Images Scripts Stylesheets Other HTML Images are 70% of an ‘average’ mobile site http://mobile.httparchive.org
  21. 21. Time to bury bitmapped images? http://www.flickr.com/photos/tonyjcase/7183556158
  22. 22. Use vector graphics instead? SVG: 12 KB vs PNG: 86KB
  23. 23. Heydings by Heydon Works Icon fonts ★ ★ ♥ ♥ ☁ ☁ “Bog Standard Font” ☆ ☆
  24. 24. Use CSS border-radius: 20px; background: linear-gradient(left, #f06, #ff0); Some combinations produce poor paint performance
  25. 25. What if only a bitmap image will do? http://www.flickr.com/photos/orkomedix/5026054826
  26. 26. Size images for the viewport http://www.flickr.com/photos/emzee/139794246
  27. 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. 28. Compressive Images (experimental) Double the dimensions but lower the quality
  29. 29. As images get smaller need to focus on subject “Art Direction” - Jason Grigsby http://www.flickr.com/photos/barackobamadotcom/5795228030
  30. 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. 31. Cache-Control: no-transform Stop proxies recompressing your images Unclear how many proxies follow the standard
  32. 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. 33. We’re adapting on the client-side http://seesparkbox.com
  34. 34. But we shouldn’t forget about the server http://www.flickr.com/photos/getbutterfly/6317955134
  35. 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. 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. 37. cache-control: private & vary: user-agent Managing Caching
  38. 38. But loading fast is only the start… http://www.flickr.com/photos/foodthinkers/4442279870
  39. 39. Facebook artificially slowed down scrolling from 60fps to 30fps User Engagement Collapsed
  40. 40. So… what wrecks smoothness? http://www.flickr.com/photos/18854914@N04/2216950328
  41. 41. “Rendering Without Lumpy Bits” http://www.flickr.com/photos/marcthiele/8114191496
  42. 42. Don’t just rely on rules… learn how to measure http://www.flickr.com/photos/chandramarsono/4324373384
  43. 43. http://www.flickr.com/photos/alesimages/4215559895
  44. 44. Thank You! @andydavies andy@asteno.com http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029

×