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.
1 of 101

Mobile Web Speed Bumps

34

Share

Download to read offline

As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Mobile Web Speed Bumps

  1. 1. Mobile Web Speed Bumps Don't let these problems slow your app down Nicholas C. Zakas Presentation Architect, Yahoo! @slicknet
  2. 2. Who's this guy? Presentation Contributor, Architect Creator of YUI Test Author Lead Author Contributor Lead Author
  3. 3. http://www.flickr.com/photos/veggiefrog/3435380297/
  4. 4. http://www.flickr.com/photos/fkmr/48131497/
  5. 5. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
  6. 6. Network latency is a time delay in delivering data to the client device Data transmission over the air always has latency
  7. 7. http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
  8. 8. http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
  9. 9. DNS Web
  10. 10. DNS Cell Co. Web
  11. 11. replace 'em with CSS where possible Images http://www.flickr.com/photos/calliope/83867359/
  12. 12. Use only CSS for simple images Gradients | Rounded Corners | Drop Shadows | Text Shadows
  13. 13. Browser creates images = 0 HTTP requests
  14. 14. No Images! -webkit-border-radius: 16px; border-radius: 16px; -webkit-box-shadow: 0 8px 4px rgba(192,192,192,0.5); box-shadow: 0 8px 4px rgba(192,192,192,0.5); background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9))); http://www.schillmania.com/content/entries/2009/css3-and-the-future/
  15. 15. replace 'em with CSS where possible Images put 'em inline using data URIs http://www.flickr.com/photos/calliope/83867359/
  16. 16. http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
  17. 17. data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  18. 18. data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7L Zv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAA AAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0EC wLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFj sVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
  19. 19. <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeH h0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf// /yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0EC wLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFj sVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"> Data URIs can be embedded in HTML No more extra HTTP requests for images!
  20. 20. .icon1 { background: url(data:image/png;base64,<data>) no-repeat; } .icon2 { background: url(data:image/png;base64,<data>) no-repeat; } Data URIs can be embedded in CSS No more extra HTTP requests for images!
  21. 21. http://www.flickr.com/photos/12714995@N03/5069508897/ But I already have so many CSS files that reference images!
  22. 22. http://github.com/nzakas/cssembed
  23. 23. java -jar cssembed-0.3.6.jar -o styles_data_uris.css styles.css
  24. 24. Data URIs are well-supported across smartphone browsers
  25. 25. http://www.flickr.com/photos/drb62/2543573955/ Data URIs not supported by • Nokia Series 40 • Myriad/OpenWave • Internet Explorer Mobile • Motorola Browser
  26. 26. replace 'em with CSS where possible Images put 'em inline using data URIs if all else fails, make 'em small http://www.flickr.com/photos/calliope/83867359/
  27. 27. 320x480 768x1024
  28. 28. Large images not needed
  29. 29. http://tinysrc.net/
  30. 30. <img src="http://i.tinysrc.mobi/http://example.com/myimage.png" alt="My image"> Automatically resizes images to viewport
  31. 31. <img src="http://i.tinysrc.mobi/320/240/http://example.com/myima ge.png" alt="My image" width="320" height="240"> Automatically resizes image to 320x240
  32. 32. Put JavaScript and CSS inline* * But only on first page view
  33. 33. http://m.bing.com
  34. 34. Request #1 146 KB Request #2 14 KB
  35. 35. RMSM=JApp.Home.DE384EBF~JUX.UXBaseControls.65310C41~J UX.FrameworkCore.53E1E635~JUX.PublicJson.540180A4~JUX.Co mpat.0907AAD4~JUX.MsCorlib.172D90C3~CUX.SiteLowRes.C8A1 DA4E~CApp.Home.FD66E1A3~CUX.Keyframes.B8625FEE~CUX.S ite.18BDD93
  36. 36. RMSM= Japp.Home.DE384EBF~ JUX.UXBaseControls.65310C41~ JUX.FrameworkCore.53E1E635~ JUX.PublicJson.540180A4~ JUX.Compat.0907AAD4~ JUX.MsCorlib.172D90C3~ CUX.SiteLowRes.C8A1DA4E~ Capp.Home.FD66E1A3~ CUX.Keyframes.B8625FEE~ CUX.Site.18BDD93
  37. 37. First Request <style data-rms="save" id="CUX.Site.18BDD936" rel="stylesheet" type="text/css">...</style> <script data-rms="save" id="JUX.UXBaseControls.65310C41" type="text/javascript">...</script>
  38. 38. Second Request <script type="text/javascript">RMS.Load('CUX.Site.18B DD936')</script> <script type="text/javascript">RMS.Load('JUX.UXBaseCo ntrols.65310C41')</script>
  39. 39. How It Works 1. On first page load, inline all scripts and styles 2. Extract scripts and styles from page and store in localStorage 3. Set cookie with Ids of the scripts and styles in localStorage 4. On next page load, look at cookies 5. Output scripts instructing the browser to load that resource from localStorage
  40. 40. Extracting From The DOM //extract inline script contents var scriptNode = document.querySelector("script"); var scriptText = scriptNode.text; //extract inline style contents var styleNode = document.querySelector("style"); var styleText = styleNode.innerHTML;
  41. 41. 40% of time on redirect Download Redirect
  42. 42. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
  43. 43. iPad 2 Droid iPhone 4 Droid X Incredible Mac Mini Processor 2.2-2.4 GHz 1 GHz 1 GHz 1 GHz 1 GHz RAM 2 GB 512 MB 512 MB 512 MB 512 MB Storage 320-500 GB 16-32 GB 8 GB 8 GB 16-64 GB
  44. 44. http://www.flickr.com/photos/antonfomkin/3046849320/
  45. 45. Keep JavaScript small
  46. 46. All browsers now have optimizing JavaScript engines Tracemonkey/ V8 Nitro Chakra Karakan JaegarMonkey (all) (4+) (9+) (10.5+) (3.5+)
  47. 47. http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html
  48. 48. http://jeftek.com/1942/motorola-xoom-sunspider-results/
  49. 49. JavaScript Execution = CPU Processing = Battery Consumption
  50. 50. Don't even think about using JavaScript-based animations CSS-based only http://www.flickr.com/photos/eschipul/260392040/
  51. 51. Hardware Acceleration (Compositing) http://www.flickr.com/photos/pagedooley/3493267443/
  52. 52. Hardware accelerated CSS animations
  53. 53. No hardware acceleration before Android 3.0
  54. 54. Be careful with CSS
  55. 55. Trigger Compositing .some-element { -webkit-transform: rotate(0); } Any transform works!
  56. 56. http://www.flickr.com/photos/kkoshy/2825871499/ Non-composited elements work as you expect
  57. 57. http://www.flickr.com/photos/kkoshy/2825871499/ Composited elements become images in memory
  58. 58. http://www.flickr.com/photos/kkoshy/2825871499/ Each composited element takes up width x height x 4 bytes
  59. 59. Too many composited elements = High memory usage = Slow-moving UI
  60. 60. iOS doesn't support memory paging
  61. 61. https://bugs.webkit.org/show_bug.cgi?id=56917
  62. 62. CSS Gradients (Keep 'em small)
  63. 63. CSS Gradients (i.e. no full page backgrounds)
  64. 64. Radial gradients are heavy Use caution
  65. 65. If your app is sluggish, try replacing CSS gradients with data URIs or images
  66. 66. Keep the DOM small Remove unused elements
  67. 67. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
  68. 68. d ! p e a p t c no r y m o M e
  69. 69. http://www.blaze.io/mobile/
  70. 70. http://stevesouders.com/mobileperf/mobileperfbkm.php
  71. 71. http://jdrop.org
  72. 72. Summary
  73. 73. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
  74. 74. Images | JavaScript | CSS | DOM
  75. 75. Balance This is a new frontier. The investigation has only just started. Test, test, test. Share. http://www.flickr.com/photos/brent_nashville/201143283/
  76. 76. Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • These Slides: http://slideshare.net/nzakas/

×