Performance Implications of Mobile Design

Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/ Akamai Confidential

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 Faster ForwardTM ©2012 Akamai

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 Faster ForwardTM ©2012 Akamai

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 Faster ForwardTM ©2012 Akamai

Performance Matters! Akamai Confidential

Dedicated Sites (mdot) Akamai Confidential

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 Faster ForwardTM ©2012 Akamai

Responsive Web Design Akamai Confidential

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) © Faster ForwardTM ©2012 Akamai

Responsive Sites Load Times & Size, by Resolution Load Time* by Resolution (ms)4,0003,5003,0002,5002,0001,5001,000 500 0 Page Size by Resolution (KB) 1,200 1,000 800 600 400 200 0* Over Cable Speed(5 Mbps down, 1 Mbps up, 28ms RTT) Faster ForwardTM ©2012 Akamai

Some depressing stats…Page Size 10 Got Lucky 320x480 A Bit Smaller (BG 11% Image, Fonts, vs …)1600x1200 Much Smaller 3% Same Size 86% 1 Responsive ImagesA bit smaller = 50%-90% the sizeMuch smaller = <50% the size Faster ForwardTM ©2012 Akamai

Media queries don‟t prevent CSS downloads Separate CSS per media basic.css mobile.css 320x480“Right” CSS loaded“Wrong” CSS loaded- May be used by JavaScript- Possibly delayed till just before onload desktop.css Faster ForwardTM ©2012 Akamai

What Can We Do About It?! Akamai Confidential

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! Faster ForwardTM ©2012 Akamai

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% Faster ForwardTM ©2012 Akamai

Enhancing via JavaScript – Tips & Tricks 1600px• Split your files by layout/resolution 480 • Duplicating content on the server is ok 320 px px • 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 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+‟”/>‟); Faster ForwardTM ©2012 Akamai

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•… Faster ForwardTM ©2012 Akamai

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 Faster ForwardTM ©2012 Akamai

Testing different screen dimensions• Run webpagetest script with resizing • Use Chrome as agent (not supported on other browsers) • Sample script (tab delimited): setviewportsize 320 480 navigate 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/ Faster ForwardTM ©2012 Akamai

Summary Akamai Confidential

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 Faster ForwardTM ©2012 Akamai

Questions? Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/ Akamai Confidential

http://econsultancy.com	3111
http://www.blackphoebe.com	781
http://lanyrd.com	280
http://bushrobot.blogspot.co.uk	160
https://twitter.com	61
http://zweitag.posterous.com	60
http://bushrobot.blogspot.com	32
http://us-w1.rockmelt.com	17
http://apps.synaptive.net	15
http://lanyrd.dev	12
http://bushrobot.blogspot.de	11
http://translate.googleusercontent.com	11
https://twimg0-a.akamaihd.net	10
https://si0.twimg.com	7
http://bushrobot.blogspot.fi	7
http://www.hanrss.com	5
http://mlc-2011	5
http://bushrobot.blogspot.in	3
http://www.encarolina.com	3
http://bushrobot.blogspot.se	3
http://core.traackr.com	3
http://bushrobot.blogspot.ca	3
http://bushrobot.blogspot.fr	3
http://feeds.feedburner.com	2
http://localvox.com	2
http://bushrobot.blogspot.nl	2
http://www.newsblur.com	2
http://www.twylah.com	2
http://localhost	2
http://faavorite.com	2
http://bushrobot.blogspot.it	2
http://ebulletin.collected.info	2
https://content-preview.socialcast.com	1
http://www.marketlive-blog.com	1
http://bushrobot.blogspot.co.nz	1
http://pfshqiprism	1
http://moderation.local	1
http://blackphoebe.com	1
http://bottlenose.local	1
http://bushrobot.blogspot.no	1
http://131.253.14.250	1
http://www.diffbot.com&_=1356882926446 HTTP	1
http://www.diffbot.com&_=1356882942739 HTTP	1
http://www.diffbot.com&_=1356882912017 HTTP	1
http://bushrobot.blogspot.co.at	1
http://bushrobot.blogspot.com.br	1
http://electrosmart.com	1
http://131.253.14.98	1

Performance Implications of Mobile Design

by guypod

Accessibility

Categories

Upload Details

Usage Rights

48 Embeds 4,637

Statistics

Performance Implications of Mobile Design Presentation Transcript