FMP, TTI, COVID-19, WTF? 🤔
Making Sense of Performance Metrics Ire Aderinokun #PerfMatters 2020
Slide 1
Slide 2
Why is performance important?
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
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
Having a performant website is a competitive advantage 😎
Slide 6
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 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 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
What does performant actually mean for your site?
Slide 13
15 seconds 😡
Slide 14
🤔
Slide 15
The onLoad event captures when the document and all its resources have finished loading.
Slide 16
var start = Date.now(); window.addEventListener(‘load’, function() { var end = Date.now(); var loadTime = end - start; });
Slide 17
The domContentLoaded event captures when the Document Object Model has been constructed.
Slide 18
🤔
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
Is there content? Is the content meaningful? Is the content interactable? Are interactions smooth? web.dev/user-centric-performance-metrics
Slide 21
Is there content?
Time to First Byte First Paint First Contentful Paint
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
First Paint measures the time when the first pixel is painted on the screen.
Slide 24
First Contentful Paint measures the time when the first piece of content from the DOM is rendered.
Slide 25
Is the content meaningful?
Largest Contentful Paint Visually Complete Speed Index
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
👎 First Meaningful Paint 👍 Largest Contentful Paint
Slide 28
Visually Complete measures the time taken for the content within the viewport to be fully rendered.
Slide 29
Speed Index is a score of how quickly visual content is rendered within the viewport.
Slide 30
Is the content interactable?
First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive
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
Max Potential First Input Delay measures the maximum possible First Input Delay based on the duration of the longest task.
Slide 33
Total Blocking Time measures the total duration of Javascript tasks between the First Contentful Paint and Time to Interactive.
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
Are interactions smooth?
Cumulative Layout Shift Frame Rate
Slide 36
Cumulative Layout Shift measures the shifts in layout while a page is loading.
Slide 37
Frame rate is the rate at which the browser can produce new frames in response to interactions and/or animations.
Slide 38
jakearchibald.github.io/jank-invaders
Slide 39
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
What does performant actually mean for your site?
Slide 42
Example: News Website 🗞
Slide 43
Is there content?
Time to First Byte First Paint First Contentful Paint ✅
Slide 44
Is the content meaningful?
Largest Contentful Paint Visually Complete ✅ Speed Index ✅
Slide 45
Is the content interactable?
First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive ✅
Slide 46
Are interactions smooth? Cumulative Layout Shift ✅ Frame Rate
Slide 47
Speed Index First Contentful Paint Time to Interactive Largest Contentful Paint Cumulative Layout Shift
Slide 48
How do I implement performance metrics?
Slide 49
✅ Choose the metrics 🤔 Define a budget 🤔 Start measuring
Slide 50
A performance budget defines specific values to your metrics that your site should never exceed.
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
web.dev
Slide 53
perf-budget-calculator.firebaseapp.com
Slide 54
Use your competitors as a baseline/guide
Slide 55
Slide 56
✅ Choose the metrics ✅ Define a budget 🤔 Start measuring
Slide 57
Slide 58
✅ Choose the metrics ✅ Define a budget ✅ Start measuring
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
