Extreme Web Performance for Mobile Devices

extreme web performance for mobile devices maximiliano @ﬁrtman ﬁrt.mobi

Slides, links and tests ﬁrt.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 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

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 - Diﬀerences - 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 aﬀected 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 Wiﬁ 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

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 sniﬀers • Charles Proxy • Fiddler   tools Image from telerik ﬁddler

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 not how it works by default

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 stuﬀ • 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 ﬁrt.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: @ﬁrt mobilexweb.com firt.mobi/pmw Book signing:  Thu 10.45am

Extreme Web Performance for Mobile Devices

You are reading a preview.

Extreme Web Performance for Mobile Devices

More Related Content

Viewers also liked

Similar to Extreme Web Performance for Mobile Devices

More from Maximiliano Firtman

Featured

Related Books

Related Audiobooks