FMP, TTI, WTF? Making Sense of Web Performance

A presentation at #PerfMatters in March 2020 in by Ire Aderinokun

Slide 1

Slide 1

FMP, TTI, COVID-19, WTF? πŸ€”

Making Sense of Performance Metrics Ire Aderinokun #PerfMatters 2020

Slide 2

Slide 2

Why is performance important?

Slide 3

Slide 3

In Nigeria, the average cost of 1GB of data is N850, 3% of minimum wage. That’s more than 1 hour of work 🀯 https://www.ispreview.co.uk/index.php/2019/03/uk-ranked-136thout-of-230-countries-for-its-high-mobile-data-price.html

Slide 4

Slide 4

In the US, minimum wage employees have to work almost 2 hours to earn enough for 1GB of mobile data 🀯 https://www.ispreview.co.uk/index.php/2019/03/uk-ranked-136thout-of-230-countries-for-its-high-mobile-data-price.html

Slide 5

Slide 5

Having a performant website is a competitive advantage 😎

Slide 6

Slide 6

Slide 7

Slide 7

Having a performant website is just like having good service in the physical world.. …but your customers are less patient 😑

Slide 8

Slide 8

Slide 9

Slide 9

Users are 90% more likely to abandon a page that takes up to 5 seconds to load thinkwithgoogle.com/marketing-resources/data-measurement/ mobile-page-speed-new-industry-benchmarks

Slide 10

Slide 10

Slide 11

Slide 11

πŸ‘‹ Ire Aderinokun πŸ’» Frontend Developer & Cofounder, BuyCoins πŸ‡³πŸ‡¬ From Lagos, Nigeria πŸ‡¬πŸ‡§ On lockdown in London, UK Google Web Expert & Cloudinary Media Expert Writer, bitsofco.de

Slide 12

Slide 12

What does performant actually mean for your site?

Slide 13

Slide 13

15 seconds 😑

Slide 14

Slide 14

πŸ€”

Slide 15

Slide 15

The onLoad event captures when the document and all its resources have finished loading.

Slide 16

Slide 16

var start = Date.now(); window.addEventListener(β€˜load’, function() { var end = Date.now(); var loadTime = end - start; });

Slide 17

Slide 17

The domContentLoaded event captures when the Document Object Model has been constructed.

Slide 18

Slide 18

πŸ€”

Slide 19

Slide 19

Max Potential First Input Delay Largest Contentful Paint First Paint First Input Delay Total Blocking Time First Contentful Paint Time to Interactive First Meaningful Paint Visually Complete Time to First Byte

Slide 20

Slide 20

Is there content? Is the content meaningful? Is the content interactable? Are interactions smooth? web.dev/user-centric-performance-metrics

Slide 21

Slide 21

Is there content?

Time to First Byte First Paint First Contentful Paint

Slide 22

Slide 22

Time to First Byte measures the time from when the browser requests a page to the first byte of the page being received.

Slide 23

Slide 23

First Paint measures the time when the first pixel is painted on the screen.

Slide 24

Slide 24

First Contentful Paint measures the time when the first piece of content from the DOM is rendered.

Slide 25

Slide 25

Is the content meaningful?

Largest Contentful Paint Visually Complete Speed Index

Slide 26

Slide 26

Largest Contentful Paint, a successor to First Meaningful Paint, measures the time when the largest piece of content within the viewport is rendered.

Slide 27

Slide 27

πŸ‘Ž First Meaningful Paint πŸ‘ Largest Contentful Paint

Slide 28

Slide 28

Visually Complete measures the time taken for the content within the viewport to be fully rendered.

Slide 29

Slide 29

Speed Index is a score of how quickly visual content is rendered within the viewport.

Slide 30

Slide 30

Is the content interactable?

First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive

Slide 31

Slide 31

First Input Delay measures the delay between the time a user can attempt to interact with a part of the site, and the time that the interface is able to respond to that interaction.

Slide 32

Slide 32

Max Potential First Input Delay measures the maximum possible First Input Delay based on the duration of the longest task.

Slide 33

Slide 33

Total Blocking Time measures the total duration of Javascript tasks between the First Contentful Paint and Time to Interactive.

Slide 34

Slide 34

Time to Interactive measures the time when the main thread has had up to 5 seconds with no network activity or JavaScript tasks.

Slide 35

Slide 35

Are interactions smooth?

Cumulative Layout Shift Frame Rate

Slide 36

Slide 36

Cumulative Layout Shift measures the shifts in layout while a page is loading.

Slide 37

Slide 37

Frame rate is the rate at which the browser can produce new frames in response to interactions and/or animations.

Slide 38

Slide 38

jakearchibald.github.io/jank-invaders

Slide 39

Slide 39

Slide 40

Slide 40

Max Potential First Input Delay Largest Contentful Paint First Paint First Input Delay Total Blocking Time First Contentful Paint Time to Interactive First Meaningful Paint Visually Complete Time to First Byte

Slide 41

Slide 41

What does performant actually mean for your site?

Slide 42

Slide 42

Example: News Website πŸ—ž

Slide 43

Slide 43

Is there content?

Time to First Byte First Paint First Contentful Paint βœ…

Slide 44

Slide 44

Is the content meaningful?

Largest Contentful Paint Visually Complete βœ… Speed Index βœ…

Slide 45

Slide 45

Is the content interactable?

First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive βœ…

Slide 46

Slide 46

Are interactions smooth? Cumulative Layout Shift βœ… Frame Rate

Slide 47

Slide 47

Speed Index First Contentful Paint Time to Interactive Largest Contentful Paint Cumulative Layout Shift

Slide 48

Slide 48

How do I implement performance metrics?

Slide 49

Slide 49

βœ… Choose the metrics πŸ€” Define a budget πŸ€” Start measuring

Slide 50

Slide 50

A performance budget defines specific values to your metrics that your site should never exceed.

Slide 51

Slide 51

Example: News Website πŸ—ž β€’ FCP should not exceed 1.5 seconds β€’ LCP should not exceed 2 seconds β€’ SI should not exceed 0.43 β€’ TTI should not exceed 4 seconds β€’ CLS should not exceed 0.1

Slide 52

Slide 52

web.dev

Slide 53

Slide 53

perf-budget-calculator.firebaseapp.com

Slide 54

Slide 54

Use your competitors as a baseline/guide

Slide 55

Slide 55

Slide 56

Slide 56

βœ… Choose the metrics βœ… Define a budget πŸ€” Start measuring

Slide 57

Slide 57

Slide 58

Slide 58

βœ… Choose the metrics βœ… Define a budget βœ… Start measuring

Slide 59

Slide 59

Thank you!

🌐 Where to find me ireaderinokun.com bitsofco.de @ireaderinokun

πŸ“š Resources web.dev/user-centric-performance-metrics calibre.app developers.google.com/web/tools/lighthouse perf-budget-calculator.firebaseapp.com