looking for
the holy grail of MOBILE WEB PERFORMANCE

Adam Bar
@NOtherDev

performance

The biggest mistake we made as a company was betting too much on HTML5 instead of native

source: statcounter

looking for
the holy grail of MOBILE WEB PERFORMANCE

Adam Bar
@NOtherDev

source: soasta

network throughput & latency

performance is...

server-side throughput

page load & render time, including script execution time

animations & interactions smoothness

PErceived performance (UX)

network throughput & latency

performance is...

~~server-side throughput~~

page load & render time, including script execution time

animations & interactions smoothness

~~PErceived performance (UX)~~

network

load & render

runtime

Case study: before

FP: 7.04 s

FMP: 9.76 s

network throughput
& latency

network

load & render

runtime

http/2

network

load & render

runtime

www.http2demo.io

network

load & render

runtime

Case study: with http/2

Before:

FP: 7.04 s

FMP: 9.76 s

after:

FP: 6.84 s

FMP: 9.53 s

http/2 Server push

index.html

style.css

script.js

network

load & render

runtime

Preload & prefetch

<link rel="preload" as="font" crossorigin="anonymous" 
    type="font/woff2" href="..." />
<link rel="preload" as="image" 
    type="image/png" href="..." />

<link rel="prefetch" href="next.html" />

network

load & render

runtime

Case study: with preload

before:

FP: 6.84 s

FMP: 9.53 s

after:

F(M)P: 8.04 s

dns-prefetch

<link rel="dns-prefetch" href="//example.com" />

preconnect

<link rel="preconnect" href="https://example.com" />

prerender

<link rel="prerender" href="https://example.com" />

network

load & render

runtime

content delivery networks

network

load & render

runtime

Plain old http caching

Cache-Control: public, max-age=31536000
  // for immutable content

Cache-Control: no-cache
  // for mutable content

service worker

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

network

load & render

runtime

Case study: with cache

No cache:

F(M)P: 8.04 s

with cache:

F(M)P: 2.62 s

Case study: with SW

No cache:

F(M)P: 8.04 s

with cache:

F(M)P: 2.62 s

with sw:

F(M)P: 0.67 s

critical rendering path

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

download

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

rendering

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

rendering

css blocks rendering

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

scripting

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

scripting

css blocks scripting

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

parsing

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

parsing

JS download blocks parsing

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

parsing

JS download blocks parsing

...unless async

<script src="nasty_ads.js" async></script>

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

parsing

JS execution blocks parsing

network

load & render

runtime

critical rendering path

index.html

styles.css

nasty_ads.js

parsing

JS execution blocks parsing

...unless defer

<script src="nasty_ads.js" defer></script>

network

load & render

runtime

use streamed html parsing

inline above-the-fold css

network

load & render

runtime

defer loading rest of css

website obesity crisis

http://idlewords.com/talks/website_obesity.htm

network

load & render

runtime

bundlephobia.com

network

load & render

runtime

network

load & render

runtime

network

load & render

runtime

https://aerotwist.com/blog/the-cost-of-frameworks/

load

parse

compile

execute

react on iphone 5s:

118 ms

network

load & render

runtime

network

load & render

runtime

https://whatdoesmysitecost.com

tree-shaking

code splitting

critical thinking & common sense

network

load & render

runtime

Case study: unbloated

Before:

CSS: 46 kB

JS: 137 kB

after:

CSS: 11 kB

JS: 78 kB

FP: 5.25 s

FMP: 5.98 s

F(M)P: 8.04 s

26% faster!

image optimization

format & compression

responsiveness via srcset attribute or <picture> element

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">

network

load & render

runtime

runtime performance

network

load & render

runtime

pixel pipeline

1 s / 60 frames = ~16 ms/frame

60 fps

style

layout

paint

composite

HTML/JS

network

load & render

runtime

https://csstriggers.com

.moving-element {
  will-change: transform;
}

network

load & render

runtime

beware of scroll event

~16 ms

style

layout

paint

composite

JavaScript

network

load & render

runtime

beware of scroll event

network

load & render

runtime

...and wheel events

...and touch events

document.addEventListener(
   'touchstart', handler, {passive: true});

requestAnimationFrame

function animationStep() {
  // animate
  requestAnimationFrame(animationStep);
}

requestAnimationFrame(animationStep);

requestIdleCallback

function heavyComputation() { /* ... */ }

requestIdleCallback(heavyComputation);

looking for ​the holy grail of MOBILE WEB PERFORMANCE

Adam Bar @NOtherDev

performance

The biggest mistake we made as a company was betting too much on HTML5 instead of native

source: statcounter

looking for ​the holy grail of MOBILE WEB PERFORMANCE

Adam Bar @NOtherDev

source: soasta

source: soasta

network throughput & latency

performance is...

server-side throughput

page load & render time, including script execution time

animations & interactions smoothness

PErceived performance (UX)

network throughput & latency

performance is...

server-side throughput

page load & render time, including script execution time

animations & interactions smoothness

PErceived performance (UX)

network

load & render

runtime

Case study: before

FP: 7.04 s

FMP: 9.76 s

network throughput & latency

network

load & render

runtime

http/2

network

load & render

runtime

www.http2demo.io

network

load & render

runtime

Case study: with http/2

Before:

FP: 7.04 s

FMP: 9.76 s

after:

FP: 6.84 s

FMP: 9.53 s

http/2 Server push

network

load & render

runtime

Preload & prefetch

network

load & render

runtime

Case study: with preload

before:

FP: 6.84 s

FMP: 9.53 s

after:

F(M)P: 8.04 s

dns-prefetch

preconnect

prerender

network

load & render

runtime

content delivery networks

network

load & render

runtime

Plain old http caching

service worker

network

load & render

runtime

Case study: with cache

No cache:

F(M)P: 8.04 s

with cache:

F(M)P: 2.62 s

looking for
the holy grail of MOBILE WEB PERFORMANCE

Adam Bar
@NOtherDev

looking for
the holy grail of MOBILE WEB PERFORMANCE

Adam Bar
@NOtherDev

network throughput
& latency