Mobile Web Speed Bumps
34 likes13,444 views
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.
![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)
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Viewers also liked (14)
Ad
Similar to Mobile Web Speed Bumps (20)
Ad
More from Nicholas Zakas (8)
Recently uploaded (20)
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/