josh fraser: mobile performance tricks

Tricks for mobile performance

Josh Fraser

Hi. I’m Josh‣ Cofounder & CEO of ‣ Find me on the web...

‣ @joshfraser on twitter‣ joshfraser.com‣ [email protected]

@joshfraser | torbit.com

@joshfraser@joshfraser | torbit.com

What’s special about mobile?


Challenges on mobile‣ Smaller screen ‣ Slower connections

‣ Lower bandwidth‣ Higher latency

‣ Smaller cache sizes‣ Lots of differences between devices


My focus is on automated solutions


Understanding differences between devices



Google34.7%

RIM27.1%

Apple25.5%

Microsoft7.5%

HP / Palm2.8%

Platform breakdown

ComScore, May 2011

Differences between devices‣ Screen sizes ‣ Processor speeds‣ Different browsers ‣ Different cache sizes‣ 3G vs. wifi‣ What about tablets?


Resizing images



Resizing images

Resized to 35% Full size image

Resizing images‣ Finding the best ratio‣ Replacement strategy

‣ Wait for onload‣ Wait for onready‣ Wait for a set amount of time

‣ Interlaced vs. low resolution place holders


Lazy-loading below the fold


Lazy-loading images‣ Replace lower images with a placeholder ‣ Set width & height attributes on IMG tag to prevent reflows

‣ Determine “below-the-fold”‣ Keep track of screen resolutions for each device‣ Detect with JavaScript & remember with cookies

‣ Replacement strategy


Using localStorage


Using localStorage‣ Technique used by Google, Facebook & Bing‣ Gives you dedicated cache for domain ‣ Generally 5MB

‣ Reduce HTTP requests‣ Include static resources with the initial HTML‣ Use cookies to track which resources are in localStorage‣ Best when automated


How it works


Using localStorage‣ Send static resources as inline JavaScript‣ For the JavaScript‣ Use document.write for outputting JavaScript

‣For the CSS‣ Replace the link to original CSS file with an empty style tag ‣ Use innerHTML to write contents

‣Everything is still executed in the correct order


Benefits of localStorage‣ Dramatically reduce HTTP requests‣ Extend cache life to optimize return visits‣ Safer than many other techniques used today



Without localStorage


2.2x faster

With localStorage

Preloading content for the next page view


Preloading content‣ Wait until onload ‣ Don’t slow down current page

‣ Predictive analysis ‣ Decide which page resources to preload based on historical

data

‣ Use localStorage‣ Be respectful of metered bandwidth


When to inline or externalize CSS or JavaScript



Inline vs. externalExternal

Inline

Inline vs. external‣ Separation of code is nice for development‣ External resources allow for future cache hits‣ Extra HTTP requests are expensive


Use localStorage for the best of both worlds


Iframes


Iframes‣ Often used to get around cross-domain issues‣ Facebook like button, Google +1, etc

‣ Should be avoided even more on mobile ‣ Can often be lazy-loaded


Loading indicators


Trade-offs


Trade-offs‣ Preloading ‣ Fast user experience vs. high cost of bandwidth

‣ Image quality‣ Faster loading vs. better quality

‣ This page view vs next page view‣ Requirements & results vary for every site


The best way to deal with trade-offsis to use automation and measurement


The easiest way to automate‣ Visit torbit.com‣ Sign up using the invite code “velocity”‣ This week: use coupon “velocity” for 20% off!


In summary ‣ Reduce the # of HTTP requests ‣ Reduce file sizes‣ Take advantage of localStorage‣ Automate


Thank you!

@[email protected]


Questions?

@[email protected]


josh fraser: mobile performance tricks

Technology