Mobile Web Speed Bumps

Mobile Web Speed BumpsDon't let these problems slow your app down

Nicholas C. ZakasPresentation Architect, Yahoo!@slicknet

Who's this guy?

Presentation Architect

Contributor,Creator of YUI Test

Author Lead Author Contributor Lead Author

http://www.flickr.com/photos/veggiefrog/3435380297/

http://www.flickr.com/photos/fkmr/48131497/


➔Latency➔Device➔Testing

Network latency is a time delay in deliveringdata to the client device

Data transmission over the air always has latency

http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/

DNS

Web

DNS

Web

Cell Co.

http://www.flickr.com/photos/calliope/83867359/

Imagesreplace 'em with CSS where possible

Use only CSS for simple imagesGradients | Rounded Corners | Drop Shadows | Text Shadows

Browser creates images = 0 HTTP requests

http://www.schillmania.com/content/entries/2009/css3-and-the-future/

-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)));

NoImages!


Imagesreplace 'em with CSS where possibleput 'em inline using data URIs

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 HTMLNo 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 CSSNo more extra HTTP requests for images!

But I alreadyhave so many CSS files that

reference images!

http://www.flickr.com/photos/12714995@N03/5069508897/

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


Imagesreplace 'em with CSS where possibleput 'em inline using data URIsif all else fails, make 'em small

320x480 768x1024

Large images not needed

http://tinysrc.net/

<img src="http://i.tinysrc.mobi/http://example.com/myimage.png" alt="My image">

Automatically resizes images to viewport

<img src="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 #1146 KB

Request #214 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

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

//extract inline script contentsvar scriptNode = document.querySelector("script");var scriptText = scriptNode.text;//extract inline style contentsvar styleNode = document.querySelector("style");var styleText = styleNode.innerHTML;

Extracting From The DOM

DownloadRedirect

40% of timeon redirect

Processor 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

Mac MiniiPhone 4 Droid X

DroidIncredible

iPad 2

http://www.flickr.com/photos/antonfomkin/3046849320/

Keep JavaScript small

All browsers now haveoptimizing JavaScript engines

Tracemonkey/JaegarMonkey

(3.5+)

V8(all)

Nitro(4+)

Chakra (9+)

Karakan(10.5+)

http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html

http://jeftek.com/1942/motorola-xoom-sunspider-results/

JavaScript Execution=

CPU Processing=

Battery Consumption

Don't even think about using JavaScript-based animations

CSS-based only

http://www.flickr.com/photos/eschipul/260392040/

Hardware Acceleration(Compositing)

http://www.flickr.com/photos/pagedooley/3493267443/

Hardware accelerated CSS animations

No hardware accelerationbefore Android 3.0

Be careful with CSS

.some-element { -webkit-transform: rotate(0);}

Trigger Compositing

Any transformworks!

Non-composited elements work as you expect

http://www.flickr.com/photos/kkoshy/2825871499/

Composited elements become imagesin memory


Each composited element takes upwidth x height x 4 bytes


Too many composited elements=

High memory usage=

Slow-moving UI

iOS doesn't support memory paging

https://bugs.webkit.org/show_bug.cgi?id=56917

CSS GradientsCSS Gradients(Keep 'em small)(Keep 'em small)

CSS GradientsCSS Gradients(i.e. no full page backgrounds)(i.e. no full page backgrounds)

Radial gradients are heavyRadial gradients are heavyUse cautionUse caution

If your app is sluggish, try If your app is sluggish, try replacing CSS gradients withreplacing CSS gradients with

data URIs or imagesdata URIs or images

Keep the DOM smallRemove unused elements

Memory not capped!

http://www.blaze.io/mobile/

http://stevesouders.com/mobileperf/mobileperfbkm.php

http://jdrop.org

Summary

Images | JavaScript | CSS | DOM

http://www.flickr.com/photos/brent_nashville/201143283/

BalanceThis is a new frontier.

The investigation has only just started.

Test, test, test.

Share.

Etcetera• My blog:

www.nczonline.net

• Twitter:@slicknet

• These Slides:http://slideshare.net/nzakas/

Mobile Web Speed Bumps

Technology

Transcript of Mobile Web Speed Bumps