Extreme Web Performance for Mobile Devices
Upcoming SlideShare
Loading in...5
×
 

Extreme Web Performance for Mobile Devices

on

  • 6,646 views

Conference at Velocity Santa Clarar 2014

Conference at Velocity Santa Clarar 2014

Statistics

Views

Total Views
6,646
Views on SlideShare
6,326
Embed Views
320

Actions

Likes
28
Downloads
142
Comments
1

6 Embeds 320

https://twitter.com 298
http://mangastorytelling.tistory.com 12
https://www.linkedin.com 4
http://www.conferize.com 3
https://tweetdeck.twitter.com 2
http://tweetedtimes.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ok
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices Presentation Transcript

    • 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 - latency cellular 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 API html5 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
    • Image from developers.google.com
    • 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 ! 

    • idontwantyourfuckingapp.tumblr.com
    • 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 CSS BLOCKS 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
    • JavaScript framerate • Avoid DOM manipulations inside loops/scroll 
 
 var e = document.querySelector("#test");
 for (var i=0; i<100; i++) { // change e attributes }); JAVASCRIPT
    • CSS framerate • Promote GPU layers smartly 
 selector { -webkit-transform: translateZ(0); -webkit-perspective: 1000; } ! selector { z-index: 10; } CSS
    • Animations framerate • 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! 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