Post on 17-May-2015
description
Mobile WPO
Presented by Tim Kadlec
http://www.flickr.com/photos/vlastula/300102949/Sunday, May 29, 2011
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
3Sunday, May 29, 2011
http://www.flickr.com/photos/wwworks/4472384764/
More smart phones andtablets shipped than PCs
4Sunday, May 29, 2011
http://www.flickr.com/photos/epsos/5591761716/
Mobile traffic will grow by 26x in 5 years
5Sunday, May 29, 2011
http://www.flickr.com/photos/perspective/49671901/
25% mobile only in US22% mobile only in UK
6Sunday, May 29, 2011
http://www.flickr.com/photos/spine/2261612821/
Things have changed...
7Sunday, May 29, 2011
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)
8Sunday, May 29, 2011
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
9Sunday, May 29, 2011
http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/
If you’re not optimizing, you’re throwing money away
10Sunday, May 29, 2011
http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
Mobile users want fast experiences!
11Sunday, 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 home
12Sunday, May 29, 2011
73% of users are willing to wait a minute or less to complete a simple transaction - like checking their bank balance
13Sunday, May 29, 2011
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?
15Sunday, May 29, 2011
http://mobile.httparchive.org/index.php
HTTP Archive Mobile
16Sunday, May 29, 2011
Source: http://mobile.httparchive.org/trends.php17Sunday, May 29, 2011
Source: http://mobile.httparchive.org/trends.php18Sunday, May 29, 2011
Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks
Retail and Banking
19Sunday, May 29, 2011
http://www.flickr.com/photos/jonathansuzuki/2198667658/
Definitely room for improvement
20Sunday, May 29, 2011
http://www.flickr.com/photos/scottfeldstein/372141970/
This Is Gonna Hurt
21Sunday, May 29, 2011
http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=122Sunday, May 29, 2011
http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
Latency sucks
23Sunday, May 29, 2011
http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/
Just how bad is it?
24Sunday, May 29, 2011
http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
Uh oh!
25Sunday, May 29, 2011
Reduce Requests
26Sunday, May 29, 2011
http://www.flickr.com/photos/orinrobertjohn/2189064194/
Replace images with Data URIs
27Sunday, May 29, 2011
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
29Sunday, May 29, 2011
30
java -jar cssembed-x.y.z.jar -o styles_new.css styles.css
Sunday, May 29, 2011
Inline JS & CSS(but be smart about it)
31Sunday, May 29, 2011
http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/
m.bing.com
32
Desktop: 93kBiPad: 59kBiPhone: 198kbiPhone repeat: 30kb
Sunday, May 29, 2011
33
_load:function(b){ var a=null; if(localStorage) try{a=localStorage.getItem(b)} catch(c){} return a}
Sunday, May 29, 2011
34
<style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css">.....</style>
Sunday, May 29, 2011
35
<script type="text/javascript">RMS.Load('CUX.Keyframes.B8625FEE')</script>
Sunday, May 29, 2011
Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html
Javascript on Desktop
36Sunday, May 29, 2011
Source: http://jeftek.com/1942/motorola-xoom-sunspider-results/
Javascript on Mobile
37Sunday, May 29, 2011
http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X
Write Better Javascript(duh)
38Sunday, May 29, 2011
Source: http://code.google.com/speed/page-speed/docs/mobile.html
Don’t parse JS until needed
39
1kB of JS = 1ms
Sunday, May 29, 2011
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
Sunday, May 29, 2011
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>
Sunday, May 29, 2011
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!
Sunday, May 29, 2011
Make use of AppCache
43Sunday, May 29, 2011
Simple example44
CACHE MANIFESTsomeJS.jssomeMoreJS.jsstyles.css/images/myGoodSide.png/images/myBadSide.png
<html manifest="mySite.appcache">
AddType text/cache-manifest .appcache
Sunday, May 29, 2011
A bit more complicated45
CACHE MANIFEST
CACHEsomeJS.js
NETWORKlogin.php
FALLBACK/online.php /offline.php
Sunday, May 29, 2011
https://github.com/jamesgpearce/confess
Confess.js
46Sunday, May 29, 2011
Confess.js
47
phantomjs confess.js http://functionsource.com
Sunday, 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. 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:*
Sunday, May 29, 2011
A few AppCache resources
49
http://www.html5rocks.com/tutorials/appcache/beginner/
http://appcachefacts.info/
Sunday, May 29, 2011
http://www.flickr.com/photos/jurvetson/2798315677/
Test. Rinse. Repeat.
50Sunday, May 29, 2011
http://www.flickr.com/photos/olibac/560079597/
Let’s look at some tools
51Sunday, May 29, 2011
Page Speed Online
52Sunday, May 29, 2011
Sunday, May 29, 2011
Sunday, May 29, 2011
Charles Proxy
55Sunday, May 29, 2011
56Sunday, May 29, 2011
Blaze.io
57Sunday, May 29, 2011
Sunday, May 29, 2011
Mobile Performance Bookmarklet
59Sunday, May 29, 2011
60
Jdrop
Sunday, May 29, 2011
61Sunday, May 29, 2011
We need more data!
62Sunday, May 29, 2011
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
Sunday, May 29, 2011
64
Experiment. Create. Share.
Sunday, May 29, 2011
Thank you!
Tim Kadlechttp://www.timkadlec.com
Twitter: @tkadlec
Sunday, May 29, 2011