mobile wpo

Mobile WPO

Presented by Tim Kadlec

http://www.flickr.com/photos/vlastula/300102949/Sunday, May 29, 2011

http://www.flickr.com/photos/vlastula/300102949/

http://www.flickr.com/photos/vlastula/300102949/

http://www.flickr.com/photos/ivyfield/4731067532/

It’s a Mobile World

2Sunday, May 29, 2011



http://www.flickr.com/photos/wwworks/2222523486/in/photostream/

5.6 billion mobile subscriptions6.9 billion people




http://www.flickr.com/photos/wwworks/4472384764/

More smart phones andtablets shipped than PCs




http://www.flickr.com/photos/epsos/5591761716/

Mobile traffic will grow by 26x in 5 years




http://www.flickr.com/photos/perspective/49671901/

25% mobile only in US22% mobile only in UK




http://www.flickr.com/photos/spine/2261612821/

Things have changed...




Source: http://phx.corporate-ir.net/phoenix.zhtml?c=97664&p=irol-newsArticle&ID=1451041&highlight=

In the last twelve months, customers around the world have ordered more than US $1 billion of products from Amazon using a mobile device.

- Jeff Bezos (July 2010)


http://phx.corporate-ir.net/phoenix.zhtml?c=97664&p=irol-newsArticle&ID=1451041&highlight=


Source: http://files.shareholder.com/downloads/ebay/1156981139x0x435896/9bd99676-b782-4784-87de-2899abe14a6d/eBay_Q42010EarningsRelease_Draft011911_FINAL.pdf

2010: eBay mobile transactions were > $2 billion

2009: 600 million




http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/

If you’re not optimizing, you’re throwing money away




http://www.flickr.com/photos/thatguyfromcchs08/2300190277/

Mobile users want fast experiences!




58% of mobile users expect websites to load as quickly, almost as quickly or faster on their mobile phone, compared to the computer they use at home


73% of users are willing to wait a minute or less to complete a simple transaction - like checking their bank balance


Source: The business case for assuring the customer mobile Web experience14Sunday, May 29, 2011

http://www.flickr.com/photos/deepphoto/463648209/

So how are we doing?




http://mobile.httparchive.org/index.php

HTTP Archive Mobile




Source: http://mobile.httparchive.org/trends.php17Sunday, May 29, 2011

http://mobile.httparchive.org/trends.php


Source: http://mobile.httparchive.org/trends.php18Sunday, May 29, 2011



Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks

Retail and Banking


http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks

http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks

http://www.flickr.com/photos/jonathansuzuki/2198667658/

Definitely room for improvement




http://www.flickr.com/photos/scottfeldstein/372141970/

This Is Gonna Hurt




http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=122Sunday, May 29, 2011

http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1

http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1

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

Latency sucks




http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/

Just how bad is it?





Uh oh!




Reduce Requests


http://www.flickr.com/photos/orinrobertjohn/2189064194/

Replace images with Data URIs




They’re a little ugly...

28

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMbWgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcDRkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhMOJyQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGMGhX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJNjMLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AC221EsAAAEWSURBVHjabNHlVwMxDADw3u1kbGPK3NhwGe7uvuE+3En+/8/k2h6sQD70pf3l9aUNQ0Q9dj5/WWjFv8EQI2kAaJvA/7WTcKr513kgL9UkTcpar9En6ljHttBVgBFL6D4VeiI8TUAL1+ljMAQugxOZopPne3MWqY4LMCoavuEKUY3yoRC8kJYL2FNnXCtCwaZL/QBB0mvw3YZXuF6dSC4Z4ynqgHRwl7anTzNZ4jFojJzTVaB96y4Fwx925iKp6Doy+XpzL354tvauaMJVKzRH66eCnqzULh8MYP+BguEm/hu46H2EOOKkgvYr/8nZ8tHbA9XhZiM+L8kpaJrOry/uuFRK+78n+DPNjVo1at4Hu2PuyZcAAwA2KbSDyyYFcAAAAABJRU5ErkJggg==

Sunday, May 29, 2011

http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/

...but they don’t have to be hard




30

java -jar cssembed-x.y.z.jar -o styles_new.css styles.css


Inline JS & CSS(but be smart about it)


http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/

m.bing.com

32

Desktop: 93kBiPad: 59kBiPhone: 198kbiPhone repeat: 30kb




33

_load:function(b){ var a=null; if(localStorage) try{a=localStorage.getItem(b)} catch(c){} return a}


34

<style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css">.....</style>


35

<script type="text/javascript">RMS.Load('CUX.Keyframes.B8625FEE')</script>


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

Javascript on Desktop


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

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

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

Javascript on Mobile


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

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

http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X

Write Better Javascript(duh)




Source: http://code.google.com/speed/page-speed/docs/mobile.html

Don’t parse JS until needed

39

1kB of JS = 1ms


http://code.google.com/speed/page-speed/docs/mobile.html

http://code.google.com/speed/page-speed/docs/mobile.html

Use a script loader

40

<script> $LAB .script("myScript.js") .script("bonusScript.js");</script>

http://labjs.com/

<script> $script(“myScript.js”); $script(“bonusScript.js”);</script>

http://dustindiaz.com/scriptjs


http://labjs.com/

http://labjs.com/

http://labjs.com/

http://labjs.com/



Source: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

Lazy-loading JS

41

<html>...<script id="lazy">// Make sure you strip out (or replace) comment blocks in your JavaScript first./*JavaScript of lazy module*/</script>

<script> function lazyLoad() { var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); }</script>

<div onclick=lazyLoad()> Lazy Load </div></html>


http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

Source: http://pcapperf.appspot.com/fastbutton

Prefer touch over click

42

300/500ms delay for click events

Penalty is consistent cross-platform

Remember - perception is important!


http://pcapperf.appspot.com/fastbutton

http://pcapperf.appspot.com/fastbutton

Make use of AppCache


Simple example44

CACHE MANIFESTsomeJS.jssomeMoreJS.jsstyles.css/images/myGoodSide.png/images/myBadSide.png

<html manifest="mySite.appcache">

AddType text/cache-manifest .appcache


A bit more complicated45

CACHE MANIFEST

CACHEsomeJS.js

NETWORKlogin.php

FALLBACK/online.php /offline.php


https://github.com/jamesgpearce/confess

Confess.js




Confess.js

47

phantomjs confess.js http://functionsource.com


http://functionsource.com


CACHE MANIFEST

# This manifest was created by confess.js, http://github.com/jamesgpearce/confess## Time: Wed Apr 13 2011 15:40:27 GMT-0700 (PDT)# URL: http://functionsource.com# UA: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/533.3 (KHTML, like Gecko) PhantomJS/1.1.0 Safari/533.3## Any console output generated by this page or app is shown immediately below. You'll need to remove this to create a valid manifest syntax.# [Start of console output]# [End of console output]

CACHE:/javascripts/lib/jquery.js/javascripts/lib/underscore.js/javascripts/lib/backbone.js........http://functionsource.com/images/icons/rss.pnghttp://functionsource.com/images/icons/podcast.pnghttp://functionsource.com/images/icons/firehose.png

NETWORK:*


http://github.com/jamesgpearce/confess






http://functionsource.com/images/icons/rss.png

http://functionsource.com/images/icons/rss.png

http://functionsource.com/images/icons/podcast.png

http://functionsource.com/images/icons/podcast.png

http://functionsource.com/images/icons/firehose.png

http://functionsource.com/images/icons/firehose.png

A few AppCache resources

49

http://www.html5rocks.com/tutorials/appcache/beginner/

http://appcachefacts.info/








http://www.flickr.com/photos/jurvetson/2798315677/

Test. Rinse. Repeat.




http://www.flickr.com/photos/olibac/560079597/

Let’s look at some tools




Page Speed Online


Charles Proxy


Blaze.io


Mobile Performance Bookmarklet


60

Jdrop


We need more data!


Source: http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/63

It took our community almost ten years to generate meaningful data around regular web performance. We don’t have that luxury with the mobile internet.

- Joshua Bixby


http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/

http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/

64

Experiment. Create. Share.


Thank you!

Tim Kadlechttp://www.timkadlec.com

Twitter: @tkadlec


http://www.timkadlec.com

http://www.timkadlec.com

mobile wpo

Technology

mobile world2 http

pcs4 http

30kb32 http

hard29 http

mobile users

mobile device

mobile wpo

mobile subscriptions