KEMBAR78
Mobile Web & HTML5 Performance Optimization | PDF
Maximiliano Firtman, profile picture
Uploaded byMaximiliano Firtman
PDF, PPTX78,462 views

Mobile Web & HTML5 Performance Optimization

The document discusses mobile web performance optimization, focusing on the challenges of slow mobile networks and browsers. It emphasizes the importance of understanding mobile-specific design, server-side detection, and the benefits of HTML5 compatibility. Additionally, it provides practical tips for optimizing mobile web experiences to improve speed and user experience.

Download as PDF, PPTX
1 / 139
2 / 139
3 / 139
4 / 139
5 / 139
6 / 139
7 / 139
8 / 139
9 / 139
10 / 139
11 / 139
12 / 139
13 / 139
14 / 139
15 / 139
16 / 139
17 / 139
18 / 139
19 / 139
20 / 139
21 / 139
22 / 139
23 / 139
24 / 139
25 / 139
26 / 139
27 / 139
28 / 139
29 / 139
30 / 139
31 / 139
32 / 139
33 / 139
34 / 139
35 / 139
36 / 139
37 / 139
38 / 139
39 / 139
40 / 139
41 / 139
42 / 139
43 / 139
44 / 139
45 / 139
46 / 139
47 / 139
48 / 139
49 / 139
50 / 139
51 / 139
52 / 139
53 / 139
54 / 139
55 / 139
56 / 139
57 / 139
58 / 139
59 / 139
60 / 139
61 / 139
62 / 139
63 / 139
64 / 139
65 / 139
66 / 139
67 / 139
68 / 139
69 / 139
70 / 139
71 / 139
72 / 139
73 / 139
74 / 139
75 / 139
76 / 139
77 / 139
78 / 139
79 / 139
80 / 139
81 / 139
82 / 139
83 / 139
84 / 139
85 / 139
86 / 139
87 / 139
88 / 139
89 / 139
90 / 139
91 / 139
92 / 139
93 / 139
94 / 139
95 / 139
96 / 139
97 / 139
98 / 139
99 / 139
100 / 139
101 / 139
102 / 139
103 / 139
104 / 139
105 / 139
106 / 139
107 / 139
108 / 139
109 / 139
110 / 139
111 / 139
112 / 139
113 / 139
114 / 139
115 / 139
116 / 139
117 / 139
118 / 139
119 / 139
120 / 139
121 / 139
122 / 139
123 / 139
124 / 139
125 / 139
126 / 139
127 / 139
128 / 139
129 / 139
130 / 139
131 / 139
132 / 139
133 / 139
134 / 139
135 / 139
136 / 139
137 / 139
138 / 139
139 / 139
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 @firt 2
where? buenos aires ~ argentina true lies tango scene patagonia soccer tango 3
books Image from my house 4
5
good news! today ~ last day save 50% oreilly.com 6
agenda 7
agenda ‣ a little overview of mobile web ‣ measuring and debugging ‣ mobile html5 ‣ optimization areas ‣ tango dance 8
facts 9
you are guilty! 10
users hate you 11
why? 12
13
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 17
differences ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different behaviours ‣ different possible networks 18
differences 19
mobile browsers 20
differences 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 ‣ Skyfire ‣ BOLT 25
they are on tablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini 26
and with different versions... 27
and there’s more! 28
pseudo-browsers 29
pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different 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 35
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
and the others? 39
emulators ‣ different types ‣ good for first 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 44
html5 if the device is not html5-compatible ‣ it’s fine... ‣ 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
let’s start 51
1. be mobile 52
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
1. be mobile 54
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 difficult: only one redirect and cached 57
3. be simple 58
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 definition (!?) • 80% has multiple class definition 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" 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/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></ 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="3"><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/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></ 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="4"><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/imps.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Mileage Plus&#174; 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 notifications</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 ">&#169;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
4. known wpo techniques • 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
4. known wpo techniques <style type="text/css" media="screen"> @import "iphone/iphone.css"; </style> 72
4. known wpo techniques 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 76
6. images ‣ only semantic images ‣ no effects, 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=file 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 ‣ first, 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 fly with html5 ‣ (check compatibility) ‣ use with html5 canvas drawing API ‣ use toDataURL() method from canvas ‣ voilá! ‣ even useful for converting image real files into data uri client-side 87
6. other tips ‣ 450 emoji characters on iOS &#xe333; http://pukupi.com/post/1964 88
6. other tips ‣ CSS3 multiple backgrounds ‣ CSS3 transformations ‣ CSS3 shadows, effects ‣ 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
7. forget about frameworks ‣ 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
7. forget about frameworks our sample uses three uncompressed javascript files: 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. offline storage 101
9. offline 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. offline 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. offline storage first load request (no cookies) response browser full html server inline images css styles stores resources in javascript code localStorage and create cookie 104
9. offline 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 different 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
14. context & user decision ‣ 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
WRONG 120
14. context & user decision ‣provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on context ‣ let the user change the decision 121
how? 122
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
14. detecting connection BlackBerry client-side API ‣ works on BB smartphones 4.0+ ‣ blackberry.network==’Wi-Fi’ 124
14. detecting connection Server-side detection ‣ Symbian header x-nokia-musicshop-bearer ‣ BlackBerry header via ‣ Trying to detect if it’s a carrier network ‣ Massive’s Operator Identification Platform (www.werwar.com) 125
14. detecting connection iOS detection ‣ No official 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 different sources regarding the current bandwidth ‣ Doesn’t update dynamically ‣ Search for free MakeRefMovie tool 128
15. animations & timers 129
15. animations & timers 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
15. animations & timers Timers ‣ be careful ‣ slugglish UI ‣ >= 1s frequency ‣ reduce DOM changes ‣ change the DOM once per cycle 131
15. animations & timers html5 web workers ‣ starting to appear on mobile ‣ allow different threads on javascript ‣ we can do things without affecting ui rendering (too much) ‣ use it if they are available! 132
16. mobilize 133
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
135
use good practices 136
test, test & test 137
you can reach a good experience 138
you can reach a good experience thank you! firt.mobi twitter: @firt www.mobilexweb.com !"#$%&'()*&+,)*&''-"."$/012+$+(34'$) 139

More Related Content

PPTX
Mobile applications for SharePoint using HTML5
byChristian Heindel
 
PDF
Mobile web development techniques (and Opera's developer tools)
byAndreas Bovens
 
PDF
Dreamweaver CS6, jQuery, PhoneGap, mobile design
byDee Sadler
 
PDF
HTML5 and the dawn of rich mobile web applications
byJames Pearce
 
PDF
State of jQuery '09
byjeresig
 
PPT
Augmented Reality (AR) - The Future of Mobile Applications?
byCarin Campanario
 
PDF
Web Standards
byHelior Colorado
 
PPT
Mobile Information Architecture
byChristian Crumlish
 
Mobile applications for SharePoint using HTML5
byChristian Heindel
 
Mobile web development techniques (and Opera's developer tools)
byAndreas Bovens
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
byDee Sadler
 
HTML5 and the dawn of rich mobile web applications
byJames Pearce
 
State of jQuery '09
byjeresig
 
Augmented Reality (AR) - The Future of Mobile Applications?
byCarin Campanario
 
Web Standards
byHelior Colorado
 
Mobile Information Architecture
byChristian Crumlish
 

What's hot

PDF
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
byAaron Gustafson
 
PDF
Mobile Web Speed Bumps
byNicholas Zakas
 
PDF
Building Mobile Applications with Ionic
byMorris Singer
 
PPTX
Edge of the Web
byTodd Anglin
 
PPTX
HTML5: An Overview
byNagendra Um
 
PDF
HTML5 and Beyond
bydynamis
 
PDF
Usability in the GeoWeb
byDave Bouwman
 
PPTX
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
bySt. Petersburg College
 
PDF
HTML5 Introduction
bydynamis
 
PDF
Web Standards: Fueling Innovation [Web Design World Boston '08]
byAaron Gustafson
 
PDF
State of jQuery June 2013 - Portland
bydmethvin
 
PDF
HTML5--The 30,000' View (A fast-paced overview of HTML5)
byPeter Lubbers
 
PDF
Taiwan Web Standards Talk 2011
byZi Bin Cheah
 
PPT
Optimizing Sites for Mobile Devices
byjameswillweb
 
PDF
RESS: An Evolution of Responsive Web Design
byDave Olsen
 
PDF
Building Desktop RIAs with PHP, HTML & Javascript in AIR
byfunkatron
 
PPTX
Building jQuery Mobile Web Apps
byOperation Mobile
 
PDF
Introduction to html 5
byNir Elbaz
 
PPTX
Introduction to HTML5 & CSS3
byPradeep Varadaraja Banavara
 
PPTX
10 things you can do to speed up your web app today 2016
byChris Love
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
byAaron Gustafson
 
Mobile Web Speed Bumps
byNicholas Zakas
 
Building Mobile Applications with Ionic
byMorris Singer
 
Edge of the Web
byTodd Anglin
 
HTML5: An Overview
byNagendra Um
 
HTML5 and Beyond
bydynamis
 
Usability in the GeoWeb
byDave Bouwman
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
bySt. Petersburg College
 
HTML5 Introduction
bydynamis
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
byAaron Gustafson
 
State of jQuery June 2013 - Portland
bydmethvin
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
byPeter Lubbers
 
Taiwan Web Standards Talk 2011
byZi Bin Cheah
 
Optimizing Sites for Mobile Devices
byjameswillweb
 
RESS: An Evolution of Responsive Web Design
byDave Olsen
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
byfunkatron
 
Building jQuery Mobile Web Apps
byOperation Mobile
 
Introduction to html 5
byNir Elbaz
 
Introduction to HTML5 & CSS3
byPradeep Varadaraja Banavara
 
10 things you can do to speed up your web app today 2016
byChris Love
 

Viewers also liked

PDF
CSS3 Media Queries
byRuss Weakley
 
PDF
2011 Mobile & Web technologies
byJungHyuk Kwon
 
KEY
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
bySencha
 
PPTX
Estetica tenologia, gastronomia y cirugia
byalfredo estrada
 
DOC
Jornadas sobre Planificación Hidrológica 2000
byNueva Cultura del Agua
 
PPT
Cooler Bags Business Xinxinyu(Xiamen) Industrial Co., Ltd.
byzrl07
 
PPT
Dilataciones
byguest1aec62d
 
PPT
TRANSPARENCY "THE FULL STORY"
byTim Kitchin
 
PDF
MPAK_Electric_Bus_Brochure_Small
byjason lanham
 
PPTX
Proyecto smart shopping
byDaniel Cuesta Valero
 
PPTX
TITUS @ Security Summit Roma 2011 - Classificazione, Compliance, DLP
byClever Consulting
 
DOCX
MiSys Documentation
byJoseph Santiago A.B.D.
 
PDF
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
byApigee | Google Cloud
 
PDF
Nueva vida vol 1
byMinisterio Infantil Arcoiris
 
PDF
Mecanismo de resistencia gram negativos
byNataly Vanesa
 
PPTX
Pantera negra
byCarmeCL
 
PPTX
Mision, vision
byGustavo Duarte
 
PPTX
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
byRaj Lal
 
PPTX
Teoría del sí mismo Carl Rogers
byfundación CIMA
 
PDF
Rethinking the Mobile Web by Yiibu
byBryan Rieger
 
CSS3 Media Queries
byRuss Weakley
 
2011 Mobile & Web technologies
byJungHyuk Kwon
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
bySencha
 
Estetica tenologia, gastronomia y cirugia
byalfredo estrada
 
Jornadas sobre Planificación Hidrológica 2000
byNueva Cultura del Agua
 
Cooler Bags Business Xinxinyu(Xiamen) Industrial Co., Ltd.
byzrl07
 
Dilataciones
byguest1aec62d
 
TRANSPARENCY "THE FULL STORY"
byTim Kitchin
 
MPAK_Electric_Bus_Brochure_Small
byjason lanham
 
Proyecto smart shopping
byDaniel Cuesta Valero
 
TITUS @ Security Summit Roma 2011 - Classificazione, Compliance, DLP
byClever Consulting
 
MiSys Documentation
byJoseph Santiago A.B.D.
 
CEO Keynote I Love APIs 2015: Chet Kapoor Apigee
byApigee | Google Cloud
 
Nueva vida vol 1
byMinisterio Infantil Arcoiris
 
Mecanismo de resistencia gram negativos
byNataly Vanesa
 
Pantera negra
byCarmeCL
 
Mision, vision
byGustavo Duarte
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
byRaj Lal
 
Teoría del sí mismo Carl Rogers
byfundación CIMA
 
Rethinking the Mobile Web by Yiibu
byBryan Rieger
 

Similar to Mobile Web & HTML5 Performance Optimization

PDF
Drupalcamp New York 2009
byTom Deryckere
 
PDF
Mobile Web Best Practices
byJames D Bloom
 
PDF
Siruna session at Drupalcon Paris 2009
byTom Deryckere
 
PDF
Building Mobile Websites with Joomla
byTom Deryckere
 
PDF
Developing for Mobile Web
byBarbara Bermes
 
PPTX
Mobile Mantras
byhannerlib
 
PPTX
Mobile Mantras: XD Best Practices for Mobile Development
byRob Fitzgibbon
 
KEY
Library Mobile Web Design: Tips, Tricks and Resources
byRachel Vacek
 
PDF
Best practices for delivering quality web experiences
byBen Mantooth
 
PDF
Performance Optimization for Mobile Web | Fresh Tilled Soil
byFresh Tilled Soil
 
PDF
Mobile web or native app
byMike Takahashi
 
PDF
HTML5 for Mobile - When and Why
byDMI
 
PDF
Leverage web technology in a mobile world
byDieter Blomme
 
PDF
Mobile for PHP developers
byIvo Jansch
 
KEY
Jonathan snook - fake-it
byStarTech Conference
 
PDF
Mobile Web Development with HTML5
byRoy Clarkson
 
PDF
Mobile Web High Performance
byMaximiliano Firtman
 
PPTX
How To Be an HTML5 Mobile Cloud Champion
byChris Love
 
PDF
Don't touch the mobile parts
byFrancesco Fullone
 
PDF
Considerations for Your Mobile Library
byRachel Vacek
 
Drupalcamp New York 2009
byTom Deryckere
 
Mobile Web Best Practices
byJames D Bloom
 
Siruna session at Drupalcon Paris 2009
byTom Deryckere
 
Building Mobile Websites with Joomla
byTom Deryckere
 
Developing for Mobile Web
byBarbara Bermes
 
Mobile Mantras
byhannerlib
 
Mobile Mantras: XD Best Practices for Mobile Development
byRob Fitzgibbon
 
Library Mobile Web Design: Tips, Tricks and Resources
byRachel Vacek
 
Best practices for delivering quality web experiences
byBen Mantooth
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
byFresh Tilled Soil
 
Mobile web or native app
byMike Takahashi
 
HTML5 for Mobile - When and Why
byDMI
 
Leverage web technology in a mobile world
byDieter Blomme
 
Mobile for PHP developers
byIvo Jansch
 
Jonathan snook - fake-it
byStarTech Conference
 
Mobile Web Development with HTML5
byRoy Clarkson
 
Mobile Web High Performance
byMaximiliano Firtman
 
How To Be an HTML5 Mobile Cloud Champion
byChris Love
 
Don't touch the mobile parts
byFrancesco Fullone
 
Considerations for Your Mobile Library
byRachel Vacek
 

More from Maximiliano Firtman

PDF
Unlocking Generative AI in your Web Apps
byMaximiliano Firtman
 
PDF
ChatGPT and AI for Web Developers
byMaximiliano Firtman
 
PDF
PWA Cheat Sheet 2023
byMaximiliano Firtman
 
PDF
Hacking Web Performance en Español - JSConf México 2020
byMaximiliano Firtman
 
PDF
The modern PWA Cheat Sheet
byMaximiliano Firtman
 
PDF
Hacking Web Performance 2019
byMaximiliano Firtman
 
PDF
Progressive Web Apps Keynote
byMaximiliano Firtman
 
PDF
Hacking Web Performance
byMaximiliano Firtman
 
PDF
Uncovering Secrets of Progressive Web Apps
byMaximiliano Firtman
 
PDF
Hacking Web Performance
byMaximiliano Firtman
 
PDF
Hacking Web Performance @ ForwardJS 2017
byMaximiliano Firtman
 
PDF
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
byMaximiliano Firtman
 
PDF
Progressive Web Apps (español - spanish)
byMaximiliano Firtman
 
PDF
High Performance Web - Full Stack Toronto
byMaximiliano Firtman
 
PDF
Responsive Images and Performance
byMaximiliano Firtman
 
PDF
The Physical World meets the Web
byMaximiliano Firtman
 
PDF
Extreme Web Performance for Mobile Devices
byMaximiliano Firtman
 
PDF
Extreme Web Performance for Mobile Device Fluent 2015
byMaximiliano Firtman
 
PDF
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
byMaximiliano Firtman
 
PDF
Extreme Web Performance for Mobile Devices - Velocity NY
byMaximiliano Firtman
 
Unlocking Generative AI in your Web Apps
byMaximiliano Firtman
 
ChatGPT and AI for Web Developers
byMaximiliano Firtman
 
PWA Cheat Sheet 2023
byMaximiliano Firtman
 
Hacking Web Performance en Español - JSConf México 2020
byMaximiliano Firtman
 
The modern PWA Cheat Sheet
byMaximiliano Firtman
 
Hacking Web Performance 2019
byMaximiliano Firtman
 
Progressive Web Apps Keynote
byMaximiliano Firtman
 
Hacking Web Performance
byMaximiliano Firtman
 
Uncovering Secrets of Progressive Web Apps
byMaximiliano Firtman
 
Hacking Web Performance
byMaximiliano Firtman
 
Hacking Web Performance @ ForwardJS 2017
byMaximiliano Firtman
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
byMaximiliano Firtman
 
Progressive Web Apps (español - spanish)
byMaximiliano Firtman
 
High Performance Web - Full Stack Toronto
byMaximiliano Firtman
 
Responsive Images and Performance
byMaximiliano Firtman
 
The Physical World meets the Web
byMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
byMaximiliano Firtman
 
Extreme Web Performance for Mobile Device Fluent 2015
byMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
byMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity NY
byMaximiliano Firtman
 

Recently uploaded

PDF
Using Copilot with Microsoft Office Apps
byDeb Walther
 
PDF
The invisible key: Securing the new attack vector of OAuth tokens
byGianluca Varisco
 
PDF
UnityNet Digital Sovereignty Checklist 2025-10-13
byLHelferty
 
PDF
From Data Chaos to Copilot Confidence: A Step-by-Step Microsoft 365 Copilot R...
byNikki Chapple
 
PDF
From Bots to Brains: Getting Started with Agentic Automation in UiPath
byUiPathCommunity
 
PDF
Session 4 - Specialized AI Associate Series: UiPath Document Understanding O...
byDianaGray10
 
PPTX
Top Trends in Kubernetes Security: TalosCon 2025
byCheryl Hung
 
PDF
Agentic AI Guide for Enterprise Use-cases
byDebmalya Biswas
 
PDF
A fool with a tool is still a fool - Plone Conference 2025
byAndreas Jung
 
PDF
AGV PROTOCOL BRAND KIT COMPLETE VIEW.pdf
byfagbolade
 
PDF
UiPath DevConnect 2025: Introduction to Agentic Automation
byDianaGray10
 
PPTX
BioVault.net ADW 2025 CODATA: SyftBox: a General Purpose Solution for Data Vi...
byMadhava Jay
 
PDF
What's New? ThousandEyes Features and Highlights: October 2025
byThousandEyes
 
PDF
Expert Python App Development Company for Modern Enterprises
bySynapseIndia
 
PDF
Unlocking Full-Stack Observability for AIOps: A Precisely Ironstream for Big ...
byPrecisely
 
PPTX
WUG-DMV: Workfront Wizards: Tips & Tricks Exchange (Sept 2025)
byWUG-DC MARYLAND VIRGINIA
 
PDF
A 4-Terminal Approach to Validating Charge Conservation in MOSFET Compact Models
byEalwan Lee
 
PDF
TrustArc Webinar - Migration to TrustArc: What Your Journey Will Look Like
byTrustArc
 
PDF
Dragino商品カタログ 2025.7 LoRaWAN・NB-IoT・LTE-M(LTE Cat.M1)対応センサーリスト
byCRI Japan, Inc.
 
PDF
The Journey Is The Reward - Apple Maps Travel Companion
byJohn Andrews
 
Using Copilot with Microsoft Office Apps
byDeb Walther
 
The invisible key: Securing the new attack vector of OAuth tokens
byGianluca Varisco
 
UnityNet Digital Sovereignty Checklist 2025-10-13
byLHelferty
 
From Data Chaos to Copilot Confidence: A Step-by-Step Microsoft 365 Copilot R...
byNikki Chapple
 
From Bots to Brains: Getting Started with Agentic Automation in UiPath
byUiPathCommunity
 
Session 4 - Specialized AI Associate Series: UiPath Document Understanding O...
byDianaGray10
 
Top Trends in Kubernetes Security: TalosCon 2025
byCheryl Hung
 
Agentic AI Guide for Enterprise Use-cases
byDebmalya Biswas
 
A fool with a tool is still a fool - Plone Conference 2025
byAndreas Jung
 
AGV PROTOCOL BRAND KIT COMPLETE VIEW.pdf
byfagbolade
 
UiPath DevConnect 2025: Introduction to Agentic Automation
byDianaGray10
 
BioVault.net ADW 2025 CODATA: SyftBox: a General Purpose Solution for Data Vi...
byMadhava Jay
 
What's New? ThousandEyes Features and Highlights: October 2025
byThousandEyes
 
Expert Python App Development Company for Modern Enterprises
bySynapseIndia
 
Unlocking Full-Stack Observability for AIOps: A Precisely Ironstream for Big ...
byPrecisely
 
WUG-DMV: Workfront Wizards: Tips & Tricks Exchange (Sept 2025)
byWUG-DC MARYLAND VIRGINIA
 
A 4-Terminal Approach to Validating Charge Conservation in MOSFET Compact Models
byEalwan Lee
 
TrustArc Webinar - Migration to TrustArc: What Your Journey Will Look Like
byTrustArc
 
Dragino商品カタログ 2025.7 LoRaWAN・NB-IoT・LTE-M(LTE Cat.M1)対応センサーリスト
byCRI Japan, Inc.
 
The Journey Is The Reward - Apple Maps Travel Companion
byJohn Andrews
 

Mobile Web & HTML5 Performance Optimization

  • 1.
    mobile web & html5 performance optimization June, 14, 2011 max firtman Santa Clara, CA @firt firt.mobi 1
  • 2.
    who am I? mobile+webdeveloper mobilexweb.com blog wpo passionate @firt 2
  • 3.
    where? buenos aires ~argentina true lies tango scene patagonia soccer tango 3
  • 4.
    books Image from my house 4
  • 5.
  • 6.
    good news! today ~last day save 50% oreilly.com 6
  • 7.
  • 8.
    agenda ‣ a little overview of mobile web ‣ measuring and debugging ‣ mobile html5 ‣ optimization areas ‣ tango dance 8
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
    mobile web is slow Picture from Simon Howden freedigitalphotos.net! 14
  • 15.
    mobile web isslow because... we are doing it wrong 15
  • 16.
    !"#$%&'() it’s complicated 16
  • 17.
  • 18.
    differences ‣ slower networks ‣ higher latency ‣ slower hardware ‣ different browsing experience ‣ different context ‣ different behaviours ‣ different possible networks 18
  • 19.
  • 20.
  • 21.
    differences There are browsers supporting 1, 2, 4, 6 parallel downloads 21
  • 22.
    mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxied ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools 22
  • 23.
    MOBILE WEB USAGE! !"#$%&'()*+, !"#$%&'()*+, !(-.#/,0'()*+, !(-.#/,0'()*+, 1*#%2$*, 1*#%2$*,0'()*+, 0'()*+, MARKET SHARE! 23
  • 24.
    a quick, dirtylist ‣ Safari on iOS ‣ Android Browser ‣ Symbian Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Bada Browser ‣ Firefox ‣ Internet Explorer 24
  • 25.
    a quick, dirtylist (cont.) ‣ NetFront ‣ Myriad ‣ Nokia Browser (Ovi) ‣ Phantom ‣ microB ‣ Opera Mobile ‣ Opera Mini ‣ Skyfire ‣ BOLT 25
  • 26.
    they are ontablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini 26
  • 27.
    and with differentversions... 27
  • 28.
  • 29.
  • 30.
    pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! 30
  • 31.
    wait we can do it! 31
  • 32.
    we need toforget and learn 32
  • 33.
    forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power 33
  • 34.
    learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design ‣ best experience for each context ‣ the top-model approach 34
  • 35.
  • 36.
  • 37.
  • 38.
    two browsers with remote tools Opera Mobile with DragonFly BlackBerry Browser for PlayBook, for Smartphones 7.0 38
  • 39.
  • 40.
    emulators ‣ different types ‣ good for first testing ‣ free, +150 ‣ www.mobilexweb.com/emulators ‣ proxy: Charles Proxy, Fiddler 40
  • 41.
    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
  • 42.
    remote labs ‣ deviceanywhere.com ‣ perfectomobile.com ‣ remote device access (nokia) - free ‣ lab.dev (samsung) - free 42
  • 43.
    2g, 3g, 4g ‣Remember to test it ‣ Charles Proxy helps you with throttling 43
  • 44.
  • 45.
    html5 if the deviceis not html5-compatible ‣ it’s fine... ‣ it will work without those enhancements ‣ even html5-compatible devices don’t have the same compatibility level ‣ don’t be fanatic, be multiplatform 45
  • 46.
    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
  • 47.
    real world sample (nothing personal) united.com 47
  • 48.
    original iPhone resultsfrom blaze.io/mobile 15-20 seconds to load (over WiFi!) total 602Kb 48
  • 49.
    original Android resultsfrom blaze.io/mobile 4-8 seconds to load (over WiFi!) total 442Kb 49
  • 50.
    400 / 600Kb?Where are they? 50
  • 51.
  • 52.
  • 53.
    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
  • 54.
  • 55.
  • 56.
    2. don’t redirect united.com > www.united.com > mobile.united.com 56
  • 57.
    2. don’t redirect ‣ deliver the mobile site directly ‣ it’s seo-compatible ‣ if too difficult: only one redirect and cached 57
  • 58.
  • 59.
    3. be simple ‣ simple, semantic DOM ‣ complexity == wrong ‣ remember, it’s mobile ‣ use html5 rules and tags 59
  • 60.
    3. be simple </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 60
  • 61.
    3. be simple <divclass="ktable kbasemargin kwt100" konywidgettype = "Ksegment" > 61
  • 62.
  • 63.
    3. be simple <a konywidgettype= "Ksegment" href="#" eventname="segNewHomeevent_" rowid="0"> 63
  • 64.
    3. be simple Current XHTML: • 18Kb • 180 DOM elements • 145 has class definition (!?) • 80% has multiple class definition 64
  • 65.
    3. be simple Current CSS: • 137Kb! • 6700 lines • 681 selectors 65
  • 66.
    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" 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/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></ 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="3"><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/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></ 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="4"><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/imps.png" alt=""konywidgettype="Ksegment"/></div><div class="middleleftalign kwt76 kcell" konywidgettype="Ksegment"><label konywidgettype="Ksegment" class="lblMenu">Mileage Plus&#174; 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 notifications</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 ">&#169;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
  • 67.
    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
  • 68.
    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
  • 69.
    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
  • 70.
    4. known wpotechniques 70
  • 71.
    4. known wpotechniques • 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
  • 72.
    4. known wpotechniques <style type="text/css" media="screen"> @import "iphone/iphone.css"; </style> 72
  • 73.
    4. known wpotechniques check desktop-like wpo suggestions Yslow! Page Speed 73
  • 74.
    5. resource !=download 74
  • 75.
    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
  • 76.
  • 77.
    6. images ‣ only semantic images ‣ no effects, 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=file 77
  • 78.
    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
  • 79.
    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
  • 80.
    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
  • 81.
    6. images CSS3 gradientes http://www.colorzilla.com/gradient-editor/ 81
  • 82.
    6. images for the cell background ...a CSS3 gradient too 82
  • 83.
    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
  • 84.
    6. logos &icons We can use inline images (aka data URI) ‣ very good support on mobile ‣ use a device library to detect ‣ first, compress! ‣ lot of free online services ‣ just convert bytes into base64 ‣ easy to convert from server-side base64_encode() in PHP 84
  • 85.
    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
  • 86.
    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
  • 87.
    6. logos &icons you can create them on the fly with html5 ‣ (check compatibility) ‣ use with html5 canvas drawing API ‣ use toDataURL() method from canvas ‣ voilá! ‣ even useful for converting image real files into data uri client-side 87
  • 88.
    6. other tips ‣ 450 emoji characters on iOS &#xe333; http://pukupi.com/post/1964 88
  • 89.
    6. other tips ‣ CSS3 multiple backgrounds ‣ CSS3 transformations ‣ CSS3 shadows, effects ‣ CSS3 rounded borders, border image ‣ SVG, inline SVG and canvas ‣ if not compatible, accept it! 89
  • 90.
    7. be readyasap 90
  • 91.
    7. be readyasap ‣ defer most of your code after onload ‣ defer content ‣ don’t even parse frameworks ‣ did you say frameworks? ‣ remove address bar onload 91
  • 92.
    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
  • 93.
    7. don’t parseyet! ‣ parsing javascript takes time ‣ from 1ms to 100ms per 1Kb ‣ delays onload 93
  • 94.
    7. don’t parseyet! ‣ 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
  • 95.
    7. forget aboutframeworks ‣ 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
  • 96.
    7. forget aboutframeworks ‣ 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
  • 97.
    7. forget aboutframeworks our sample uses three uncompressed javascript files: framework: 60Kb motionpack: 3Kb calendar: 7Kb 97
  • 98.
    7. remove addressbar ‣ 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
  • 99.
  • 100.
    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
  • 101.
  • 102.
    9. offline 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
  • 103.
    9. offline 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
  • 104.
    9. offline storage first load request (no cookies) response browser full html server inline images css styles stores resources in javascript code localStorage and create cookie 104
  • 105.
    9. offline storage second load request (with cookies) response browser server basic html basic javascript updated resources 105
  • 106.
    10. internal isbetter 106
  • 107.
    10. internal isbetter ‣ 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 different pages, then: ‣ external ‣ localStorage 107
  • 108.
    11. touch, noclick 108
  • 109.
    11. touch, noclick ‣ 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
  • 110.
  • 111.
    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
  • 112.
    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
  • 113.
  • 114.
  • 115.
    13. more thanajax html5 server-sent events http://dev.w3.org/html5/eventsource/ var source = new EventSource('updates.cgi'); source.onmessage = function (event) { alert(event.data); }; 115
  • 116.
    13. more thanajax html5 web sockets http://dev.w3.org/html5/websockets/ 116
  • 117.
    14. context &user decision 117
  • 118.
  • 119.
    14. context &user decision ‣ 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
  • 120.
    WRONG 120
  • 121.
    14. context &user decision ‣provide different experiences ‣ YouTube resolution idea ‣ SD/HD version ‣ decide best version based on context ‣ let the user change the decision 121
  • 122.
    how? 122
  • 123.
    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
  • 124.
    14. detecting connection BlackBerry client-side API ‣ works on BB smartphones 4.0+ ‣ blackberry.network==’Wi-Fi’ 124
  • 125.
    14. detecting connection Server-side detection ‣ Symbian header x-nokia-musicshop-bearer ‣ BlackBerry header via ‣ Trying to detect if it’s a carrier network ‣ Massive’s Operator Identification Platform (www.werwar.com) 125
  • 126.
    14. detecting connection iOS detection ‣ No official way (there are some hacks) ‣ If you are an iOS developer, go to bugrequest.apple.com and request this feature 126
  • 127.
    14. detecting pixeldensity 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
  • 128.
    14. html5 audio& video The standard only cares about codecs/formats ‣ You should care about connectivity ‣ iOS: Quicktime Reference Movies ‣ A reference movie decides different sources regarding the current bandwidth ‣ Doesn’t update dynamically ‣ Search for free MakeRefMovie tool 128
  • 129.
    15. animations &timers 129
  • 130.
    15. animations &timers 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
  • 131.
    15. animations &timers Timers ‣ be careful ‣ slugglish UI ‣ >= 1s frequency ‣ reduce DOM changes ‣ change the DOM once per cycle 131
  • 132.
    15. animations &timers html5 web workers ‣ starting to appear on mobile ‣ allow different threads on javascript ‣ we can do things without affecting ui rendering (too much) ‣ use it if they are available! 132
  • 133.
  • 134.
    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
  • 135.
  • 136.
  • 137.
    test, test &test 137
  • 138.
    you can reacha good experience 138
  • 139.
    you can reacha good experience thank you! firt.mobi twitter: @firt www.mobilexweb.com !"#$%&'()*&+,)*&''-"."$/012+$+(34'$) 139