Mobile WebKit Optimizations & Tools

Mobile WebKitOptimizations & Tools

Andrew HedgesLead Engineer, Tapulous

@segdeha

1

2

3

4

5

6

7

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