Optimizing for Mobile Performance

Slide 1

Slide 1 text

http://ﬂic.kr/p/5DBgES Optimizing for Mobile Performance presented by Tim Kadlec at The Rich Web Experience 2011 in Fort Lauderdale, FL timkadlec.com @tkadlec

Slide 2

Slide 2 text

It’s a mobile world

Slide 3

Slide 3 text

http://ﬂic.kr/p/68NZhL 5.6 billion mobile subscriptions 6.9 billion people

Slide 4

Slide 4 text

http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless-airwaves/ 12 billion by 2020!

Slide 5

Slide 5 text

http://ﬂic.kr/p/7Pd9b9 More smart phones and tablets shipped than PCs

Slide 6

Slide 6 text

http://ﬂic.kr/p/9w8eWL Mobile traffic will grow by 26x in 5 years

Slide 7

Slide 7 text

http://ﬂic.kr/p/5ozJ6 25% mobile only in US 22% mobile only in UK

Slide 8

Slide 8 text

http://ﬂic.kr/p/4T2Rwa 70%!

Slide 9

Slide 9 text

http://ﬂic.kr/p/4rRmGv Things have changed....

Slide 10

Slide 10 text

http://ﬂic.kr/p/53czUe Mobile is more than this....

Slide 11

Slide 11 text

http://ﬂic.kr/p/6e7uqr Phones are used everywhere....

Slide 12

Slide 12 text

http://ﬂic.kr/p/5PoENv ...for increasingly complex tasks

Slide 13

Slide 13 text

Source: http://bit.ly/qap5fw 2010: eBay mobile transactions were > $2 billion 2009: $600 million

Slide 14

Slide 14 text

Jeff Bezos (July 2010) In the last twelve months, customers around the world have ordered more than US $1 billion of products from Amazon using a mobile device. Source: http://bit.ly/oKcI3e

Slide 15

Slide 15 text

Source: http://www.lukew.com/ﬀ/entry.asp?1361 Paypal: Up to $10 million mobile Total Payment Volume per day

Slide 16

Slide 16 text

http://ﬂic.kr/p/5X1QeB

Slide 17

Slide 17 text

http://ﬂic.kr/p/9trsE9 More m-commerce than e-commerce by 2015

Slide 18

Slide 18 text

http://ﬂic.kr/p/3qHDNt If you’re not optimizing, you’re throwing money away

Slide 19

Slide 19 text

http://ﬂic.kr/p/4vg5r4 Mobile users want fast experiences!

Slide 20

Slide 20 text

71% 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 Source: http://bit.ly/w2Dg3W

Slide 21

Slide 21 text

In 2009, that number was 58% Source: http://bit.ly/w2Dg3W

Slide 22

Slide 22 text

<= 1 second 2 seconds 3 seconds 4 seconds 5 seconds > 5 seconds 30% 14% 21% 24% 11% 18% 12% How quickly should a mobile site load? Source: http://bit.ly/tB9Q3T

Slide 23

Slide 23 text

25% 50% 75% 100% 2009 2011 20% 74% Percentage of people who will bounce after 5 seconds Source: http://bit.ly/viowVq

Slide 24

Slide 24 text

http://bit.ly/tVJpOJ Effect of delay on mobile

Slide 25

Slide 25 text

http://bit.ly/tVJpOJ Effect of delay on returning visits

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

http://ﬂic.kr/p/5ASnEz Your visitors notice!

Slide 28

Slide 28 text

Rollin Shelton Source: http://wapo.st/nXtqkd My default posture now, when wanting to check news sites, is to pretty much avoid The Post all together.

Slide 29

Slide 29 text

http://ﬂic.kr/p/66vUy5 Phone rage

Slide 30

Slide 30 text

http://ﬂic.kr/p/GYjsD So how are we doing?

Slide 31

Slide 31 text

http://mobile.httparchive.org/index.php HTTP Archive Mobile

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

http://ﬂic.kr/p/4mhKi5 Room for improvement

Slide 36

Slide 36 text

http://ﬂic.kr/p/6e7uqr This is gonna hurt

Slide 37

Slide 37 text

Source: http://bit.ly/oxwKDG

Slide 38

Slide 38 text

Source: http://yhoo.it/nzZTMQ Latency sucks

Slide 39

Slide 39 text

Source: http://bit.ly/o6mTmp Just how bad is it?

Slide 40

Slide 40 text

Uh oh!

Slide 41

Slide 41 text

Reduce requests

Slide 42

Slide 42 text

http://ﬂic.kr/p/8VoSGj CSS3

Slide 43

Slide 43 text

Sorry Office Depot

Slide 44

Slide 44 text

Image (1.23KB) Image (1.01KB) Image (137B) Image (155B)

Slide 45

Slide 45 text

-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px background-color: #0081db; background-image: -webkit-gradient(linear, left top, left bottom, from(#14a1f0), to (#0081db)); background-image: -webkit-linear-gradient(top, #14a1f0, #0081db); background-image: -moz-linear-gradient(top, #14a1f0, #0081db); background-image: -ms-linear-gradient(top, #14a1f0, #0081db); background-image: -o-linear-gradient(top, #14a1f0, #0081db); background-image: linear-gradient(top, #14a1f0, #0081db);

Slide 46

Slide 46 text

http://ﬂic.kr/p/urBo No such thing as a silver bullet

Slide 47

Slide 47 text

http://ﬂic.kr/p/4krww7 Replace images with Data URIs

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

http://bit.ly/1nld1J ...but they don’t have to be hard

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Inline JS & CSS (but be smart about it)

Slide 52

Slide 52 text

window.locationStorage.setItem(); window.locationStorage.getItem(); window.locationStorage.removeItem(); window.locationStorage.clear();

Slide 53

Slide 53 text

http://bit.ly/r0Xwq8 m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb iPhone repeat: 30kb

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

.....

Slide 56

Slide 56 text

RMS.Load('CUX.Keyframes.B8625FEE')

Slide 57

Slide 57 text

Eliminate unnecessary redirects

Slide 58

Slide 58 text

m.domain.com

Slide 59

Slide 59 text

http://amzn.to/onTYpF Write better javascript (duh)

Slide 60

Slide 60 text

Source: http://bit.ly/qXrMqe Javascript on desktop

Slide 61

Slide 61 text

Source: http://bit.ly/oE8MK9 Javascript on mobile

Slide 62

Slide 62 text

Source: http://bit.ly/ot91Ee Don’t parse JS until needed 1kB of JS = 1ms

Slide 63

Slide 63 text

Use a script loader $LAB .script("myScript.js") .script("bonusScript.js"); http://labjs.com/ $script(“myScript.js”); $script(“bonusScript.js”); http://dustindiaz.com/scriptjs

Slide 64

Slide 64 text

Source: http://bit.ly/gpwaa Lazy-loading JS ... // Make sure you strip out (or replace) comment blocks in your JavaScript first. /* JavaScript of lazy module */ function lazyLoad() { var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); }

Lazy Load

Slide 65

Slide 65 text

http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html 200k of JavaScript held within a block comment adds 240ms during page load, whereas 200k of JavaScript that is parsed during page load added 2600 ms.

Slide 66

Slide 66 text

Source: http://bit.ly/p9NoOL Prefer touch over click 300/500ms delay for click events Penalty is consistent cross- platform

Slide 67

Slide 67 text

Gustave Flaubert There is no truth. There is only perception.

Slide 68

Slide 68 text

Asynchronous UIs

Slide 69

Slide 69 text

Alex MacCaw http://alexmaccaw.co.uk/posts/async_ui ...interfaces should be completely non- blocking. Interactions should be resolved instantly; there should be no loading messages or spinners.

Slide 70

Slide 70 text

Make use of AppCache

Slide 71

Slide 71 text

CACHE MANIFEST someJS.js someMoreJS.js styles.css /images/myGoodSide.png /images/myBadSide.png AddType text/cache-manifest .appcache

Slide 72

Slide 72 text

CACHE MANIFEST CACHE someJS.js NETWORK login.php FALLBACK /online.php /offline.php

Slide 73

Slide 73 text

http://ﬂic.kr/p/4vV38F A few gotchas...

Slide 74

Slide 74 text

A single 404 means nothing is cached http://ﬂic.kr/p/9ZSGiM

Slide 75

Slide 75 text

Pages with manifest attribute automatically cached http://ﬂic.kr/p/7p7raq

Slide 76

Slide 76 text

Manifest files must be changed for resources to update http://ﬂic.kr/p/4xN7Mc

Slide 77

Slide 77 text

http://bit.ly/qX4pbf Confess.js

Slide 78

Slide 78 text

phantomjs confess.js http://functionsource.com

Slide 79

Slide 79 text

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: *

Slide 80

Slide 80 text

http://ﬂic.kr/p/6e7uqr manifestR

Slide 81

Slide 81 text

http://ﬂic.kr/p/6e7uqr

Slide 82

Slide 82 text

A few AppCache resources http://www.html5rocks.com/tutorials/appcache/beginner/ http://appcachefacts.info/ http://www.webdirections.org/blog/get-offline/ http://www.stevesouders.com/blog/2011/10/03/improving- app-cache/

Slide 83

Slide 83 text

http://ﬂic.kr/p/5N2tQ In the not-so-distant future... hopefully!

Slide 84

Slide 84 text

Source: http://www.w3.org/TR/netinfo-api/ Network Information API navigator.connection.type returns: unknown, ethernet, wifi, 2g, 3g, 4g, none supported! (kind of) returns: 0,1,2,3,4

Slide 85

Slide 85 text

http://ﬂic.kr/p/XLMGv Battery life

Slide 86

Slide 86 text

http://ﬂic.kr/p/6e7uqr Source: http://bit.ly/qXrMqe

Slide 87

Slide 87 text

Source: http://bit.ly/ny5IET

Slide 88

Slide 88 text

Source: http://bit.ly/nob5dd http://stevesouders.com/ms/

Slide 89

Slide 89 text

http://ﬂic.kr/p/5gh6L2 Test. Rinse. Repeat.

Slide 90

Slide 90 text

http://ﬂic.kr/p/Ruy9M Let’s look at some tools

Slide 91

Slide 91 text

Page Speed Online

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

Charles Proxy

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Blaze.io

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

Mobile performance bookmarklet

Slide 100

Slide 100 text

Jdrop

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

http://ﬂic.kr/p/sBbaN We need more data!

Slide 103

Slide 103 text

Joshua Bixby Source: http://bit.ly/mXUvR7 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.