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

june 2017 in poland

63%

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

  • 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

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

cost-of-modules.herokuapp.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!

look for easy wins

prioritize performance

ship less code

look for easy wins

prioritize performance

ship less code

https://slides.com/adambar/mobilewebperf

Adam Bar

@NOtherDev

Made with Slides.com