Extreme Web Performance for Mobile Devices

Picture from Simon Howden freedigitalphotos.net!

extreme web performance for mobile devices

maximiliano @firtman firt.mobi

Amsterdam, Oct 28 2015

EARLY DRAFT!

Slides, links and tests firtman.github.io/velocity

questions

yes, please

QA at the end

performance + mobile + web

1- Mobile Web today 2- Performance & Mobile 3- Tools 4- APIs & Specs 5- 8 Tips for Extreme Performance

1- mobile web today*

*today: october 2015

1- mobile web today- Web Platforms - The Android’s problem - The WebView’s problem

web platforms

iOS and Android

web platforms

NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL Device Atlas

web platformsLinks at firtman,github.io/velocity

Browsers only?

web platforms

web view browsing

Web View25%

Browser75%

Other 30%

Twitter 5% Facebook

40%

Chrome (iOS) 25%

Source: MOVR Report

Let’s see some data

web platforms

web platformsOthers 10%

iOS45%

Android45%


iOS45%

Android45%

web platforms

iOS45%

Safari100% ?

web platforms

Apps (WebView) 25%

Safari75%

iOS45%

web platforms

7.x 9%

8.x30% 9.x

61%

Source: Apple

iOS45%


iOS45%

Android45%

web platforms

Android45%

web platforms

Browser33%

Chrome67%

Android45%

1% month

web platforms

web platforms

web platforms

LG G3

web platforms

Browser 2.x 3%

Samsung17%

Browser 4.x30%

Chrome50%

Android45%


iOS45%

Android45%



Others 15%

Firefox 10%

UC Browser 25%

IE 25%

Opera Mini 25%


iOS45%

Android45%

web platforms

Android15%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS12%

Safari iOS810%

Safari iOS923%

Chrome23%

web platforms

Old WebKit14%

IE3%

Proxy5%

WebKit46%

Chromium30%

1- mobile web today

- Understand the real ecosystem - The Android browsers - The WebView - Don’t think you are an average user

2- mobile & performance

- Perception - Differences - Cellular networks - Responsive Web Design

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

40% of users abandon an article if it doesn't load after six seconds

“

”Danny Bernstein, Google

Pages loaded 3.9x faster with Crystal and used 53% less bandwidth

“

”Crystal, an iOS ad-blocker

perception

Source: Google Developers

RAIL

perception

RAIL

100ms

perception

RAIL

100ms 16ms

perception

RAIL

100ms 16ms 50ms

perception

RAIL

100ms 16ms 50ms 1s

why do we need special care on mobile?

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 10% 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

Real Bandwidth (Mbps)cellular networks

0 3.5 7 10.5 14

2G 3G Wifi 4G

RTT - latencycellular networks

2G

3G

4G

Home

0 250 500 750 1000

Min Max

latency

request

bandwidth

Safari, Chrome, Android 88%93%

1%

5%

4%

Other non-Android, non-iOS 6%

Safari, Chrome, Android 88%94%

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

Wait there! Google said it will penalize non-responsive sites…

(

)

Mmm…. NOT REALLY

2- mobile and performance- Perception: RAIL, 100ms / 1s - RTT latency - RWD as a goal might be a problem - Test on low hardware and 2G/3G

3- tools

3- tools- where - measuring loading times - measuring responsiveness - online tools - html5 apis

Simulator & Emulator

Real device

where

emulators

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

emulators

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

DEMO

online tools

online tools

online tools

online tools

remote inspectors

remote inspectors

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

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

3- tools

- Learn where to test - Measure loading times - Measure responsiveness

4- apis & specsfor performance

Navigation Timing API

• window.performance • Timestamps available

html5 apis

navigation timing api

* Android browser only from 4.0

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

Navigation Timing APIhtml5 apis

DEMO

Resource Timing API

• Information per resource

html5 apis

resource timing

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

Network information API

• Android Browser, Silk (spec #1) type • BlackBerry 10 (spec #2) bandwidth • Firefox, Chrome 38+ (spec #3) type & events • Chrome 47+ (spec #4) type & estimated bw

html5 apis

net info api

* Different specs available

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

Service Workers

• Manage offline cache • Background sync • Push Notifications

html5 apis

service workers

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

Request Idle Callback

• Do something when the browser is idle • Chrome 47+ (beta today)

html5 apis

HTTP Client Hints

• HTTP Headers: dpr, viewport’s width • Chrome 46+ • New: save-data (future)

html5 apis

HTTP/2

• Performance from scratch • Header Compression • TCP connection reuse • Push to Cache • Early tests show 15-60% load time improvement

HTTP/2

• TLS-based only today • Good compatibility • Upgrade your servers • Upgrade connections

http/2

Android14%

Samsung7%

Others2%

Windows Phone3%

UC Browser 3%

Opera 3%

InApp iOS14%

Safari iOS810%

Safari iOS922%

Chrome23%

AMP-HTML

4- apis & specs

- HTML5 APIs - Look for the near future - HTTP/2 when possible- AMP new idea

5- Extreme Performance Tips

Network Layer Stop Signs RWD as a goal HTML in 14k

CSS ASAP JavaScript as dessert Fast UI Web Views

Image from developers.google.com

http://developers.google.com

What!!? Do you expect a page load in 200ms?

(

)

No really, we just need the PERCEPTION

Network Layer

Network Layer

• Reduce DNS and HTTP requests • Domain Sharding • Gzip responses • 14Kb congestion window for achieve 1s

Network Layer

• Reduce DNS and HTTP requests • Domain Sharding • Gzip responses • 14Kb congestion window for achieve 1s

HTTP/2

HTTP/2

HTTP/2

HTTP/2

Stop Signs

REDIRECTS

APP BANNER

CLIENT RENDERING

Stop Signs

• Reduce redirects (100ms to 1s each) (social networks have one or two) • Don’t create custom app banners • Don’t use client side rendering for first view

Stop Signs

• Reduce redirects (100ms to 1s each) (social networks have one or two) • Don’t create custom app banners • Don’t use client side rendering for first view

HTTP/2

HTTP/2HTTP/2

RWD as a Goal

RESPONSIVE WEB DESIGN is the future

We are not saying go m.*

Responsive Web Design

• Using same URL still a good a idea • Mix it with RESS / adaptive web design • Load media queries CSS async • Use server-side libraries • WURFL or DeviceAtlas

But we are front-end!

Time to rethink priorities and architecture

Server

Client Frontend engineer

Backend engineer

Server

Client Frontend engineer

Backend engineer

Frontend server

HTML in 14Kb

• ATF in 1s = 1 RTT ~ < 14Kb (compressed) • > 14Kb will create another roundtrip • HTML + CSS + JavaScript • Images?

We need to separate ABOVE THE FOLD (ATF)

content

Distract the user

HTML in 14Kb

• ATF content in 14Kb • Create an AMP-HTML version if applicable • Speed future visits • HD/SD contexts

HTML in 14Kb

• ATF content in 14Kb • Create an AMP-HTML version if applicable • Speed future visits • HD/SD contexts

HTTP/2HTTP/2

HTTP/2HTTP/2

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

CSS ASAP

Basic browser behavior

HTML

JS CSS


HTML

JS CSSBLOCKS RENDERING

CSS ASAP

• Don’t rely on media queries only • Inline ATF CSS • Load async the rest • Push them on HTTP/2 • Use only one CSS file

CSS ASAP

• Don’t rely on media queries only • Inline ATF CSS • Load async the rest • Push them on HTTP/2 • Use only one CSS file

HTTP/2HTTP/2

HTTP/2

HTTP/2

HTTP/2

JavaScript as dessert


HTML

JS CSSBLOCKS PARSING

Avoid JavaScript frameworks

• Embrace Vanilla JS • Load it async • Join everything in one JS file • Keep 60fps frame rate consistent

JavaScript

• Embrace Vanilla JS • Load it async • Join everything in one JS file • Keep 60fps frame rate consistent

Avoid JavaScript frameworksJavaScript

HTTP/2HTTP/2

HTTP/2

Fast UI

• Images are non-blocking by default • Don’t use Data URI => blocking • Responsive Images • Remember HD/SD • User SVG when possible • New Formats: WebP, APNG

Image and UI

Your new enemy

NOT THE USER

YOUR DESIGNER

Careful with some design features

• GPU vs CPU repaint • Important on scroll, transitions & animations

• Transforms and opacity GPU • border-radius, gradients, shadows, filters CPU repaint

Web Views

Web Views

• Too many on Android • WebKit, Chromium, Amazon, Samsung

• Two on iOS: old and new

Web Views

• Less performant • Don’t share sessions with the browser • No HTTP/2 support on most of them

Fast Web Views on Android

• Project Crosswalk for local content • Chrome Custom Tabs for browsing

Fast Web Views on iOS

• Project Crosswalk for local content • WKWebView (iOS 9+) • Safari View Controller for browsing (iOS 9+)



uf! we've covered a lot!

Improve Network Avoid Stop Signs Avoid RWD as a goal HTML in 14k

CSS ASAP JavaScript as dessert Fast UI Fast Web Views

1- Mobile Web today 2- Mobile Performance 3- Tools 4- New APIs & Specs 5- Extreme Performance Tips

Slides, links and tests firtman.github.io/velocity

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, be smart

you can reach a good experience

Pictures)from)freedigitalphotos.net)

[email protected]@firt

firt.mobi/hpmw firt.mobi/mh5

Technology

Extreme Web Performance for Mobile Devices