Extreme Web Performance for Mobile Device Fluent 2015

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

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

mydomain.com -> m.mydomain.com

Redirects

• URL shorteners: t.co, g.co, bit.ly

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

idontwantyourfuckingapp.tumblr.com

= 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!