Mobile Web Speed Bumps
34 likes13,447 views
This document discusses strategies to improve mobile web performance by addressing common speed issues due to latency, device limitations, and testing practices. It emphasizes using CSS for graphics, data URIs for images to minimize HTTP requests, and keeping JavaScript and the DOM size small. The author advocates for testing and adjusting various components to enhance the efficiency of mobile applications.
![data:[<mime type>][;charset=<charset>][;base64],<encoded data>](https://image.slidesharecdn.com/mobile-web-speed-bumps-110510213448-phpapp01/85/Mobile-Web-Speed-Bumps-20-320.jpg)
Mobile Web Speed Bumps
- 1. Mobile Web Speed Bumps Don't let these problems slow your app down Nicholas C. Zakas Presentation Architect, Yahoo! @slicknet
- 2. Who's this guy? Presentation Contributor, Architect Creator of YUI Test Author Lead Author Contributor Lead Author
- 5. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
- 6. Network latency is a time delay in delivering data to the client device Data transmission over the air always has latency
- 9. DNS Web
- 10. DNS Cell Co. Web
- 14. replace 'em with CSS where possible Images http://www.flickr.com/photos/calliope/83867359/
- 15. Use only CSS for simple images Gradients | Rounded Corners | Drop Shadows | Text Shadows
- 16. Browser creates images = 0 HTTP requests
- 17. 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/
- 18. replace 'em with CSS where possible Images put 'em inline using data URIs http://www.flickr.com/photos/calliope/83867359/
- 22. <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!
- 23. .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!
- 24. http://www.flickr.com/photos/12714995@N03/5069508897/ But I already have so many CSS files that reference images!
- 26. java -jar cssembed-0.3.6.jar -o styles_data_uris.css styles.css
- 27. Data URIs are well-supported across smartphone browsers
- 28. http://www.flickr.com/photos/drb62/2543573955/ Data URIs not supported by • Nokia Series 40 • Myriad/OpenWave • Internet Explorer Mobile • Motorola Browser
- 29. 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/
- 30. 320x480 768x1024
- 31. Large images not needed
- 33. <img src="http://i.tinysrc.mobi/http://example.com/myimage.png" alt="My image"> Automatically resizes images to viewport
- 34. <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
- 36. Put JavaScript and CSS inline* * But only on first page view
- 39. Request #1 146 KB Request #2 14 KB
- 41. 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
- 43. 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>
- 45. 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
- 46. 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;
- 48. 40% of time on redirect Download Redirect
- 49. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
- 50. 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
- 56. All browsers now have optimizing JavaScript engines Tracemonkey/ V8 Nitro Chakra Karakan JaegarMonkey (all) (4+) (9+) (10.5+) (3.5+)
- 62. JavaScript Execution = CPU Processing = Battery Consumption
- 63. Don't even think about using JavaScript-based animations CSS-based only http://www.flickr.com/photos/eschipul/260392040/
- 65. Hardware Acceleration (Compositing) http://www.flickr.com/photos/pagedooley/3493267443/
- 66. Hardware accelerated CSS animations
- 67. No hardware acceleration before Android 3.0
- 68. Be careful with CSS
- 69. Trigger Compositing .some-element { -webkit-transform: rotate(0); } Any transform works!
- 70. http://www.flickr.com/photos/kkoshy/2825871499/ Non-composited elements work as you expect
- 71. http://www.flickr.com/photos/kkoshy/2825871499/ Composited elements become images in memory
- 72. http://www.flickr.com/photos/kkoshy/2825871499/ Each composited element takes up width x height x 4 bytes
- 73. Too many composited elements = High memory usage = Slow-moving UI
- 74. iOS doesn't support memory paging
- 76. CSS Gradients (Keep 'em small)
- 77. CSS Gradients (i.e. no full page backgrounds)
- 78. Radial gradients are heavy Use caution
- 79. If your app is sluggish, try replacing CSS gradients with data URIs or images
- 80. Keep the DOM small Remove unused elements
- 81. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
- 82. d ! p e a p t c no r y m o M e
- 97. Summary
- 98. ➔ Latency ➔ Device ➔ Testing http://www.flickr.com/photos/veggiefrog/3435380297/
- 99. Images | JavaScript | CSS | DOM
- 100. Balance This is a new frontier. The investigation has only just started. Test, test, test. Share. http://www.flickr.com/photos/brent_nashville/201143283/
- 101. Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • These Slides: http://slideshare.net/nzakas/