Mobile WebKit Optimizations & Tools

Mobile WebKitOptimizations & Tools Andrew Hedges Lead Engineer, Tapulous @segdeha 1

Optimizing for mobile 8

Reduce the number of requests• concatenate and/or inline CSS & JS• image sprites• inline, base64 binary assets 9

Send fewer bytes• gzip text resources• uglify/minify CSS & JS• properly compress images• use cookie-less hosts for static assets• leave out unnecessary tags? 10

Cache aggressively• HTML5 cache manifest• localStorage• custom, in-app caching• reference in-app resources? 11

Leverage CSS3• transforms, transitions, animations• gradients (& other techniques) in place of images• 9-slice borders using border-image 12

Use JavaScript conservatively• use touch events• reduce the use of closures• only execute the code you need 13

Donʼt reinvent the wheel• Zepto• jQTouch• iScroll• underscore.js & backbone.js 14

Tools of the trade• Charles Proxy• Weinre 15

Questions?andrew@hedges.name @segdeha 16

http://andrew.hedges.name	921
http://ahedg.es	109
http://segdeha.com	40
http://www.linkedin.com	7
http://andrew.hedges.name.nyud.net	1
http://webcache.googleusercontent.com	1
http://www.andrew.hedges.name	1

Mobile WebKit Optimizations & Tools

by Andrew Hedges

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 1,080

Statistics