Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Mobile Sites Faster

1,951 views

Published on

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

Published in: Technology
  • Be the first to comment

Making Mobile Sites Faster

  1. 1. Making Mobile Sites Faster@andydavies#Port80, May 2013http://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 expirehttp://www.flickr.com/photos/21560098@N06/7127570205
  5. 5. http://www.flickr.com/photos/szene/8220511232So many devices… lots of variation
  6. 6. Differing Network EnvironmentsGPRS EDGE 3G 4G WiFiFaster, Lower Latency???Special networks…Conference, Hotel & Coffee shop WiFi
  7. 7. Latency is a huge issue“In 2012, the average worldwide RTT toGoogle is still ~100ms, and ~50-60ms withinthe US.”http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/“we are looking at 100-1000ms RTT rangeon mobile”Ilya Grigorik
  8. 8. 3G Radio Resource Controlhttp://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdfIDLE CELL_FACHCELL_DCH Idle for 5sIdle for 12s1-2s delay!Exact timings vary and depend on carrier NOT device1s delay
  9. 9. http://www.flickr.com/photos/fastjack/2943793818It’s not just about speed
  10. 10. Some things blockhttp://www.flickr.com/photos/timo/3995227
  11. 11. http://www.flickr.com/photos/wiertz/6922984303What’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 Cachinghttp://www.flickr.com/photos/_flood_/6732863457
  17. 17. Re-Use TCP Connections - HTTP Keep-Alive(HTML5 Boilerplate has example settings for Apache)Orange segments arenew TCP connectionsbeing opened
  18. 18. Beware of Redirects367ms and still no HTML!Set a cache lifetime and make them private
  19. 19. #OneLessJPGMisquoted a lot recently, original quoterefers to relative sizes of JS libraries
  20. 20. ImagesScriptsStylesheetsOtherHTMLImages are 70% of an ‘average’ mobile sitehttp://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 WorksIcon fonts★ ★♥ ♥☁ ☁“Bog Standard Font”☆ ☆
  24. 24. Use CSSborder-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 viewporthttp://www.flickr.com/photos/emzee/139794246
  27. 27. Proposed srcset attributehttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/<img src="beach-desktop.jpeg"srcset="beach-mobile.jpeg 720wbeach-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 Grigsbyhttp://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 elementhttp://www.w3.org/TR/html-picture-element
  31. 31. Cache-Control: no-transformStop proxies recompressing your imagesUnclear how many proxies follow the standard
  32. 32. Do you really want to do it by hand?Can adapt format for visitor e.g.WebPAutomate generate image versionshttp://www.flickr.com/photos/skrubu/4962771959- CMS- Scripts- CDNs- Dedicated services
  33. 33. We’re adapting on the client-sidehttp://seesparkbox.com
  34. 34. But we shouldn’t forget about the serverhttp://www.flickr.com/photos/getbutterfly/6317955134
  35. 35. devicewidthClient Hints HTTP Header (proposed)http://tools.ietf.org/html/draft-grigorik-http-client-hints-00CH: dh=598, dw=384, dpr=2.0deviceheightdevicepixelratio
  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 APIWhat if we could detect mobile connections?
  37. 37. cache-control: private&vary: user-agentManaging Caching
  38. 38. But loading fast is only the start…http://www.flickr.com/photos/foodthinkers/4442279870
  39. 39. Facebook artificially slowed downscrolling from 60fps to 30fpsUser 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 measurehttp://www.flickr.com/photos/chandramarsono/4324373384
  43. 43. http://www.flickr.com/photos/alesimages/4215559895
  44. 44. Thank You!@andydaviesandy@asteno.comhttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029

×