FMP, TTI, WTF? Making Sense of Web Performance

A presentation at #PerfMatters by Ire Aderinokun

FMP, TTI, COVID-19, WTF? 🤔 — FMP, TTI, COVID-19, WTF? 🤔
Making Sense of Performance Metrics Ire Aderinokun #PerfMatters 2020

Why is performance important?

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

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

Having a performant website is a competitive advantage 😎

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

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

👋 Ire Aderinokun 💻 Frontend Developer & Cofounder, BuyCoins 🇳🇬 From Lagos, Nigeria 🇬🇧 On lockdown in London, UK Google Web Expert & Cloudinary Media Expert Writer, bitsofco.de

What does performant actually mean for your site?

15 seconds 😡

🤔

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

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

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

🤔

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

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

Is there content? — Is there content?
Time to First Byte First Paint First Contentful Paint

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

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

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

Is the content meaningful? — Is the content meaningful?
Largest Contentful Paint Visually Complete Speed Index

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

👎 First Meaningful Paint 👍 Largest Contentful Paint

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

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

Is the content interactable? — Is the content interactable?
First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive

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.

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

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

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

Are interactions smooth? — Are interactions smooth?
Cumulative Layout Shift Frame Rate

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

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

jakearchibald.github.io/jank-invaders

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

What does performant actually mean for your site?

Example: News Website 🗞

Is there content? — Is there content?
Time to First Byte First Paint First Contentful Paint ✅

Is the content meaningful? — Is the content meaningful?
Largest Contentful Paint Visually Complete ✅ Speed Index ✅

Is the content interactable? — Is the content interactable?
First Input Delay & Max Potential First Input Delay Total Blocking Time Time to Interactive ✅

Are interactions smooth? Cumulative Layout Shift ✅ Frame Rate

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

How do I implement performance metrics?

✅ Choose the metrics 🤔 Define a budget 🤔 Start measuring

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

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

web.dev

perf-budget-calculator.firebaseapp.com

Use your competitors as a baseline/guide

✅ Choose the metrics ✅ Define a budget 🤔 Start measuring

✅ Choose the metrics ✅ Define a budget ✅ Start measuring

Thank you! — 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

Ire Aderinokun
@ire

1 / 59

We all know that web performance is important; faster websites are beneficial for all users, no matter the country or the internet speed. But making websites more performant can be a daunting task. With a plethora of acronyms, it can be difficult to know where to start. This talk will cover how to make sense of the confusing world of web performance.