(This version of the presentation is oriented at a web performance audience, and includes some mobile design 101 content)
Mobile Web Design is complicated, and several design paradigms have been created to help deal with the challenges the mobile landscape creates.
Amongst other implications, each paradigm also carries its own performance pitfalls, which can turn a well designed site into a horribly slow user experience.
This presentation covers the top design paradigms - Dedicated Websites (mdot) and Responsive Web Design, gives some background on each, and digs into the performance do's and don'ts for your design of choice.
Finology Group â Insurtech Innovation Award 2024
Â
Performance Implications of Mobile Design (Perf Audience Edition)
1. Performance Implications of Mobile Design
Guy Podjarny
@guypod
guy@akamai.com
http://guypo.com/ Akamai Confidential
2. Agenda
⢠Quick Intro to top Mobile Design Paradigms
⢠Review each Paradigm
⢠Explain Key Implementation Points
⢠Dig into 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
3. Who Am I #1: Ex-CTO of Blaze.io (now Akamai)
Faster ForwardTM Š2012 Akamai
4. 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
5. Who Am I #3: Mobile Performance Researcher
http://guypo.com/
Faster ForwardTM Š2012 Akamai
10. Why Dedicated Websites?
⢠Historical Reasons
⢠More established and better understood
⢠Hard to change existing desktop websites
⢠Different owners inside/outside the company
⢠Better Reasons
⢠Less sensitive to specific browsers
⢠Helps align to native apps
⢠Easier to get perfect site for that context (Maybe)
Faster ForwardTM Š2012 Akamai
11. Responsive Web Design
One URL, Adapt to screen size
www.bostonglobe.com
Faster ForwardTM Š2012 Akamai
12. Mobile First & Desktop First: RWD Variations
Mobile First
(Progressive Enhancement)
Desktop First
(Graceful Degradation)
Faster ForwardTM Š2012 Akamai
13. Why Responsive Websites?
⢠Broader Device Support
⢠Support the endless screen size permutations
⢠No Need for User-Agent Mapping
⢠Easier to maintain
⢠Maintain one website instead of multiples
⢠Future Friendly
⢠Anticipates future devices
⢠Better suited for handling new types of devices
⢠http://futurefriend.ly/
Faster ForwardTM Š2012 Akamai
14. Responsive Shades of Grey
⢠Responsiveness is a property of a website
⢠A dedicated mobile website can be responsive
⢠A website can respond âonly a little bitâ
⢠Display Size is not the only variable
⢠Can respond to hardware properties (e.g. camera)
⢠Can respond to data availability (e.g. location)
⢠Server-side code can help too (a.k.a. RESS)
⢠Though responsiveness is primarily client-side
Faster ForwardTM Š2012 Akamai
16. 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
17. Small Mobile Site, Small Waterfall Chart
m.cnn.com , iPhone 4, iOS 5.0
Faster ForwardTM Š2012 Akamai
18. Big Desktop/Tablet Site, Big Waterfall Chart
www.cnn.com
iPad 2
iOS 5
Faster ForwardTM Š2012 Akamai
19. Dedicated Sites Top Performance Problem
Redirects
m.
www.
Faster ForwardTM Š2012 Akamai
25. Redirects â What To Do?
⢠Replace redirects with client-specific HTML
⢠Your CDN/load-balancer can help!
⢠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 not cached by iOS and others
Faster ForwardTM Š2012 Akamai
27. RWD Implementation 101
⢠Fluid Design
⢠Turn absolute sizes into relative sizes
⢠Breakpoints
⢠Ethan Marcotte (@beep) / Stephen Hay @stephenhay:
âExpand window until it looks like shit. Time to insert a breakpoint!â
⢠CSS Media Queries
⢠Change CSS more significantly at breakpoints
⢠Examples: Hide Columns, Collapse Menus, Remove bg imgs
⢠Using min/max width controls default view
⢠Determines what non-conforming browsers will display
Faster ForwardTM Š2012 Akamai
29. Media Queries Example Mobile-First:
Uses min-width
3 âversionsâ: 2 Breakpoints:
Basic, Mobile, Desktop 320px, 640px
Faster ForwardTM Š2012 Akamai
30. RWD Implementation 201
⢠Extend support with scripted DOM manipulations
⢠Not all browsers support media queries (e.g. IE 6-8)
⢠Due to JS Support concerns, used mainly for enhancement
⢠Often required for responding to features
⢠Beware: Widths are not accurate or consistent
⢠Leave some bufferâŚ
⢠Use EMs instead of PXs for absolute sizes
⢠Better handling for zoom or font size differences
Faster ForwardTM Š2012 Akamai
31. Responsive Web Design
Responsive Web Design
Top Performance
Problem:
Over-Downloading
Faster ForwardTM Š2012 Akamai
32. 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
34. Small Screen = Less Visible Content != Less Bytes
320x48 1600x120
0 0
Faster ForwardTM Š2012 Akamai
35. Some depressing statsâŚ
Page size
Smallest Screen (320x480)
3%
11% vs.
Biggest Screen (1600x1200)
Roughly Same Size
A Bit Smaller (50-90%)
86%
Much Smaller (<50%)
Faster ForwardTM Š2012 Akamai
36. Big Site, Big Waterfall
1600x120
0
Faster ForwardTM Š2012 Akamai
37. Small Site, Big Waterfall
320x480
Faster ForwardTM Š2012 Akamai
38. Download and Hide
Rich Side-bar,
holds ads and more
Display set to none
Faster ForwardTM Š2012 Akamai
39. Hidden content is still downloaded
Display set to none,
resources are still
downloaded!
Hidden
background
Images are not!
Faster ForwardTM Š2012 Akamai
40. Download and Shrink
Smaller Screen,
Same Size Image
Faster ForwardTM Š2012 Akamai
41. Media queries donât prevent CSS downloads
Separate CSS
per media
basic.css
mobile.css 320x480
âRightâ CSS loaded
âWrongâ CSS loaded
- Possibly deferred to
just before onload
- WebKit Bug 39455
- Conditions may change
(e.g. rotate device)
- Scripts may use it
Faster ForwardTM
desktop.css Š2012 Akamai
42. Excess DOM
1402 elements 1398 elements
3485 nodes 3491 nodes
Simplicity
not
reflected
in DOM
1600x1200 320x480
Faster ForwardTM Š2012 Akamai
43. RWD Woes
⢠Download and Hide
⢠Download and Shrink
⢠Extra CSS Download
⢠Excess DOM
Faster ForwardTM Š2012 Akamai
49. 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 â Free Server-Side Image Resizing
⢠https://github.com/scottjehl/picturefill - Client-Side Selector
⢠Responsive images apply to CSS too!
⢠Especially to background images
Faster ForwardTM Š2012 Akamai
50. Load Images via CSS
Full Details:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Faster ForwardTM Š2012 Akamai
51. Or load images via JavaScript
⢠Same loader can:
⢠Apply responsive images
⢠Load only visible images, including only above-the-fold images
⢠Interferes with speculative look-ahead parsing
Faster ForwardTM Š2012 Akamai
52. Beyond Images - 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 res 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
53. Enhancing via JavaScript â Tips & Tricks
1600px
⢠Split your files by layout/resolution
480
⢠Duplicating content on the server is ok 320 px
⢠Duplicating download is not px
⢠Use Inline JavaScript to decide the layout
⢠Then use external (cacheable) files to apply it
⢠document.write() all CSS files (and other links) in one inline script!
⢠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 Forward
TM
Š2012 Akamai
54. 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
55. Now you can be Responsive AND Fast!
Faster ForwardTM Š2012 Akamai
57. 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
59. 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
60. Questions?
Performance Implications of Mobile Design
Guy Podjarny
@guypod
guy@akamai.com
http://guypo.com/ Akamai Confidential