Read on Twitter
Since the Core Web Vitals are now in Search Console, I wanted to do a quick round-up of the tidbits I found while researching. Maybe this'll save you a few minutes, or encourage you to test, or to watch a video. How much time do you invest in being able to save time? Focus, John
The Core Web Vitals include loading, interaction, and annoyance (?) metrics: Largest Contentful Paint (LCP = loading), First Input Delay (FID = interaction), Cumulative Layout Shift (CLS = stability, the lack of which I find annoying :-)).
There's a ton of information about them starting at https://web.dev/vitals/ - that's where I tend to go. LCP is similar to the page loading speeds you've probably looked at, but it tries to figure out when the primary elements are visible, which is what users care about.
There's a bunch about Largest Contentful Paint / LCP at https://web.dev/lcp/ , tips on how to improve at https://web.dev/optimize-lcp/ , and a video with tons of details at
First Input Delay / FID is cool because it measures responsiveness - what's the user's first impression when they try to interact with your page? For me, it's usually the point at which I turn back and try other sites, even if I give them the benefit of a doubt during loading.
For FID we have docs at https://web.dev/fid/ (these URLs are kinda predictable, huh?), and tips on optimizing at https://web.dev/optimize-fid/ . An interesting quirk of this metric is that you need a user to measure it.
Then there's the new one, Cumulative Layout Shift / CLS. It's calculated by taking the fraction of the page that moves during loading times the fraction of the position it moves. I find it totally annoying when pages do this, especially if I scroll through a longer one. Ugh. Bye.
There's more about CLS at … https://web.dev/cls/ and on how to optimize for it at https://web.dev/optimize-cls/ -- and a great video with much more information here:
So, apart from Search Console, where can you see these metrics? They're coming (or in) a lot of our tools, such as Chrome Dev Tools, Lighthouse, CrUX, Page Speed Insights, etc. They're also in http://webpagetest.org , and there's a JS library if you want to measure for yourself.
With these tools, there's a difference between lab (when you test it yourself) & field data (when you see what users see, on aggregate). It's probably worth checking both, so you don't miss anything obvious.
The buckets for green to red are based on various studies and meant to be achievable (and already achieved). https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html has some about that, as well as https://web.dev/defining-core-web-vitals-thresholds/ . The doc mentions "users are 24% less likely to abandon page loads" - which is niiice.
That's pretty much everything I've run into so far. Adding new metrics is always hard, but it's nice to see these being used in so many places.
Caveat: I'm not on the Chrome team, this is all just based on the public documentation!
Caveat: I'm not on the Chrome team, this is all just based on the public documentation!
