FMP, TTI, WTF? 🤔 Making Sense of Pe fo mance Met ics r r r Ire Aderinokun Web Unleashed 2021
Slide 1
Slide 2
Ire Aderinokun 🇳🇬 🇬🇧 Cofounder & VP Engineering of Helicarrier Google Web Expert
Slide 3
Performance metrics can be confusing 😕
Slide 4
Why is performance important?
Slide 5
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-136th-outof-230-countries-for-its-high-mobile-data-price.html
Slide 6
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-136th-outof-230-countries-for-its-high-mobile-data-price.html
Slide 7
Having a performant website is a competitive advantage 😎
Slide 8
Slide 9
Having a performant website is just like having good service in the physical world.. …but your customers are less patient 😡
Slide 10
Slide 11
Users are 90% more likely to abandon a page that takes up to 5 seconds to load thinkwithgoogle.com/marketing-resources/data-measurement/mobilepage-speed-new-industry-benchmarks
Slide 12
Slide 13
What does performant actually mean for your site?
Slide 14
15 seconds 😡
Slide 15
7 seconds 😑
Slide 16
<2 seconds 🥳
Slide 17
🤔
Slide 18
The onLoad event captures when the document and all its resources have finished loading.
Slide 19
var start = Date.now(); window.addEventListener(‘load’, function() { var end = Date.now(); var loadTime = end - start; });
Slide 20
var start = Date.now(); window.addEventListener(‘load’, function() { var end = Date.now(); var loadTime = end - start; });
Slide 21
var start = Date.now(); window.addEventListener(‘load’, function() { var end = Date.now(); var loadTime = end - start; });
Slide 22
The domContentLoaded event captures when the Document Object Model has been constructed.
Slide 23
var start = Date.now(); window.addEventListener(‘domContentLoaded’, function() { var end = Date.now(); var loadTime = end - start; });
Slide 24
🤔
Slide 25
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 Cumulative Layout Shift Time to First Byte
Slide 26
Is it happening? Is it useful? Is it usable? Is it delightful? web.dev/user-centric-performance-metrics
Slide 27
Is it happening? Time to First Byte First Paint First Contentful Paint
Slide 28
Time to First Byte measures the time from when the browser requests a page to the first byte of the page being received.
Slide 29
First Paint measures the time when the first pixel is painted on the screen.
Slide 30
First Contentful Paint measures the time when the first piece of content from the DOM is rendered.
Slide 31
Is it useful? Largest Contentful Paint Visually Complete Speed Index
Slide 32
Largest Contentful Paint, a successor to First Meaningful Paint, measures the time when the largest piece of content within the viewport is rendered.
Slide 33
👎 First Meaningful Paint 👍 Largest Contentful Paint
Slide 34
Visually Complete measures the time taken for the content within the viewport to be fully rendered.
Slide 35
Speed Index is a score of how quickly visual content is rendered within the viewport.
Slide 36
Is it usable? First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive
Slide 37
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 38
Max Potential First Input Delay measures the maximum possible First Input Delay based on the duration of the longest task.
Slide 39
Total Blocking Time measures the total duration of Javascript tasks between the First Contentful Paint and Time to Interactive.
Slide 40
Time to Interactive measures the time when the main thread has had up to 5 seconds with no network activity or JavaScript tasks.
Slide 41
Is it delightful? Cumulative Layout Shift Frame Rate
Slide 42
Cumulative Layout Shift measures the shifts in layout while a page is loading.
Slide 43
web.dev/cls
Slide 44
Frame rate is the rate at which the browser can produce new frames in response to interactions and/or animations.
Slide 45
jakearchibald.github.io/jank-invaders
Slide 46
Slide 47
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 Cumulative Layout Shift Time to First Byte
Slide 48
Which metrics do I start with?
Slide 49
Start general, then dig deeper if needed
Slide 50
Slide 51
Slide 52
Core Web Vitals https://web.dev/vitals
Slide 53
Is it happening? Is it useful? Is it usable? Is it delightful?
Slide 54
Largest Contentful Paint Cumulative Layout Shift First Input Delay
Slide 55
What does performant actually mean for your site?
Slide 56
Example — Social Media Website 💬
Slide 57
Is it happening? Time to First Byte First Paint First Contentful Paint ✅
Slide 58
Is it useful? Largest Contentful Paint ✅ Visually Complete Speed Index ✅
Slide 59
Is it usable? First Input Delay & Max Potential First Input Delay Total Blocking Time ✅ Time to Interactive
Slide 60
Is it delightful? Cumulative Layout Shift ✅ Frame Rate
Slide 61
Speed Index First Contentful Paint Total Blocking Time Largest Contentful Paint Cumulative Layout Shift
Slide 62
How do I implement performance metrics?
Slide 63
✅ Choose the met ics 🤔 Define a budget r r 🤔 Start measu ing
Slide 64
r r A pe fo mance budget defines specific values to your metrics that your site should never exceed
Slide 65
Example — Social Media Website 💬 • FCP should not exceed 1.5 seconds • LCP should not exceed 2 seconds • SI should not exceed 0.43 • TBT should not exceed 300 milliseconds • CLS should not exceed 0.1
Slide 66
[{ “path”: ” “, “timings”: [ { “metric”: “first-contentful-paint”, “budget”: 1500 }, { “metric”: “largest-contentful-paint”, “budget”: 2000 }, { “metric”: “speed-index”, “budget”: 0.43 }, { “metric”: “total-block-time”, “budget”: 300 }, { “metric”: “cumulative-layout-shift”, “budget”: 0.1 } ], * / }]
Slide 67
How do I define a budget?
Slide 68
https://web.dev/metrics/
Slide 69
Slide 70
web.dev
Slide 71
Use your competitors as a baseline/guide
Slide 72
Slide 73
✅ Choose the met ics ✅ Define a budget r r 🤔 Start measu ing
Slide 74
✅ Choose the met ics ✅ Define a budget r r 🤔 Start measu ing
Slide 75
Lab Measuring vs Field Measuring
Slide 76
Measuring in the lab Using tools to simulate a page load in a consistent and controlled environment
Slide 77
Measuring in the field Getting information from when real users engage with the page
Slide 78
Is it happening? Is it useful? Is it usable? Is it delightful? TTFB FP FCP LCP SI VC FID mFID TBT TTI CLS FR Lab ✅ ✅ ✅ ✅ ✅ ✅ ❌ ✅ ✅ ✅ ✅ ✅ Field ✅ ✅ ✅ ✅ ❌ ❌ ✅ ❌ ❌ ❌ ✅ ✴
Slide 79
Is it happening? Is it useful? Is it usable? Is it delightful? TTFB FP FCP LCP SI VC FID mFID TBT TTI CLS FR Lab ✅ ✅ ✅ ✅ ✅ ✅ ❌ ✅ ✅ ✅ ✅ ✅ Field ✅ ✅ ✅ ✅ ❌ ❌ ✅ ❌ ❌ ❌ ✅ ✴
Slide 80
Is it happening? Is it useful? Is it usable? Is it delightful? TTFB FP FCP LCP SI VC FID mFID TBT TTI CLS FR Lab ✅ ✅ ✅ ✅ ✅ ✅ ❌ ✅ ✅ ✅ ✅ ✅ Field ✅ ✅ ✅ ✅ ❌ ❌ ✅ ❌ ❌ ❌ ✅ ✴
Slide 81
Slide 82
Slide 83
https://github.com/GoogleChrome/web-vitals-extension
Slide 84
https://github.com/GoogleChrome/lighthouse
Slide 85
https://developers.google.com/web/tools/chrome-user-experience-report/
Slide 86
https://developers.google.com/speed/pagespeed/insights
Slide 87
https://developers.google.com/speed/pagespeed/insights
Slide 88
✅ Choose the met ics ✅ Define a budget r r ✅ Start measu ing
Slide 89
Slide 90
Thank you! ireaderinokun.com bitsofco.de @ireaderinokun
