extreme web performance for mobile devices
DESCRIPTION
Conference at Velocity Santa Clarar 2014TRANSCRIPT
extreme web performance for mobile devices
maximiliano @firtman firt.mobi
Slides, links and tests firt.mobi/velocity
questions
yes, please !
QA at the end
performance + mobile + web
1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
1- mobile web today*
*today: june 2014
1- mobile web today
- Web Platforms - The problem of Android - Webapps
web platforms
iOS and Android
web platforms
Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter
web platformsLinks at firt.mobi/velocity
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS!50%
Android!38%
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS!50%
Android!38%
Others?
• Firefox • UC Browser • Nokia Browser • BlackBerry Browser
web platforms
iOS!50%
Safari!100%
web platforms
iOS!50%
6.x!11%
7.x!89%
Source: Apple
web platforms
Safari iOS6 5%
Safari iOS7!45%
Android!38%
web platforms
Android!38%
web platforms
Android!38%
Browser!64%
Chrome!36%
web platforms
web platforms
web platforms
Android!38%
Samsung!32%
Browser!32%
Chrome!36%
web platforms
Android!38%
4.4
4.1-4.3
4.0
2.3
Source: Android Dashboard
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS!50%
Android!38%
web platforms
Samsung!12%
Android!12%
Others 4%
Windows Phone 3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
Others?
• Firefox • UC Browser • Nokia Browser • BlackBerry Browser
in a month… new phone
future
future
future
future
it’s not just about browsers
webapps
full screen webapps
home screen webapps
webapps are also known as(
)
webapps
Browser’s engine!
1- Web.app (~Safari) on iOS 2- Chrome on Android 3- Firefox on Android and FxOS
webapps
native webapps
hybrid apps
packaged webapps
native webapps are also known as(
)
webapps
Web View
webapps
Web View on iOS!
1- UIWebView on iOS 7 2- WKWebView on iOS 8
webapps
Web View on Android!
1- WebKit from 2.x to 4.3 2- Chromium 30 on 4.4 3- Chromium on Samsung 4- Chromium on Fire OS
webapps
Web View on Windows!
1- IE 10 on Windows (Phone) 8 2- IE 11 on Windows (Phone) 8.1
1- mobile web today- Understand the real ecosystem - Android browsers - Don’t think you are an average user - Webapp solutions - May change future
2- mobile & performance- Perception - Differences - Cellular networks - Responsive Web Design - Some data
immediate feedback 100ms
!
perception
Jakob Nielsen - Usability Engineering
immediate feedback 100ms
losing user’s flow of thoughts 1s
perception
Jakob Nielsen - Usability Engineering
500ms delay, +26% user’s frustration
perception
Source: Radware
“page slowdowns negatively affected
people’s long-term impression of the
entire brand”
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 2.2% is on 4G globally
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
~40% of the time 4G was not used
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
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
Page size
mobile vs desktop
responsive web design
Much smaller!6%
Slightly smaller!22%
Same Size!72%
Source: guypo.com
Superbowl advertisers
mobile approach
responsive web design
Responsive site!50%
Desktop!7%
Mobile !43%
Source: blogs.keynote.com
2- mobile and performance- Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G - Responsive Web Design !
3- tools
3- tools- where - measuring loading times - measuring responsiveness - online tools - html5 apis
Simulator & Emulator
Real device
where
emulators
Samsung!12%
Android!12%
Others!4%
Windows Phone 3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
emulators
Samsung!12%
Android!12%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
emulators
Samsung!12%
Android!12%
Others!4%
Windows Phone 3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
DEMO
online tools
online tools
remote inspectors
remote inspectors
Samsung!12%
Android!12%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
Measuring
DEMO
Proxies / Network sniffers
• Charles Proxy • Fiddler
tools
Image from telerik fiddler
Connection simulators• Charles Proxy • Clumsy for Windows • Network link conditioner from Xcode • Net Limiter for Windows • SlowyApp for Mac
tools
Navigation Timing API
• window.performance • Timestamps available
html5 apis
navigation timing api
Samsung!12%
Android!12%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6!5%
Safari iOS7!45%
Chrome!14%
Navigation Timing APIhtml5 apis
DEMO
Resource Timing API• Information per resource
html5 apis
resource timing api
Samsung!12%
Android!12%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6!5%
Safari iOS7!45%
Chrome!14%
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
What!!? Do you expect a page load in 200ms?
(
)
No really, we just need the PERCEPTION
of 1s
Redirects
• From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners
Redirections
DEMO
Redirections
• From 1 to 5s !
Compress resources
• Use Gzip in HTTP • For text-based files only
Basic browser behavior
• Network Fetch • Parsing • Rendering
Basic browser behavior
HTML
JS CSS
Basic browser behavior
HTML
JS CSSBLOCKS PARSING BLOCKS RENDERING
The 14K limit
The 14K limit
• TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
We need to separate AVOBE THE FOLD
(ATF) content
ATF in 1s = 1 RTT ~ < 14Kb ATF
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
Use illusion tricks
• Loading content animation • Minimal-ui viewport ASAP (iOS 7.1+) • Remember to keep the user engaged in 1s
ATF
Web Fonts
• Blocks text rendering • Fonts are bigger than 14Kb • Use them with care • Remove characters
ATF
Responsive Web Design
Responsive Web Design
ATF on mobile is not the same as on desktop
RWD
RWD
RWD
RWD
not how it works by default
RWD
RWD
RWD
DON’T rely on RESPONSIVE WEB DESIGN
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 • WURFL or DeviceAtlas
After ATF is ready
• Load rest of your content • Use ATF experience: 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
- consistent frame rate - immediate feedback - scrolling - your new enemy
Keep framerate high and consistent
• Main UI thread as free as possible • Avoid repainting (software bitmap calculations)
consistent fps
JavaScriptframerate
• Avoid DOM manipulations inside loops/scroll
var e = document.querySelector("#test");for (var i=0; i<100; i++) { // change e attributes });
JAVASCRIPT
CSSframerate
• Promote GPU layers smartly selector {
-webkit-transform: translateZ(0); -webkit-perspective: 1000; } !
selector { z-index: 10; }
CSS
Animationsframerate
• Don’t animate from JavaScript for basic stuff • Use requestAnimationFrame
remember 100ms immediate feedback?
Immediate feedback
• The 300ms delay !
• fixed viewport • FastClick solution
Storage for immediate feedback
• web storage vs web sql vs indexeddb • Finally IndexedDB on iOS 8!
navigator.geolocation .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 });
JAVASCRIPT
Geolocation cache
Distract the user
Scrolling
Scrolling
• avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers • on large scrolling areas: copy native
Large scrolling areas
Let’s copy native frameworks: • iOS: UITableView • Android: ListView & Adapters
Large scrolling areas
• Object pool !
Infinite scroll
• DOM vs. iframe vs. object pool • on iOS 8 new API (caution: on beta)
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 firt.mobi/velocity
final thoughts
- measure and profile - on real devices - be simple, be aggressive
you can reach a good experience
Pictures)from)freedigitalphotos.net)
thank you!
twitter: @firt mobilexweb.com
firt.mobi/pmw
Book signing: Thu 10.45am