Mobile WPO

Mobile WPO

Presented by Tim Kadlec

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

It’s a Mobile World

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

5.6 billion mobile subscriptions
6.9 billion people

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

More smart phones and
tablets shipped than PCs

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

Mobile traffic will grow by 26x in 5 years

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

25% mobile only in US
22% mobile only in UK

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

Things have changed...

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

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=

2010: eBay mobile transactions were > $2 billion

2009: 600 million

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


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

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

Mobile users want fast experiences!

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

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

12

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

13

14 Source: The business case for assuring the customer mobile Web experience

So how are we doing?

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

HTTP Archive Mobile

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

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

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

Retail and Banking

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

Definitely room for improvement

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

This Is Gonna Hurt

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

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

Latency sucks

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

Just how bad is it?

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

Uh oh!

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

Reduce Requests

26

Replace images with Data URIs

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

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==

28

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

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

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

30

Inline JS & CSS
(but be smart about it)

31

m.bing.com

Desktop: 93kB
iPad: 59kB
iPhone: 198kb
iPhone repeat: 30kb

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

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

33

Javascript on Desktop

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

Javascript on Mobile

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

Write Better Javascript
(duh)

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

Don’t parse JS until needed

1kB of JS = 1ms

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

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/scriptjs

40

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.html

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/fastbutton

Make use of AppCache

43

CACHE MANIFEST
someJS.js
someMoreJS.js
styles.css
/images/myGoodSide.png
/images/myBadSide.png

<html manifest="mySite.appcache">

AddType text/cache-manifest .appcache

Simple example
44

CACHE MANIFEST

CACHE
someJS.js

NETWORK
login.php

FALLBACK
/online.php /offline.php

A bit more complicated
45

Confess.js

46 https://github.com/jamesgpearce/confess

Confess.js

phantomjs confess.js http://functionsource.com

47

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.png
http://functionsource.com/images/icons/podcast.png
http://functionsource.com/images/icons/firehose.png

NETWORK:
*

A few AppCache resources

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

http://appcachefacts.info/

49

Test. Rinse. Repeat.

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

Let’s look at some tools

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

Page Speed Online

52

Charles Proxy

55

Blaze.io

57

Mobile Performance Bookmarklet

59

We need more data!

62

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

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

Experiment. Create. Share.

64

Thank you!

Tim Kadlec
http://www.timkadlec.com
Twitter: @tkadlec


Mobile WPO

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Mobile WPO

Similar to Mobile WPO (20)

Recently uploaded

Recently uploaded (20)

Mobile WPO