Embed Size (px)
Citation preview
extreme web performance for mobile devices
maximiliano @firtman firt.mobi
San Francisco, April, 20th 2015
NEW!SOON!
Slides, links and tests firtman.github.io/fluent
questionsyes, please
QA at the end (also Office Hours tomorrow 2.15)
performance + mobile + web
1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
first…
Web Performance Optimization How important WPO is for conversion
1- mobile web today*
*today: april 2015
1- mobile web today
- Web Platforms - The Android’s problem
web platforms
iOS and Android
web platforms
Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL
web platformsLinks at firtman,github.io/fluent
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS50%
Android38%
web platforms
iOS50%
Safari100%
web platforms
iOS50%
Apps (Web View) 12%
Safari88%
web platforms
iOS50%
7.x 19%
6.x2%
8.x79%
Source: Apple
web platforms
InApp iOS 5%
Safari iOS79%
Safari iOS836%
Android38%
web platforms
Android38%
web platforms
Android38% ?
web platforms
Android38% Browser
50%Chrome
50%
-1% month
web platforms
web platforms
web platforms
LG G3
web platforms
Android38%
Samsung20%
Browser30%
Chrome50%
web platforms
iOS50%
Android38%
web platforms
Samsung10%
Android14%
Others4%
Windows Phone 3%
Opera 5%InApp iOS
5%
Safari iOS79%
Safari iOS836%
Chrome15%
Others?
• Firefox • UC Browser • Nokia Browser • BlackBerry Browser
1- mobile web today
- Understand the real ecosystem - Android browsers - Don’t think you are an average user - Everything will change
2- mobile & performance
- Perception - Differences - Cellular networks - Responsive Web Design
immediate feedback 100ms
perception
Jakob Nielsen - Usability Engineering
immediate feedback <100ms
keeping user’s flow of thoughts <1s
perception
Jakob Nielsen - Usability Engineering
500ms delay, +26% user’s frustration
perception
Source: Radware
why do we need special care on mobile?
CPU and GPU
Memory
differences
CPU and GPU
Memory
differences
5x
Wifi
differences
Wifi, public spaces?
differences
Cellular connections
differences
We have 4G! We don't need to worry about performance...
(
)
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
Only 4% is on 4G globally
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
~30% of the time 4G was not used
But that is going to change quickly…
(
)
2019?85% in USA and 30% in Europewill be on 4G
(
)
Source: Ericsson Mobility Report
Real Bandwidth (Mbps)cellular networks
0 2 4 6 8
2G 3G Wifi 4G
RTT - latencycellular networks
2G
3G
4G
Home
0 250 500 750 1000
Min Max
latency
request
bandwidth
Safari, Chrome, Android 91%
Safari, Chrome, Android 71%91%
1%
7%
18%
Other non-Android, non-iOS 10%
Safari, Chrome, Android 71%91%
responsive web design
Responsive Web Design is a TOOL
Responsive Web Design is NOT a GOAL
Users DON’T care if your site is RESPONSIVE
(in terms of RWD)
Users DO care if the site is FAST
responsive web design
Source: guypo.com/rwd2014
43% more requests
compared with a mobile site
responsive web design
Source: guypo.com/rwd2014
129% more data transfer
compared with a mobile site
responsive web design
Source: guypo.com/rwd2014
87% more CPU time
compared with a mobile site
2- mobile and performance- Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G - RWD harms performance
3- tools
3- tools- where - measuring loading times - measuring responsiveness - online tools - html5 apis
Simulator & Emulator
Real device
where
emulators
Samsung10%
Android15%
Others4%
Windows Phone 3%
Opera 5%
InApp Browser iOS 5%
Safari iOS45%
Chrome14%
emulators
Samsung10%
Android15%
Others4%
Windows Phone3%
Opera 5%
InApp Browser iOS 5%
Safari iOS45%
Chrome14%
emulators
Samsung10%
Android15%
Others4%
Windows Phone 3%
Opera 5%
InApp Browser iOS 5%
Safari iOS45%
Chrome14%
DEMO
online tools
online tools
online tools
online tools
remote inspectors
remote inspectors
Samsung10%
Android14%
Others4%
Windows Phone3%
Opera 5%
InApp Browser iOS 5%
Safari iOS45%
Chrome15%
Measuring
DEMO
Proxies / Network sniffers
• Charles Proxy • Fiddler
tools
Image from telerik fiddler
Connection simulators
• Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools
tools
html5 apis
Navigation Timing API
• window.performance • Timestamps available
html5 apis
navigation timing api
Samsung12%
Android*12%
Others4%
Windows Phone3%
Opera 5%
InApp Browser iOS5%
Safari iOS45%
Chrome15%
* Android browser only from 4.0
Navigation Timing APIhtml5 apis
:)
Navigation Timing APIhtml5 apis
:/.1
iOS SDK Release Notes for iOS 8.1html5 apis
Navigation Timing APIhtml5 apis
DEMO
Resource Timing API• Information per resource • Chrome and IE11 only
html5 apis
Network information API
• Android Browser, Silk (spec #1) type • BlackBerry 10, old Firefox (spec #2) bandwidth • Firefox, Chrome for Android 38+ (spec #3) type
html5 apis
3- tools
- Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs
4- initial loading & perception
4- initial loading & perception- 1 second threshold - classic checklist - ATF and the rest - responsive web design - future visits
DNS Lookup
TCP Connection
HTTP Request
Server Response
RENDERING!
RENDERING!
What!!?? a page load in 200ms?
(
)
No really, we just need the PERCEPTION
We need to avoid
Basic browser behavior
• Network Fetch • Parsing • Rendering
Basic browser behavior
HTML
JS CSS
HTML
JS CSSBLOCKS PARSING BLOCKS RENDERING
= REDIRECTS
Redirects
• From 150 to 1000 ms per redirect
Redirects
DEMO
1. Facebook’s l.php 2. bit.ly 3. aa.com 4. www.aa.com 5. www.aa.com/HomePage 6. mobile.aa.com 7. mobile.aa.com/HomePage
= APP BANNER
= APP SPAM
delta.com
• 1-5 seconds delay
delta.com
• 1-5 seconds delay
= APP BANNER
The 14K limit
The 14K limit
• TCP slow start • Initial congestion window: ~14.6Kb • > 14Kb will create another roundtrip
RTT
What!!?? the page contents in 14Kb?
(
)
It’s 14Kb HTTP response (so, compressed)
~70Kb
We need to separate ABOVE THE FOLD (ATF)
content
ATF in 1s
ATF
ATF in 1s = 1 RTT
ATF
ATF in 1s = 1 RTT ~ 14Kb
ATF
ATF in 1s = 1 RTT ~ 14Kb
ATF
HTML + CSS + JavaScript Images?
How to embrace ATF in 14Kb?
(
)
Avoid JavaScript frameworks
• Embrace Vanilla JS • If you really need them, load them after ATF • Think on alternatives or partial frameworks
ATF
Careful with Data URI in CSS
• Images are non-blocking by default • Using Data URI in CSS creates blocking images • Use them only on non-ATF external CSS
ATF
Client side rendering
• Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view
ATF
Client side rendering
• Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view
ATF
5x
Web Fonts• Blocks text rendering • Fonts are bigger than 14Kb • Remove characters • Simplify glyphs • Don’t use it on ATF
ATF
Responsive Web Design
Responsive Web Design
• Media queries block rendering (all of them) • ATF content on mobile is unique
DON’T rely on RWD techniques only
for first view
RESPONSIVE WEB DESIGN is the future
We are not saying go m.*
Responsive Web Design
• Using same URL for mobile/desktop still a good a idea • Mix it with RESS / adaptive web design • Load media queries CSS async • Use server-side libraries to decide to send ATF only • WURFL or DeviceAtlas
After ATF is ready
• Load rest of your content • Gain experience while rendering ATF: current performance, screen density, bandwidth • Make decisions: HD/SD
Async scripts
<script async src=""></script> HTML5
Defer non-ATF CSS
• No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
Speed future visits
• Be cache friendly • Use Application Cache for ATF content • Create a custom cache
4- initial loading & perception
- ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts - Defer anything else
5- responsiveness & experience
4- responsiveness & experience- experience - consistent frame rate - immediate feedback - scrolling - your new enemy
Optimize your content for mobile
experience
Keep framerate high and consistent
• Keep framerate high and consistent • Avoid DOM manipulations in loops/scroll • Careful promoting GPU layers
consistent fps
remember 100ms immediate feedback?
Immediate feedback
• The 300ms delay
• mobile viewport (“user-scalable=no” on some browsers) • FastClick solution
Immediate feedback
• Mobile Viewport on Chrome
<meta name=viewport content="width=device-width">
HTML
Immediate feedback
• Mobile Fixed Viewport on IE <meta name=viewport content="width=device-width, user-scalable=no" >
HTML
Immediate feedback
• CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; }
CSS
Distract the user
Storage for immediate feedback
• web storage vs web sql vs indexeddb • think about async vs sync • Finally IndexedDB on iOS 8!
Scrolling
• avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers
Your new enemy
NOT THE USER
YOUR DESIGNER
Careful with some design features
• GPU vs CPU repaint • Important on scroll, transitions & animations
Careful with some design features
• Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
5- responsiveness & experience- 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & test
Picture from Simon Howden freedigitalphotos.net!
Picture from Simon Howden freedigitalphotos.net!
uf! we've covered a lot!
1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
Slides, links and tests firtman.github.io/fluent
final thoughts
- measure and profile on the real world - don’t redirect, reduce requests - atf content in 1s, defer the rest - be simple, be aggressive
you can reach a good experience
Pictures)from)freedigitalphotos.net)
[email protected]@firt
firt.mobi/pmw firt.mobi/mh5
Book signing: Tue 18.00
Office Hours: Tue 14.15
50% OFF!
