Mobile Web Speed Bumps

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/

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

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

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

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/

http://econsultancy.com	3125
http://www.webdirections.org	499
http://feeds.feedburner.com	296
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	6
http://twitter.com	5
http://www.hanrss.com	5
http://www.techgig.com	4
http://www.encarolina.com	3
http://core.traackr.com	3
http://ebulletin.collected.info	2
http://www.newsblur.com	2
http://www.linkedin.com	2
http://131.253.14.250	1
http://electrosmart.com	1
http://www.diffbot.com&_=1356882912126 HTTP	1
http://www.diffbot.com&_=1356882942680 HTTP	1
http://www.diffbot.com&_=1356882926185 HTTP	1
http://www.portalos.pl	1

Mobile Web Speed Bumps

by Nicholas Zakas

Accessibility

Categories

Upload Details

Usage Rights

23 Embeds 4,082

Statistics

Mobile Web Speed Bumps Presentation Transcript