Performance Implications of Mobile Design

Preview:

DESCRIPTION

Choosing your mobile design paradigm is hard, and performance is an often overlooked parameter in this decision process. This presentation discusses the top performance concerns for the top mobile design paradigms - Dedicated Sites (mdot) and Responsive Web Design (RWD). Presented at Breaking Dev (bdconf) in April, 2012.

Citation preview

Akamai Confidential

Performance Implications of Mobile Design

Guy Podjarny

@guypod

guy@akamai.com

http://blaze.io/blog/

©2012 AkamaiFaster ForwardTM

Good Morning!

©2012 AkamaiFaster ForwardTM

Agenda

• Performance Matters!• Focus on top Mobile Design Paradigms• A bit on Dedicates Sites (mdot)• A lot on Responsive Web Design

• Review Performance each Paradigm• Dig into the top performance problem• Show what went wrong• Discuss how you can fix it

• Share tools that can help• And how to use them

• Summary

©2012 AkamaiFaster ForwardTM

Who Am I #1: Ex-CTO of Blaze.io (now Akamai)

©2012 AkamaiFaster ForwardTM

Who Am I #2: Blaze Mobitest

• Mobile Web Performance Measurement• Free Online Service: http://akamai.com/mobitest/

• Now Open-Source!• For more details: http://bit.ly/open-source-mobitest

©2012 AkamaiFaster ForwardTM

Who Am I #3: Mobile Performance Researcher

http://blaze.io/blog/

©2012 AkamaiFaster ForwardTM

Some

Terminology

©2012 AkamaiFaster ForwardTM

Dedicated Sites (mdot)

m.walmart.com

URL/Website Per Device Profile

www.walmart.com

©2012 AkamaiFaster ForwardTM

Responsive Web Design

http://mediaqueri.es/mq/

One URL, Adapt to screen size

©2012 AkamaiFaster ForwardTM

Mobile First & Desktop First included in RWD

Mobile First(Progressive Enhancement)

Desktop First(Graceful Degradation)

©2012 AkamaiFaster ForwardTM

Waterfall Charts

Waterfall Chart Start Render

Resource(Request/Response)

Doc Complete,(a.k.a. onload,Load Time)

©2012 AkamaiFaster ForwardTM

Please don’t hate me…

• I use real world examples• Possibly written by you…

• Constructive feedback != bashing• These are common mistakes• We should learn from them

• I tried to spread the blame• Plenty of sites to choose from…

• If you fix it, let me know!• I’ll spread the word

Akamai Confidential

Performance Matters!

©2012 AkamaiFaster ForwardTM

Users Expect Fast Sites

Source: Akamai

©2012 AkamaiFaster ForwardTM

Users Abandon Slow Sites

Source:KISS Metrics

Page Abandonment vs. Load Time

©2012 AkamaiFaster ForwardTM

Fast Sites Help Bottom Lines

Shopzilla: 5 sec load time improvement

Source:Shopzilla

©2012 AkamaiFaster ForwardTM

Mobile Users Expect Equal Speeds

Source: Gomez

Akamai Confidential

Dedicated Sites (mdot)

©2012 AkamaiFaster ForwardTM

Dedicated Sites don’t create new performance

problems

Still have old problems, but that’s not related to mobile design

Mdot

©2012 AkamaiFaster ForwardTM

Small Mobile Site, Small Waterfall Chart

www.cnn.com , iPhone 4, iOS 5.0

©2012 AkamaiFaster ForwardTM

Big Desktop/Tablet Site, Big Waterfall Chart

www.cnn.comiPad 2iOS 5

©2012 AkamaiFaster ForwardTM

RedirectsDedicated Sites Top Performance Problem

m.www.

©2012 AkamaiFaster ForwardTM

Redirects are expensive!

www.espn.com2 redirects, 1.3 seconds lost

©2012 AkamaiFaster ForwardTM

Late Redirect using scripts are even slower

www.disney.com2 redirects + JS Redirect, 3 seconds lost

©2012 AkamaiFaster ForwardTM

Could get nasty

www.garmin.com3 redirects + JS Redirect, 3.6 seconds lost

©2012 AkamaiFaster ForwardTM

Redirects – What To Do?

• Minimize Redirects• Merge redirect chains

• Use HTTP Redirects, not JS redirects• Keep the client-side detection as backup• Detect most devices server-side

• Cache HTTP Redirects on the CDN• Makes the extra round trip shorter

• Use HTTP 301 Redirect, with a future Expiry• 302/303/307 redirects are not cached by the browser• Good test page (by @souders): http://bit.ly/redirect-cache-test

Akamai Confidential

Responsive Web Design

©2012 AkamaiFaster ForwardTM

Responsive Web Design Top Performance

Problem: Over-Downloading

Responsive Web Design

©2012 AkamaiFaster ForwardTM

Test – Compare Sites on Different Resolutions

• Data: • 347 Sites from http://mediaqueri.es/

• Testing Methodology:• Use http://webpagetest.org/• Use Chrome browser• Resize window before each measurement

•Resolutions: 320x480, 480x960, 1024x768, 1600x1200• Saw similar results with iPhone vs. iPad tests

• Collect Results• Excel & Pivot Tables

(Automated version of Jason Grigsby’s test last year)

©

©2012 AkamaiFaster ForwardTM

Responsive Sites Load Times & Size, by Resolution

320x480 640x960 1024x768 1600x12000

5001,0001,5002,0002,5003,0003,5004,000

Load Time* by Resolution (ms)

320x480 640x960 1024x768 1600x12000

200

400

600

800

1,000

1,200

Page Size by Resolution (KB)

* Over Cable Speed (5 Mbps down, 1 Mbps up, 28ms RTT)

©2012 AkamaiFaster ForwardTM

Small Screen = Less Visible Content != Less Bytes

320x4801600x1200

©2012 AkamaiFaster ForwardTM

Some depressing stats…

Same Size86%

A Bit Smaller11%

10 Got Lucky (BG Image, Fonts, …)

1 Responsive Images

A bit smaller = 50%-90% the sizeMuch smaller = <50% the size

Page Size320x480

vs1600x1200

©2012 AkamaiFaster ForwardTM

Big Site, Big Waterfall

1600x1200

©2012 AkamaiFaster ForwardTM

Small Site, Big Waterfall

320x480

©2012 AkamaiFaster ForwardTM

Download and Hide

Rich Side-bar, holds ads and more

Display set to none

©2012 AkamaiFaster ForwardTM

Hidden content is still downloaded

Display set to none,resources are still downloaded!

©2012 AkamaiFaster ForwardTM

Download and Shrink

Smaller Screen, Same Size Image

©2012 AkamaiFaster ForwardTM

Media queries don’t prevent CSS downloads

Separate CSS per media

320x480

“Wrong” CSS loaded- May be used

by JavaScript- Possibly delayed till

just before onload

basic.cssmobile.css

desktop.css

“Right” CSS loaded

©2012 AkamaiFaster ForwardTM

Excess DOM

320x4801600x1200

Simplicitynot

reflected in DOM

1402 elements3485 nodes

1398 elements3491 nodes

©2012 AkamaiFaster ForwardTM

• Download and Hide• Download and Shrink• Extra CSS Download• Excess DOM

RWD Woes

Akamai Confidential

What Can We Do About It?!

©2012 AkamaiFaster ForwardTM

Images accounts for most mobile pages size

Stats from http://mobile.httparchive.com/

©2012 AkamaiFaster ForwardTM

Responsive Images

128px, 2.9 KB240px, 6.8 KB

320px, 10.6 KB

480px, 21.3 KB

Full Res, 50.1 KB

Site:lonelyplanet.com

Device:iPhone 4

Before: 867 KB

After: 570 KB

©2012 AkamaiFaster ForwardTM

Responding Up (or badly?)

ipad_hero.jpg

113 KBServed to Desktop

ipad_hero_2x.jpg

360 KBServed to New iPad

©2012 AkamaiFaster ForwardTM

Low Hanging Fruit: Responsive Images

• Responsive Images = Serve lower res images to smaller screens• Optionally load full res image in the background

• Lots of great resources on how to do it• Cloud Four blog - Education• Sencha.io Src – Helper Tool

• Responsive images apply to CSS too!• Especially to background images• And stop with the huge images!

©2012 AkamaiFaster ForwardTM

Build Mobile First

• Don’t just design Mobile First – Code a Mobile-only site• Build only for the lowest resolution you care about• Adapt to similar screen sizes: No layout shifts, no big resolution jumps• Performance should compare to mdot sites

• Once implemented – Enhance via JavaScript• Grow DOM only on screens that need it.

• Desktop clients with no JS support are a minority• Your mobile site should be good enough for those• Don’t sacrifice the performance of 99% for the remaining 1%

©2012 AkamaiFaster ForwardTM

Enhancing via JavaScript – Tips & Tricks

• Split your files by layout/resolution• Duplicating content on the server is ok• Duplicating download is not

• Use Inline JavaScript to decide the layout• Then use external (cacheable) files to apply it

• Put scripts that change design at the top• JavaScript blocks rendering• Will avoid FOUC – Flash Of Unstyled Content• Put all other scripts at the bottom

320px

480px

1600px

var css = ‘small.css’;if (window.innerWidth > 640) css = ‘large.css’;else if (window.innerWidth >= 320) css = ‘medium.css’;document.write(‘<link type=“stylesheet” rel=“stylesheet” href=“’+css+’”/>’);

©2012 AkamaiFaster ForwardTM

Don’t forget the “regular” concerns

• Reduce HTTP requests• Consolidate Files• Inline tiny files

• Reduce bytes• Minify CSS/JS• Use Lossless Compression for Images

• Load visible content first• Defer everything else• Or Load it on demand

• Avoid CSS Imports• …

©2012 AkamaiFaster ForwardTM

Measure!

• Mobitest • Online service: http://akamai.com/mobitest/ • Install local open-source version (details)

• Google’s Pcapperf• Convert network capture to waterfall charts• http://pcapperf.appspot.com/

• Stoyan Stefanov’s “icy”• HTTP insight into iOS HTTP requests• https://github.com/stoyan/icy

• @firt’s iWebInspector• Remote debugger for iOS simulator• http://www.iwebinspector.com/

49

©2012 AkamaiFaster ForwardTM

Testing different screen dimensions

• Run webpagetest script with resizing• Use Chrome as agent (not supported on other browsers)• Sample script (tab delimited):

setviewportsize 320 480navigate http://bdconf.org/

• Many other scripting options:https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting

• Figure out the viewport dimensions you want to simulate• http://www.websitedimensions.com/

Akamai Confidential

Summary

©2012 AkamaiFaster ForwardTM

Summary

• Choosing your mobile design is HARD• There are many factors to consider

• Design Decision have Performance Implications• Mdot Primary Concern: Redirects• RWD Primary Concern: Over-Downloading

• Either design paradigm can be made fast• Performance should be built in – not bolted on• Measure!• Make perf testing a part the core functionality test

Akamai Confidential

Performance Implications of Mobile Design

Questions?

Guy Podjarny

@guypod

guy@akamai.com

http://blaze.io/blog/

Recommended