Mobile Web Speed Bumps
Upcoming SlideShare
Loading in...5
×
 

Mobile Web Speed Bumps

on

  • 19,262 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 ...

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.

Statistics

Views

Total Views
19,262
Views on SlideShare
14,790
Embed Views
4,472

Actions

Likes
36
Downloads
194
Comments
2

29 Embeds 4,472

http://econsultancy.com 3390
http://www.webdirections.org 542
http://feeds.feedburner.com 296
https://econsultancy.com 70
http://plutecki.net 40
http://play.daumcorp.com 32
http://paper.li 25
http://apps.synaptive.net 17
http://translate.googleusercontent.com 10
http://soup.sindre.at 8
http://twitter.com 5
http://www.hanrss.com 5
http://www.techgig.com 4
http://www.linkedin.com 4
http://www.encarolina.com 3
http://www.portalos.pl 3
http://core.traackr.com 3
http://www.newsblur.com 2
http://ebulletin.collected.info 2
https://www.linkedin.com 2
http://131.253.14.250 1
http://www.scoop.it 1
http://webcache.googleusercontent.com 1
http://moderation.local 1
https://twitter.com 1
http://www.diffbot.com&_=1356882926185 HTTP 1
http://www.diffbot.com&_=1356882942680 HTTP 1
http://www.diffbot.com&_=1356882912126 HTTP 1
http://electrosmart.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation at web directions.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Web Speed Bumps Mobile Web Speed Bumps Presentation Transcript

  • Mobile Web Speed Bumps Dont let these problems slow your app downNicholas C. ZakasPresentation Architect, Yahoo!@slicknet
  • Whos this guy? Presentation Contributor, Architect Creator of YUI TestAuthor Lead Author Contributor 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 has latency
  • 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-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/
  • replace em with CSS where possibleImages put em inline using data URIs http://www.flickr.com/photos/calliope/83867359/
  • 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///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
  • <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!
  • .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!
  • http://www.flickr.com/photos/12714995@N03/5069508897/ But I already have so many CSS files that reference images!
  • 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 Explorer Mobile• Motorola Browser
  • 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/
  • 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"> Automatically resizes image to 320x240
  • 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~JUX.MsCorlib.172D90C3~CUX.SiteLowRes.C8A1DA4E~CApp.Home.FD66E1A3~CUX.Keyframes.B8625FEE~CUX.Site.18BDD93
  • 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
  • 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>
  • Second Request<scripttype="text/javascript">RMS.Load(CUX.Site.18BDD936)</script><scripttype="text/javascript">RMS.Load(JUX.UXBaseControls.65310C41)</script>
  • 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
  • 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;
  • 40% of time on redirect Download Redirect
  • ➔ Latency ➔ Device ➔ Testinghttp://www.flickr.com/photos/veggiefrog/3435380297/
  • 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
  • http://www.flickr.com/photos/antonfomkin/3046849320/
  • Keep JavaScript small
  • All browsers now have optimizing JavaScript enginesTracemonkey/ V8 Nitro Chakra KarakanJaegarMonkey (all) (4+) (9+) (10.5+) (3.5+)
  • 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 works!
  • 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 m oM e
  • 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/photos/brent_nashville/201143283/
  • Etcetera• My blog: www.nczonline.net• Twitter: @slicknet• These Slides: http://slideshare.net/nzakas/