Your SlideShare is downloading. ×
0
Mobile Web Speed Bumps        Dont let these problems slow your app downNicholas C. ZakasPresentation Architect, Yahoo!@sl...
Whos this guy?         Presentation       Contributor,           Architect     Creator of YUI TestAuthor     Lead Author  ...
http://www.flickr.com/photos/veggiefrog/3435380297/
http://www.flickr.com/photos/fkmr/48131497/
➔          Latency        ➔          Device        ➔          Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
Network latency is a time delay in delivering         data to the client device      Data transmission over the air always...
http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
DNSWeb
DNSCell Co.           Web
replace em with CSS where possibleImages                             http://www.flickr.com/photos/calliope/83867359/
Use only CSS for simple imagesGradients | Rounded Corners | Drop Shadows | Text Shadows
Browser creates images = 0 HTTP requests
No                                                        Images!-webkit-border-radius: 16px;border-radius: 16px;-webkit-b...
replace em with CSS where possibleImages   put em inline using data URIs                             http://www.flickr.com...
http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQ...
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAA...
.icon1 {    background: url(data:image/png;base64,<data>)                no-repeat;}.icon2 {    background: url(data:image...
http://www.flickr.com/photos/12714995@N03/5069508897/                   But I already                  have so many       ...
http://github.com/nzakas/cssembed
java -jar cssembed-0.3.6.jar -o styles_data_uris.css styles.css
Data URIs are well-supported across smartphone browsers
http://www.flickr.com/photos/drb62/2543573955/Data URIs not supported by• Nokia Series 40• Myriad/OpenWave• Internet Explo...
replace em with CSS where possibleImages   put em inline using data URIs         if all else fails, make em small         ...
320x480   768x1024
Large images not needed
http://tinysrc.net/
<imgsrc="http://i.tinysrc.mobi/http://example.com/myimage.png"alt="My image">    Automatically resizes images to viewport
<imgsrc="http://i.tinysrc.mobi/320/240/http://example.com/myimage.png" alt="My image" width="320" height="240">    Automat...
Put JavaScript and CSS inline** But only on first page view
http://m.bing.com
Request #1  146 KB   Request #2     14 KB
RMSM=JApp.Home.DE384EBF~JUX.UXBaseControls.65310C41~JUX.FrameworkCore.53E1E635~JUX.PublicJson.540180A4~JUX.Compat.0907AAD4...
RMSM= Japp.Home.DE384EBF~ JUX.UXBaseControls.65310C41~ JUX.FrameworkCore.53E1E635~ JUX.PublicJson.540180A4~ JUX.Compat.090...
First Request<style data-rms="save" id="CUX.Site.18BDD936"rel="stylesheet" type="text/css">...</style><script data-rms="sa...
Second Request<scripttype="text/javascript">RMS.Load(CUX.Site.18BDD936)</script><scripttype="text/javascript">RMS.Load(JUX...
How It Works1. On first page load, inline all scripts and styles2. Extract scripts and styles from page and store   in loc...
Extracting From The DOM//extract inline script contentsvar scriptNode =        document.querySelector("script");var script...
40% of time on redirect   Download               Redirect
➔          Latency        ➔          Device        ➔          Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
iPad 2                                                     Droid                           iPhone 4     Droid X    Incredi...
http://www.flickr.com/photos/antonfomkin/3046849320/
Keep JavaScript small
All browsers now have     optimizing JavaScript enginesTracemonkey/    V8     Nitro   Chakra   KarakanJaegarMonkey   (all)...
http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html
http://jeftek.com/1942/motorola-xoom-sunspider-results/
JavaScript Execution         =  CPU Processing         =Battery Consumption
Dont even think  about using  JavaScript-based  animations  CSS-based onlyhttp://www.flickr.com/photos/eschipul/260392040/
Hardware Acceleration    (Compositing)  http://www.flickr.com/photos/pagedooley/3493267443/
Hardware accelerated   CSS animations
No hardware acceleration   before Android 3.0
Be careful with CSS
Trigger Compositing.some-element {    -webkit-transform: rotate(0);}                                    Any transform     ...
http://www.flickr.com/photos/kkoshy/2825871499/Non-composited elements work as you expect
http://www.flickr.com/photos/kkoshy/2825871499/Composited elements become images            in memory
http://www.flickr.com/photos/kkoshy/2825871499/Each composited element takes up     width x height x 4 bytes
Too many composited elements             =     High memory usage             =       Slow-moving UI
iOS doesnt support memory paging
https://bugs.webkit.org/show_bug.cgi?id=56917
CSS Gradients(Keep em small)
CSS Gradients(i.e. no full page backgrounds)
Radial gradients are heavy        Use caution
If your app is sluggish, tryreplacing CSS gradients with     data URIs or images
Keep the DOM smallRemove unused elements
➔          Latency        ➔          Device        ➔          Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
d !                                p e                          a p                    t c               no         r   y ...
http://www.blaze.io/mobile/
http://stevesouders.com/mobileperf/mobileperfbkm.php
http://jdrop.org
Summary
➔          Latency        ➔          Device        ➔          Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
Images | JavaScript | CSS | DOM
BalanceThis is a new frontier.The investigation has only juststarted.Test, test, test.Share.         http://www.flickr.com...
Etcetera• My blog:  www.nczonline.net• Twitter:  @slicknet• These Slides:  http://slideshare.net/nzakas/
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Upcoming SlideShare
Loading in...5
×

Mobile Web Speed Bumps

20,368

Published on

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.

Published in: Technology, Business
2 Comments
36 Likes
Statistics
Notes
  • Most excellent! I was just looking for info on data uri's on mobile (and where they're not supported), as well as memory/performance impact on CSS composited elements/images. Hopefully I'll have the chance to hear you present one day as there's always so much info that simply can't be passed via a slide deck.

    Thanks for sharing!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation at web directions.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
20,368
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
200
Comments
2
Likes
36
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Web Speed Bumps"

  1. 1. Mobile Web Speed Bumps Dont let these problems slow your app downNicholas C. ZakasPresentation Architect, Yahoo!@slicknet
  2. 2. Whos this guy? Presentation Contributor, Architect Creator of YUI TestAuthor 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 ➔ Testinghttp://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. DNSWeb
  10. 10. DNSCell Co. Web
  11. 11. replace em with CSS where possibleImages http://www.flickr.com/photos/calliope/83867359/
  12. 12. Use only CSS for simple imagesGradients | 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 4pxrgba(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 possibleImages 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/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
  19. 19. <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/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 possibleImages 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. <imgsrc="http://i.tinysrc.mobi/http://example.com/myimage.png"alt="My image"> Automatically resizes images to viewport
  31. 31. <imgsrc="http://i.tinysrc.mobi/320/240/http://example.com/myimage.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~JUX.FrameworkCore.53E1E635~JUX.PublicJson.540180A4~JUX.Compat.0907AAD4~JUX.MsCorlib.172D90C3~CUX.SiteLowRes.C8A1DA4E~CApp.Home.FD66E1A3~CUX.Keyframes.B8625FEE~CUX.Site.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<scripttype="text/javascript">RMS.Load(CUX.Site.18BDD936)</script><scripttype="text/javascript">RMS.Load(JUX.UXBaseControls.65310C41)</script>
  39. 39. How It Works1. On first page load, inline all scripts and styles2. Extract scripts and styles from page and store in localStorage3. Set cookie with Ids of the scripts and styles in localStorage4. On next page load, look at cookies5. Output scripts instructing the browser to load that resource from localStorage
  40. 40. Extracting From The DOM//extract inline script contentsvar scriptNode = document.querySelector("script");var scriptText = scriptNode.text;//extract inline style contentsvar styleNode = document.querySelector("style");var styleText = styleNode.innerHTML;
  41. 41. 40% of time on redirect Download Redirect
  42. 42. ➔ Latency ➔ Device ➔ Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
  43. 43. iPad 2 Droid iPhone 4 Droid X Incredible Mac MiniProcessor 2.2-2.4 GHz 1 GHz 1 GHz 1 GHz 1 GHzRAM 2 GB 512 MB 512 MB 512 MB 512 MBStorage 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 enginesTracemonkey/ V8 Nitro Chakra KarakanJaegarMonkey (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. Dont even think about using JavaScript-based animations CSS-based onlyhttp://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 doesnt 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, tryreplacing CSS gradients with data URIs or images
  66. 66. Keep the DOM smallRemove unused elements
  67. 67. ➔ Latency ➔ Device ➔ Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
  68. 68. d ! p e a p t c no r y m oM 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 ➔ Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
  74. 74. Images | JavaScript | CSS | DOM
  75. 75. BalanceThis is a new frontier.The investigation has only juststarted.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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×