Mobile WPO

Mobile WPO Presented by Tim Kadlec http://www.flickr.com/photos/vlastula/300102949/Sunday, May 29, 2011

It’s a Mobile World2 http://www.flickr.com/photos/ivyfield/4731067532/Sunday, May 29, 2011

5.6 billion mobile subscriptions 6.9 billion people3 http://www.flickr.com/photos/wwworks/2222523486/in/photostream/Sunday, May 29, 2011

More smart phones and tablets shipped than PCs4 http://www.flickr.com/photos/wwworks/4472384764/Sunday, May 29, 2011

Mobile traffic will grow by 26x in 5 years5 http://www.flickr.com/photos/epsos/5591761716/Sunday, May 29, 2011

25% mobile only in US 22% mobile only in UK6 http://www.flickr.com/photos/perspective/49671901/Sunday, May 29, 2011

Things have changed...7 http://www.flickr.com/photos/spine/2261612821/Sunday, May 29, 2011

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)8 Source: http://phx.corporate-ir.net/phoenix.zhtml?c=97664&p=irol-newsArticle&ID=1451041&highlight=Sunday, May 29, 2011

2010: eBay mobile transactions were > $2 billion 2009: 600 million9 Source: http://files.shareholder.com/downloads/ebay/1156981139x0x435896/9bd99676-b782-4784-87de-2899abe14a6d/eBay_Q42010EarningsRelease_Draft011911_FINAL.pdfSunday, May 29, 2011

If you’re not optimizing, you’re throwing money away10 http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/Sunday, May 29, 2011

Mobile users want fast experiences!11 http://www.flickr.com/photos/thatguyfromcchs08/2300190277/Sunday, May 29, 2011

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 home12Sunday, May 29, 2011

73% of users are willing to wait a minute or less to complete a simple transaction - like checking their bank balance13Sunday, May 29, 2011

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

So how are we doing?15 http://www.flickr.com/photos/deepphoto/463648209/Sunday, May 29, 2011

HTTP Archive Mobile16 http://mobile.httparchive.org/index.phpSunday, May 29, 2011

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

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

Retail and Banking19 Source: http://www.gomez.com/benchmarks/sitemap/?region=US_BenchmarksSunday, May 29, 2011

Definitely room for improvement20 http://www.flickr.com/photos/jonathansuzuki/2198667658/Sunday, May 29, 2011

This Is Gonna Hurt21 http://www.flickr.com/photos/scottfeldstein/372141970/Sunday, May 29, 2011

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

Latency sucks23 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/Sunday, May 29, 2011

Just how bad is it?24 http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/Sunday, May 29, 2011

Uh oh!25 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/Sunday, May 29, 2011

Reduce Requests26Sunday, May 29, 2011

Replace images with Data URIs27 http://www.flickr.com/photos/orinrobertjohn/2189064194/Sunday, May 29, 2011

They’re a little ugly... data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ SBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMb WgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcD RkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhMOJ yQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGMG hX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJNj MLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////// AC221EsAAAEWSURBVHjabNHlVwMxDADw3u1kbGPK3NhwGe7uvuE+3En+/8/k2h6sQD70pf3l9aUNQ0Q9dj5/ WWjFv8EQI2kAaJvA/ 7WTcKr513kgL9UkTcpar9En6ljHttBVgBFL6D4VeiI8TUAL1+ljMAQugxOZopPne3MWqY4LMCoavuEKUY3yoRC8kJYL2 FNnXCtCwaZL/QBB0mvw3YZXuF6dSC4Z4ynqgHRwl7anTzNZ4jFojJzTVaB96y4Fwx925iKp6Doy +XpzL354tvauaMJVKzRH66eCnqzULh8MYP+BguEm/hu46H2EOOKkgvYr/8nZ8tHbA9XhZiM+L8kpaJrOry/uuFRK +78n+DPNjVo1at4Hu2PuyZcAAwA2KbSDyyYFcAAAAABJRU5ErkJggg==28Sunday, May 29, 2011

...but they don’t have to be hard29 http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/Sunday, May 29, 2011

java -jar cssembed-x.y.z.jar -o styles_new.css styles.css30Sunday, May 29, 2011

Inline JS & CSS (but be smart about it)31Sunday, May 29, 2011

m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb iPhone repeat: 30kb32 http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/Sunday, May 29, 2011

_load:function(b){ var a=null; if(localStorage) try{a=localStorage.getItem(b)} catch(c){} return a }33Sunday, May 29, 2011

Javascript on Desktop36 Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.htmlSunday, May 29, 2011

Javascript on Mobile37 Source: http://jeftek.com/1942/motorola-xoom-sunspider-results/Sunday, May 29, 2011

Write Better Javascript (duh)38 http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279XSunday, May 29, 2011

Don’t parse JS until needed 1kB of JS = 1ms39 Source: http://code.google.com/speed/page-speed/docs/mobile.htmlSunday, May 29, 2011

Use a script loader <script> $LAB .script("myScript.js") .script("bonusScript.js"); </script> http://labjs.com/ <script> $script(“myScript.js”); $script(“bonusScript.js”); </script> http://dustindiaz.com/scriptjs40Sunday, May 29, 2011

Lazy-loading JS <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>41 Source: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSunday, May 29, 2011

Prefer touch over click 300/500ms delay for click events Penalty is consistent cross- platform Remember - perception is important!42 Source: http://pcapperf.appspot.com/fastbuttonSunday, May 29, 2011

Make use of AppCache43Sunday, May 29, 2011

CACHE MANIFEST someJS.js someMoreJS.js styles.css /images/myGoodSide.png /images/myBadSide.png <html manifest="mySite.appcache"> AddType text/cache-manifest .appcache Simple example44Sunday, May 29, 2011

CACHE MANIFEST CACHE someJS.js NETWORK login.php FALLBACK /online.php /offline.php A bit more complicated45Sunday, May 29, 2011

Confess.js46 https://github.com/jamesgpearce/confessSunday, May 29, 2011

Confess.js phantomjs confess.js http://functionsource.com47Sunday, May 29, 2011

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. Youll 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.png http://functionsource.com/images/icons/podcast.png http://functionsource.com/images/icons/firehose.png NETWORK: *Sunday, May 29, 2011

A few AppCache resources http://www.html5rocks.com/tutorials/ appcache/beginner/ http://appcachefacts.info/49Sunday, May 29, 2011

Test. Rinse. Repeat.50 http://www.flickr.com/photos/jurvetson/2798315677/Sunday, May 29, 2011

Let’s look at some tools51 http://www.flickr.com/photos/olibac/560079597/Sunday, May 29, 2011

Page Speed Online52Sunday, May 29, 2011

Sunday, May 29, 2011

Charles Proxy55Sunday, May 29, 2011

56Sunday, May 29, 2011

Blaze.io57Sunday, May 29, 2011

Sunday, May 29, 2011

Mobile Performance Bookmarklet59Sunday, May 29, 2011

Jdrop60Sunday, May 29, 2011

61Sunday, May 29, 2011

We need more data!62Sunday, May 29, 2011

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 Bixby63 Source: http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/Sunday, May 29, 2011

Experiment. Create. Share.64Sunday, May 29, 2011

Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlecSunday, May 29, 2011

http://www.scoop.it	27
http://www.techgig.com	17
http://lanyrd.com	16
http://my89.posterous.com	16
http://twitter.com	6
http://paper.li	5
http://a0.twimg.com	5
https://twitter.com	4
http://www.slideshare.net	4
http://localhost	3
http://zapatosnikeecuador.blogspot.com	3
http://josephstalin.com:3000	2
http://rotanarotana.shareist.com	1
http://eureka89.tumblr.com	1

Mobile WPO

by Tim Kadlec on May 29, 2011

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 110

Statistics

Mobile WPO Presentation Transcript