, 11 tweets, 4 min read Read on Twitter
We are changing how we measure #WebPerformance at @airbnb, @airbnbeng. Historically we’ve used Time To First Interactive. We now track a Page Performance Score based off of four user-centric metrics: TTFCP, TTFMP, FID, and TBT.
🖌️Time To First Contentful Paint (TTFCP) measures when “when the browser renders the first bit of content from the DOM”. This provides valuable user feedback that something is happening. developers.google.com/web/tools/ligh…
🖼️Time To First Meaningful Paint (TTFMP) measures when “the primary content of the page is visible”. This indicates to the user that the page is visually ready. developers.google.com/web/tools/ligh…
We used a custom approach for TTFMP that recursively requestAnimationFrame + getElementById to find what we consider meaningful for each page.
👇First Input Delay (FID) measures the “time from first user interaction to browser response”. A fast FID helps create a delightful experience. Conversely, a slow FID is frustrating. developers.google.com/web/updates/20…
We used the FID polyfill available here github.com/GoogleChromeLa…
🤩Total Blocking Time (TBT) measures the blocking portion of each long task that occurs after TTFCP. A low TBT means that users can continue to interact with the page responsively and that animations are smooth.
Using the Long Tasks API we compute Total Blocking Time like this (expanded into two iterators for illustration, normally a single .reduce 🤓)….
We then create a 0-100 score from these four metrics. Similar to @chromelighthouse we use p95 values, log normal distributions, median values, falloffs, etc. Think of Page Performance Score as Lighthouse, but with real user data. #DistributedLighthouse
We were inspired to create the Page Performance Score by this article and want to thank all of our friends at Google and all of the internal engineers who made this all possible.
developers.google.com/web/fundamenta…
A more in-depth blog post will be coming soon, after we have more internal data. I'm also looking for opportunities to share this at conferences. Hopefully @perfmattersconf, which was highly influential to our thinking.
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Andrew Scheuermann
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!