Contenu connexe Similaire à Performance Implications of Mobile Design (20) Plus de Guy Podjarny (17) Performance Implications of Mobile Design3. 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
4. Who Am I #1: Ex-CTO of Blaze.io (now Akamai)
Faster ForwardTM ©2012 Akamai
5. 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
6. Who Am I #3: Mobile Performance Researcher
http://blaze.io/blog/
Faster ForwardTM ©2012 Akamai
7. Some
Terminology
Faster ForwardTM ©2012 Akamai
8. Dedicated Sites (mdot)
URL/Website Per Device Profile
m.walmart.com www.walmart.com
Faster ForwardTM ©2012 Akamai
9. Responsive Web Design
One URL, Adapt to screen size
http://mediaqueri.es/mq/
Faster ForwardTM ©2012 Akamai
10. Mobile First & Desktop First included in RWD
Mobile First
(Progressive Enhancement)
Desktop First
(Graceful Degradation)
Faster ForwardTM ©2012 Akamai
11. Waterfall Charts
Resource Doc Complete,
Waterfall (Request/Response) (a.k.a. onload,
Chart Start Render Load Time)
Faster ForwardTM ©2012 Akamai
12. 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
15. Users Abandon Slow Sites
Page Abandonment vs. Load Time
Source:
KISS Metrics
Faster ForwardTM ©2012 Akamai
16. Fast Sites Help Bottom Lines
Shopzilla: 5 sec load time improvement
Source:
Shopzilla
Faster ForwardTM ©2012 Akamai
19. Mdot
Dedicated Sites don‟t
create new performance
problems
Still have old problems,
but that‟s not related to mobile design
Faster ForwardTM ©2012 Akamai
20. Small Mobile Site, Small Waterfall Chart
www.cnn.com , iPhone 4, iOS 5.0
Faster ForwardTM ©2012 Akamai
24. Late Redirect using scripts are even slower
www.disney.com
2 redirects + JS Redirect, 3 seconds lost
Faster ForwardTM ©2012 Akamai
26. 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
28. Responsive Web Design
Responsive Web Design
Top Performance
Problem:
Over-Downloading
Faster ForwardTM ©2012 Akamai
29. 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
30. Responsive Sites Load Times & Size, by Resolution
Load Time* by Resolution (ms)
4,000
3,500
3,000
2,500
2,000
1,500
1,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
31. Small Screen = Less Visible Content != Less Bytes
320x48 1600x120
0 0
Faster ForwardTM ©2012 Akamai
32. 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
Images
A bit smaller = 50%-90% the size
Much smaller = <50% the size
Faster ForwardTM ©2012 Akamai
33. Big Site, Big Waterfall
1600x120
0
Faster ForwardTM ©2012 Akamai
36. Hidden content is still downloaded
Display set to none,
resources are still
downloaded!
Faster ForwardTM ©2012 Akamai
38. 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
39. Excess DOM
1402 elements 1398 elements
3485 nodes 3491 nodes
Simplicity
not
reflected
in DOM
1600x1200 320x480
Faster ForwardTM ©2012 Akamai
40. RWD Woes
• Download and Hide
• Download and Shrink
• Extra CSS Download
• Excess DOM
Faster ForwardTM ©2012 Akamai
42. Images accounts for most mobile pages size
Stats from http://mobile.httparchive.com/
Faster ForwardTM ©2012 Akamai
43. Responsive Images
128px,
240px, 6.8 KB 2.9 KB
320px, 10.6 KB
480px, 21.3 KB
Site:
lonelyplanet.com
Device:
iPhone 4
Before: Full Res, 50.1 KB
867 KB
After:
570 KB
Faster ForwardTM ©2012 Akamai
44. Responding Up (or badly?)
ipad_hero.jpg
113 KB
Served to Desktop
ipad_hero_2x.jpg
360 KB
Served to New iPad
Faster ForwardTM ©2012 Akamai
45. 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
46. 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
47. 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
48. 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
49. 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
50. 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
52. 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
53. Questions?
Performance Implications of Mobile Design
Guy Podjarny
@guypod
guy@akamai.com
http://blaze.io/blog/
Akamai Confidential