Mobile Web & HTML5 Performance Optimization

mobile web
& html5
performance
optimization

June, 14, 2011 max firtman
Santa Clara, CA
@firt
firt.mobi
1

who am I?
mobile+web developer
mobilexweb.com blog
wpo passionate

@ﬁrt

2

where?
buenos aires ~ argentina true lies
tango scene
patagonia
soccer
tango

3

books

Image from my house
4

good news!
today ~ last day

save 50%
oreilly.com

6

agenda

‣ a little overview of mobile web
‣ measuring and debugging

‣ mobile html5

‣ optimization areas

‣ tango dance

8

mobile web
is slow

Picture from Simon Howden freedigitalphotos.net!
14

mobile web is slow because...

we are doing it wrong

15

!"#$%&'()
it’s complicated

16

differences
‣ slower networks
‣ higher latency

‣ slower hardware

‣ different browsing experience

‣ different context

‣ different behaviours

‣ different possible networks

18

diﬀerences

There are browsers supporting 1, 2,
4, 6 parallel downloads

21

mobile browsers
‣ too many
‣ (some) too limited

‣ (some) too innovative

‣ (some) proxied

‣ (most) without documentation

‣ (most) without a name

‣ (most) without debugging tools

22

MOBILE WEB USAGE!

!"#$%&'()*+, !"#$%&'()*+,

!(-.#/,0'()*+, !(-.#/,0'()*+,

1*#%2$*,
1*#%2$*,0'()*+,
0'()*+,

MARKET SHARE!

23

a quick, dirty list
‣ Safari on iOS
‣ Android Browser

‣ Symbian Browser

‣ webOS Browser

‣ BlackBerry Browser

‣ Bada Browser

‣ Firefox

‣ Internet Explorer

24

a quick, dirty list (cont.)
‣ NetFront
‣ Myriad

‣ Nokia Browser (Ovi)

‣ Phantom

‣ microB

‣ Opera Mobile

‣ Opera Mini

‣ Skyﬁre

‣ BOLT

25

they are on tablets too!
‣ Safari on iOS
‣ Android Browser

‣ webOS Browser

‣ BlackBerry Browser

‣ Opera Mini

26

and with diﬀerent versions...

27

and there’s more!

28

pseudobrowsers

‣ mostly on iOS and Android
‣ uses the internal web control

‣ have diﬀerent behavior than the native!

30

wait

we can do it!

31

we need to forget
and learn

32

forget about

‣ pixels
‣ static designs

‣ desktop frameworks (ok, not always)

‣ always connected

‣ unlimited power

33

learn about

‣ server-side detection
‣ progressive enhancement

‣ responsive design

‣ best experience for each context

‣ the top-model approach

34

speed ~ perception

36

measuring and debugging

37

two browsers
with remote tools

Opera Mobile with DragonFly

BlackBerry Browser for PlayBook, for Smartphones 7.0

38

emulators

‣ diﬀerent types
‣ good for ﬁrst testing

‣ free, +150

‣ www.mobilexweb.com/emulators

‣ proxy: Charles Proxy, Fiddler

40

real devices
‣ proxys on wifi? charles, fiddler
‣ proxys on the device: mobitest

‣ hybrids / pseudobrowsers: mobitest

‣ network sniffers: pcapperf

‣ server-side sniffers

‣ remote javascript tools: weinre,

jdrop, mobileperf (p.ad.ag)

41

remote labs

‣ deviceanywhere.com
‣ perfectomobile.com

‣ remote device access (nokia) - free

‣ lab.dev (samsung) - free

42

2g, 3g, 4g

‣ Remember to test it
‣ Charles Proxy helps you with

throttling

43

html5
if the device is not html5-compatible
‣ it’s ﬁne...

‣ it will work without those enhancements

‣ even html5-compatible devices don’t have

the same compatibility level
‣ don’t be fanatic, be multiplatform

45

html5 compatibility 2011
‣ iOS 3.0+
‣ android 2.0+

‣ blackberry smartphones 5.0+

‣ blackberry playbook 1.0+

‣ webOS 1.4+

‣ symbian anna+

‣ bada 2.0

‣ windows phone mango+

‣ ....

46

real world sample

(nothing personal)

united.com

47

original iPhone results from blaze.io/mobile

15-20 seconds to load (over WiFi!) total 602Kb

48

original Android results from blaze.io/mobile

4-8 seconds to load (over WiFi!) total 442Kb

49

400 / 600Kb? Where are they?

50

1. be mobile
‣ don’t leave just a desktop website
‣ use mobile meta tags & viewport

‣ usability

‣ use server-side detection

‣ right experience to each context

53

2. don’t redirect

55

2. don’t redirect

united.com > www.united.com > mobile.united.com
56

2. don’t redirect

‣ deliver the mobile site directly
‣ it’s seo-compatible

‣ if too diﬃcult: only one redirect and

cached

57

3. be simple

‣ simple, semantic DOM
‣ complexity == wrong

‣ remember, it’s mobile

‣ use html5 rules and tags

59

3. be simple
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

60

3. be simple

<div class="ktable kbasemargin kwt100"
konywidgettype = "Ksegment"
>

61

3. be simple

<body
class = "newBg"
>

62

3. be simple

<a
konywidgettype = "Ksegment"
href="#" eventname="segNewHomeevent_"
rowid="0">

63

3. be simple
Current XHTML:
• 18Kb
• 180 DOM elements
• 145 has class deﬁnition (!?)
• 80% has multiple class deﬁnition

64

3. be simple
Current CSS:
• 137Kb!
• 6700 lines
• 681 selectors

65

3. be simple
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/><meta name="apple-touch-fullscreen" content="YES"/><meta http-equiv="Content-
Type" content="text/html; charset=utf-8"/><script type="application/x-javascript" src="iphone/konyframework.js"></script><style type="text/css" media="screen">@import "iphone/konyiphone.css";</style><script type="application/x-javascript" src="iphone/
konycalendar.js"></script><script type="text/javascript" src="iphone/motionpack.js"></script><title>United Airlines</title></head><body class="newBg"><form class="newBg" id="frmNewHome" action="http://mobile.united.com/p" method="post"
selected="true"><input name="formid" type="hidden" value="frmNewHome"/><input name="cacheid" type="hidden" value="1b76e288d-c637-4007-930d-b48a619e0bb2"/><input name="node" type="hidden" value="1"/><div class="ktable middleleftalign kmg0000
kwt100"><div class="middleleftalign kwt100 krow"><div class="middlecenteralign kwt100 kcell"><img src="http://mobile.united.com/iphone/images/inewh.png" alt=""class="kmg0000 kbasepadding "/></div></div></div><ul class="kmg0000 kbasepadding "><li
class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="0"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100
krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow"
konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow"
konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div
class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/icin.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label
konywidgettype="Ksegment" class="lblMenu">Check-in</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></div></
div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="1"><div class="ktable kbasemargin kwt100"
konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div
class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100
krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div
class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ifstat.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label
konywidgettype="Ksegment" class="lblMenu">Flight status</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></
div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="2"><div class="ktable kbasemargin kwt100"
class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ires.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label
konywidgettype="Ksegment" class="lblMenu">My reservations</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></
class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ifavail.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label
konywidgettype="Ksegment" class="lblMenu">Flight availability</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></
class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/imps.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label
konywidgettype="Ksegment" class="lblMenu">Mileage Plus® summary</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></
div></div></div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#" eventname="segNewHomeevent_" rowid="5"><div class="ktable kbasemargin
kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign hbac kmg0303 kwt94"
konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin middlecenteralign kwt100"
konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96" konywidgettype="Ksegment"><div
class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/ifnot.png" alt=""konywidgettype="Ksegment"/></div><div
class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Flight notiﬁcations</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/
images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></div></div></div></div></div></div></div></div></div></a></li><li class="transSEg +" style="border-color:#000000;border-width:0px; "><a konywidgettype="Ksegment" href="#"
eventname="segNewHomeevent_" rowid="6"><div class="ktable kbasemargin kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div
class="ktable middleleftalign hbac kmg0303 kwt94" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="kwt100 middlecenteralign kcell" konywidgettype="Ksegment"><div class="ktable kbasemargin
middlecenteralign kwt100" konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt100 kcell" konywidgettype="Ksegment"><div class="ktable middleleftalign kmg1202 kwt96"
konywidgettype="Ksegment"><div class="middleleftalign kwt100 krow" konywidgettype="Ksegment"><div class="middleleftalign kwt14 kcell" konywidgettype="Ksegment"><img src="http://mobile.united.com/iphone/images/imore.png"
alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">More</label></div><div class="middlerightalign kwt4 kcell" konywidgettype="Ksegment"><img
src="http://mobile.united.com/iphone/images/ind2.png" alt=""konywidgettype="Ksegment"/></div></div></div></div></div></div></div></div></div></div></div></div></a></li></ul><div class="ktable middleleftalign kmg2020 kwt100"><div class="middleleftalign
kwt100 krow"><div class="middlecenteralign kwt98 kcell"><div class="kbasemargin ktable kwt100"><div class="middleleftalign kwt100 krow"><div class="middleleftalign kwt100 kcell"><div class="ktable middleleftalign kmg0303 kwt94"><div class="middleleftalign
kwt100 krow"><div class="topleftalign kwt40 kcell"><a type="submit" id="link1921680154479258760" href="#" class="kwt100 kheight lnkwit kbasemargin kbasepadding " konywidgettype="Klink" event="yes">Full site</a></div><div class="toprightalign kwt60 kcell"><a
type="submit" id="link1921680154479258763" href="#" class="kwt100 kheight lnkwit kbasemargin kbasepadding " konywidgettype="Klink" event="yes">Continental mobile</a></div></div></div></div></div></div></div><div class="lblnorm topleftalign kwt2 kcell"><label
class="kwt100 kheight lblnorm kbasemargin kbasepadding "></label></div></div></div><div class="kwt100 ktable"><div class="kwt100 krow"><div class="middlecenteralign kwt100 kcell"><img src="http://mobile.united.com/iphone/images/istar.png"
alt=""class="kmg0000 kbasepadding "/></div></div></div><div class="kbasepadding kmg0000 kwt100 ktable"><div class="kwt100 krow"><div class="lblsmallwite middlecenteralign kwt100 kcell"><label class="kwt100 kheight lblsmallwite kbasepadding ">©2011
United Airlines</label></div></div></div><div class="kbasepadding kmg0000 kwt100 ktable"><div class="kwt100 krow"><div class="lblsmallwite middlecenteralign kwt100 kcell"><label class="kwt100 kheight lblsmallwite kbasepadding ">Powered by Kony Solutions</
label></div></div></div></form></body></html>

66

3. be simple
Apply HTML5 semantic tips

‣ doctype: <!DOCTYPE html>
‣ no xml ns

‣ no insane attributes <script type?>

‣ no divitis: article, section, nav, ...

‣ no classitis: header, footer, ...

67

3. be simple
<!DOCTYPE html>
<html>
<head>...</head>

<body>
<header>
<img src="index_archivos/inewh.png">
</header>
<nav>
<ul>
<li><a href='checkin.html'>Check in</a></li>
<li><a href='flight.html'>Flight status</a></li>
<li><a href='reservations.html'>My reservations</a></li>
<li><a href='availability.html'>Flight availability</a></li>
<li><a href='milleage.html'>Milleage Plus Summary</a></li>
<li><a href='notifications.html'>Flight Notifications</a></li>
<li><a href='more.html'>More</a></li>
</ul>
</nav>

<footer>
<a href='http://united.com' id='lnkFull'>Full site</a>
<a href='http://continental.com' id='lnkContinental'>Continental mobile</a>
<img src="index_archivos/istar.png">
<h5>©2011 United Airlines</h5>
</footer>
</body></html>

68

3. be simple
Semantic HTML5
• 1.3Kb (7% of original size)
• 31 DOM elements (17% of original qty)
• NO class
• <1Kb CSS
• Same design using CSS.
• If CSS is not there, no design!

69

4. known wpo techniques

70

• gzip components
• be friend of caching
• stylesheets at the top
• scripts to the bottom (maybe)
• scripts and styles external
• reduce dns lookups
• minify javascript and css

71

check desktop-like wpo suggestions

Yslow! Page Speed

73

5. resource != download

74

5. resource != download
Reduce http requests

‣ every request hurts
‣ a lot...

‣ more in the mobile space

‣ ideal: 1 only request initial load

‣ even no request!

75

6. images
‣ only semantic images
‣ no eﬀects, no ornaments

‣ use CSS 2.1, CSS 3 or nothing

‣ compress images

‣ deliver the right image size for every

device - context
‣ don’t think on image=ﬁle

77

6. images
• 7 images on icons
• 2 images for logos
• 1 image for arrow
• 1 image for cell background
• 1 background image...
• ...350Kb and 854x854 pixels!!

78

6. images

‣ we have 2 semantic images: logos
‣ remove background, icons & other images

‣ don’t worry! we’ll try to provide alternatives

if the context helps

79

6. images
for the background a CSS3 gradient
background: #1e5799;
!
background: -moz-linear-gradient(top,
#1e5799 0%, #2989d8 50%, #7db9e8 100%);
! !
background: -webkit-gradient(linear,
left top, left bottom, color-stop
(0%,#1e5799), color-stop(50%,#2989d8),
color-stop(100%,#7db9e8));

80

6. images
CSS3 gradientes
http://www.colorzilla.com/gradient-editor/

81

6. images
for the cell background
...a CSS3 gradient too

82

6. logos & icons
We can use CSS sprites
‣ very good support on mobile
‣ use a device library to detect

‣ lot of free services: spriteme.org, css-sprit.es

83

6. logos & icons
We can use inline images (aka data URI)

‣ very good support on mobile
‣ use a device library to detect

‣ ﬁrst, compress!

‣ lot of free online services

‣ just convert bytes into base64

‣ easy to convert from server-side

base64_encode() in PHP
84

6. logos & icons
We can use inline images (aka data URI)

data:<mime-type>;base64,<base64 data>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMUAAAAiAgMAAACSF/VZAAAAA3NCSVQICAjb4U/
gAAAACVBMVEX///////+ZmZlVZlogAAAAA3RSTlP//
wDXyg1BAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHnRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1LjGrH0jrAAAA9k
lEQVQ4je3TOw6DMAwGYMsT4hSMKKf0UTKinLJ+JEAeLmmnDo1aELQf+e0ESHMD8sBE8Ce/SQhThJD4dPBJviQ/8U0eQf/
qEfDJ6pHgEsxkacnqEkkGOJgFfRJklq0nUIgd5KY+XTJrsNiT/SLrnUS5zKU0ZGmI1g1ol0QWrSbwjnAG+dRL
+UAGTX4gmmJrCHkkl8+xNjQCmcSWVE1md81iy0u8kt0s1VLeVr
+Q5JNmW8aTkEd0WxIXg0YO2925C0OyGlkKSZb19oqVw0m0DdsVjB8nEzNJNCahI/PvvnQK6ROCSnLQGaIASs9ng31Bls/JbrW8AJuDnJ
+8sV3sAAAAAElFTkSuQmCC

85

6. logos & icons
inline images are just GREAT
‣ new way to think about images
‣ new way to transmit & store images

‣ they are just plain text

‣ can be used on HTML or CSS

86

6. logos & icons
you can create them on the ﬂy with html5

‣ (check compatibility)
‣ use with html5 canvas drawing API

‣ use toDataURL() method from canvas

‣ voilá!

‣ even useful for converting image real ﬁles

into data uri client-side

87

6. other tips
‣ 450 emoji characters on iOS



http://pukupi.com/post/1964

88

6. other tips
‣ CSS3 multiple backgrounds
‣ CSS3 transformations

‣ CSS3 shadows, eﬀects

‣ CSS3 rounded borders, border image

‣ SVG, inline SVG and canvas

‣ if not compatible, accept it!

89

7. be ready asap

90

7. be ready asap

‣ defer most of your code after onload
‣ defer content

‣ don’t even parse frameworks

‣ did you say frameworks?

‣ remove address bar onload

91

7. defer, defer

‣ great support for deferring content & code
‣ if you have lot of content, use your own

loading
‣ use a server-side detection

92

7. don’t parse yet!

‣ parsing javascript takes time
‣ from 1ms to 100ms per 1Kb

‣ delays onload

93

7. don’t parse yet!
‣ divide your code into modules by needs
‣ comment all your code

<script>/* ... */</script>
‣ when needed, remove comments and eval
eval(stripOutCommentBlock(script.innerHTML));

‣ created by Gmail Mobile team and Charles Jolley

94

7. forget about frameworks
‣ ok, not always
‣ think it 100 times

‣ do you really need it?

‣ don’t use jQuery just for $(“”)

‣ jQuery can take up to 8s to parse on

some phones

95

‣ W3C Selectors API w3.org/TR/selectors-api
document.querySelector!
‣ create your own mini-library

‣ use mini-frameworks: XUI, zepto.js, microjs

‣ jQuery Mobile is not a mini-framework! it’s a

ui framework.
‣ if it’s not compatible, do you really need it?

96

our sample uses three uncompressed
javascript ﬁles:

framework: 60Kb
motionpack: 3Kb
calendar: 7Kb

97

7. remove address bar
‣ hack for some browsers
‣ scroll to 0, 1 after onload

‣ you need to have a min-height container of

the available height - device library
‣ window.scrollTo(0, 1);

‣ the user will be happy to start using your

web inmediatly
98

8. application cache

99

8. application cache
‣ Defines an offline installation package
<html manifest=‘offline.appcache’>
‣ Next time, it will be available inmediately

(even without connection)
‣ Update process

‣ Make the HTML and some basic resources

cached and manage your own cache with
localStorage
100

9. oﬄine storage

101

9. oﬄine storage
‣ localStorage and SQL storage
‣ localStorage easier and faster

‣ store strings (2x faster than objects)

‣ what to store?
‣ images
‣ code
‣ styles
‣ html elements
‣ data

102

9. oﬄine storage
‣ we can mix it with cookies
‣ resource storage library

‣ we store some resources client-side

‣ next time, we don’t send them

‣ on mobile, up to 2Mb per domain is safe

103

9. oﬄine storage
ﬁrst load

request (no cookies)

response
browser full html
server
inline images
css styles
stores resources in javascript code
localStorage and create
cookie

104

9. oﬄine storage
second load

request (with cookies)

response
browser server
basic html
basic javascript
updated resources

105

10. internal is better

106

10. internal is better
‣ code and resources used only once must be
inlined in the HTML
‣ no external css, no external javascript, no

external images
‣ if you use it on diﬀerent pages, then:

‣ external

‣ localStorage

107

11. touch, no click

108

11. touch, no click

‣ on touch devices, click delays between 300
and 500 ms before executing.
‣ Too much!

‣ Use touch events: ontouchend

‣ We can use progressive enhancement and

change links behavior

109

12. ajax please!

110

12. ajax please!

‣ progressive enhancement
‣ server-side framework

‣ it’s seo-friendly too!

‣ most devices support XHR

‣ why don’t use it!

‣ it’s mobile-friendly!

111

12. ajax please!

‣ onhashchange for history management
‣ request only what needs to be changed

‣ html > json > xml

‣ with json, JSON.parse is up to 2x faster than

eval

112

12. ajax please!

server

113

13. upgrading ajax

114

13. more than ajax
html5 server-sent events
http://dev.w3.org/html5/eventsource/

var source = new EventSource('updates.cgi');
source.onmessage = function (event) {
alert(event.data);
};

115

13. more than ajax
html5 web sockets
http://dev.w3.org/html5/websockets/

116

14. context & user decision

117

forget about
DECIDING FOR THE USER

118

‣ now, you decide the user experience based
on the device or based on... I don’t know.
‣ if you have an iPhone or Android, this is the

experience you want.
‣ if you have a feature phone, then this is

what you need

119

‣provide diﬀerent experiences
‣ YouTube resolution idea

‣ SD/HD version

‣ decide best version based

on context
‣ let the user change the decision

121

14. detecting connection
W3C Network Information API
‣ it’s client-side

‣ works on Android 2.2+

‣ navigator.connection.type

‣ can be WIFI, CELL_2G, CELL_3G, others

if (navigator.connection.type==navigator.connection.WIFI) {
}

123

BlackBerry client-side API
‣ works on BB smartphones 4.0+

‣ blackberry.network==’Wi-Fi’

124

Server-side detection
‣ Symbian header x-nokia-musicshop-bearer

‣ BlackBerry header via

‣ Trying to detect if it’s a carrier network

‣ Massive’s Operator Identiﬁcation Platform

(www.werwar.com)

125

iOS detection
‣ No oﬃcial way (there are some hacks)

‣ If you are an iOS developer, go to

bugrequest.apple.com and request this
feature

126

14. detecting pixel density
don’t download pixels that can not be seen
‣ iPhone 3 vs iPhone 4

‣ android

‣ on WebKit: window.devicePixelRatio

‣ can be used also in css3 media queries

‣ remember: let the user decide!

127

14. html5 audio & video
The standard only cares about codecs/formats
‣ You should care about connectivity

‣ iOS: Quicktime Reference Movies
‣ A reference movie decides diﬀerent sources

regarding the current bandwidth
‣ Doesn’t update dynamically

‣ Search for free MakeRefMovie tool
128

15. animations & timers

129

Browsers animations or nothing
‣ ok, it was a bit extreme...

‣ don’t use javascript based animation

‣ use css3 transitions & animations

‣ they can be hardware-accelerated

‣ move & scale using css3 transforms

130

Timers
‣ be careful

‣ slugglish UI

‣ >= 1s frequency

‣ reduce DOM changes

‣ change the DOM once per cycle

131

html5 web workers
‣ starting to appear on mobile

‣ allow diﬀerent threads on javascript

‣ we can do things without aﬀecting ui

rendering (too much)
‣ use it if they are available!

132

16. mobilize
‣ speed is also about total time to do an action

‣ reduce input, use html5 input types
‣ use context and html5 to help the user reduce

times
‣ use w3c geolocation api

‣ use localStorage for history and analytics

134

use good practices

136

test, test & test

137

you can reach a good experience

138

you can reach a good experience
thank you!

ﬁrt.mobi
twitter: @ﬁrt
www.mobilexweb.com
!"#$%&'()*&+,)*&''-"."$/012+$+(34'$)
139

Mobile Web & HTML5 Performance Optimization

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Mobile Web & HTML5 Performance Optimization (20)

More from Maximiliano Firtman (20)

Recently uploaded (20)

Mobile Web & HTML5 Performance Optimization