Planet Of The APIs: A Tale of Performance & User Experience

https://www.youtube.com/watch?v=eUW-JF9us0Q

With MOSAIC the internet was accessible to the average person. 65M users in 18mo. 4.1billion users online today. November 2016—mobile and tablet usage exceeded desktop for the first time.

One of the toughest things we have to deal with is resource load.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9a04348f-c26d-493c-9710-c745f0af95a4/IMG_20181026_110757.jpg

https://twitter.com/csswizardry/status/1055423705709535233

Per-request, JS differs over mobile and desktop by ~1Kb per request. For images it's MUCh higher.

This is the reality. Pages are taking a long time to load. 77% of pages take ~19s to load. You can't improve what you can't measure. Web performance APIs are the browser's solution to real world measurements.

Paint Timing API

First Paint—when the browser has started to render the page.

First Contentful Paint—when the browser first renders text, image, non-white canvas or SVG.

First Meaningful Paint—paint that follows the biggest layout change.

Intersection Observer API

Visibility and position of target DOM elements relative to an intersection root.

Media Capabilities API