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‣ josh@torbit.com

@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

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

‣ 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!

@joshfraserjosh@torbit.com

Questions?

@joshfraserjosh@torbit.com

Josh Fraser: Mobile performance tricks

Technology

Transcript of Josh Fraser: Mobile performance tricks

Josh Bieneman Force Baseball Director 216-223-5234 | josh ... · Josh Bieneman Force Baseball Director 216-223-5234 | josh@force-sports.com A native of Baltimore, MD, Josh Bieneman

Josh Bowers

Josh Lerner

Josh neely

Cache Design and Tricks Presenters: Kevin Leung Josh Gilkerson Albert Kalim Shaz Husain.

Josh & Sol

Old Tricks Are the Best Tricks

Josh Groban

Josh composition

Josh Report

Thesis Formatting: Tips, Tricks, and Resources Josh, Elham ... · –Make sure to get exactly what you need in writing – An affirmative e-mail response to a specifically worded

Josh Marvil February 23, 2012 NRAO Data Reduction WorkshopExamples, Tips, Tricks CASA Scripting Data Reduction Workshop. A CASA Script Example Script: G55.7 Tutorial ... Tips for getting

Josh Legal

Jessica & Josh

PowerPoint Presentation€¦ · Dylan Williams Connor Jackson Jack Fraser Aaron Philp Jordan Dowell Brendan Purcell Jay Yates Jayden Bell-Inskip Grant Humphrey Robert Ngamata Josh

Josh Lashbrook

Josh Balogun

Josh + Kelcie

Josh Tallent

Josh Bersin