performance + mobile + html5 1- Mobile & Performance 2- Measuring 3- e worst - with examples! :) 4- What to do... always 5- What to do... sometimes Tuesday, June 18, 13
Remote inspectors • BlackBerry Smartphones 7/10 • Google Chrome for Android • Opera Mobile • Safari on iOS 6+ • Firefox (Android / FFOS) tools Tuesday, June 18, 13
JavaScript • Really expensive • Blocks downloads and responsiveness • Repaint and DOM manipulation, the worst • Too frequent timers? mmmm • Frameworks... oh, frameworks.... the worst Tuesday, June 18, 13
Responsive Web Design • Don't use it just because it's cool • RWD is great on some situations • RWD is terrible on other situations • Add some server-side logic -> RESS the worst Tuesday, June 18, 13
3- the worst - don't redirect, don't stop your user - avoid requests at all cost - balance design, get a new enemy - keep javascript at the minimum - responsive web design? Tuesday, June 18, 13
Classic techniques • Enable GZIP for text-based les • Compress CSS & JS • Only the CSS and JS you are using • reduce DNS lookup • stylesheets at the top what to do always Tuesday, June 18, 13
Improve perception • Flush early, be ready asap • If you have an external CSS, ush aer it • Hide URL bar asap • Pre-fetch and batch requests on progressive loading what to do always Tuesday, June 18, 13
Improve experience what to do sometimes use Application Cache • perception of immediate loading • only for html and basic resources • updating is still a problem • buggy Tuesday, June 18, 13
Improve experience what to do sometimes HD / SD version • make a decision based on the context • allow the user to switch to a light version • copy YouTube idea Tuesday, June 18, 13
Network communication what to do sometimes Server-side events • keep an HTTP request opened • re-connects automatically • send contents in batch (in JSON/XML) Tuesday, June 18, 13
Network communication what to do sometimes Data URI • embrace embedded content • use it with storage APIs for caching • much better than a request Tuesday, June 18, 13
Network communication what to do sometimes Custom Cache • Up to 5x faster than standard browser cache • Cookies for server-side detection or a light JS detection framework • Up to 2.5Mb safe (4Mb using compression) Tuesday, June 18, 13
Custom cache browser server request (no cookies) response full html inline images css styles javascript code stores resources in localStorage and create cookie Tuesday, June 18, 13
Custom cache first load browser server request (no cookies) response full html inline images css styles javascript code stores resources in localStorage and create cookie Tuesday, June 18, 13
JavaScript what to do sometimes • Web Workers var w = new Worker("worker.js"); w.addEventListener("message", function(e) { }); w.postMessage("Hi Worker!") JAVASCRIPT Tuesday, June 18, 13
JavaScript what to do sometimes • Geolocation cache navigator.geolocation .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 }); JAVASCRIPT Tuesday, June 18, 13
Media what to do sometimes • Always use CSS transitions/animations when possible • On games and user-based animations, ask for Animation Timing API (requestAnimationFrame) • Use Page Visibility API to pause/resume Animations Tuesday, June 18, 13
Media what to do sometimes • Using a 3D transform • Be careful; the GPU is also limited • Apple is not recommending this hack anymore Hardware acceleration Tuesday, June 18, 13
Media what to do sometimes • Blocks rendering -> performance issue • Remove characters from the font le • Use a web font loader • Fonts in Data URI on some platforms Custom fonts Tuesday, June 18, 13
Screen densities using css extensions #photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px; } what to do sometimes Tuesday, June 18, 13
Screen densities using css media queries @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { } what to do sometimes Tuesday, June 18, 13
Screen densities • transfer, decoding time and memory usage • try and measure • For 1x, always image of 1x • For 2x: image of 2x, 1.5x? • For 3x: image of 2x? 3x?? what to do sometimes Tuesday, June 18, 13
performance and mobile - learn to measure - be simple, be aggressive - test every technique - keep measuring - change is the only constant Tuesday, June 18, 13
you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! firt.mobi twitter: @firt www.mobilexweb.com rt.mobi/pmw Tuesday, June 18, 13
takumakume
tk3fftk
yellowshippo
iwamot
imsaku
line_developers
sansantech
yokawasa
pauli
bkuhlmann
bumptakayuki
tomuro
bcantrill
aleyda
addyosmani
marcelosomers
panda_program
tammielis
cassininazir
dotmariusz
shpigford
thoeni
morganepeng