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& #39;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& #39;s a ton of information about them starting at https://web.dev/vitals/ ">https://web.dev/vitals/&q... - that& #39;s where I tend to go. LCP is similar to the page loading speeds you& #39;ve probably looked at, but it tries to figure out when the primary elements are visible, which is what users care about.
There& #39;s a bunch about Largest Contentful Paint / LCP at https://web.dev/lcp/ ">https://web.dev/lcp/"... , tips on how to improve at https://web.dev/optimize-lcp/ ">https://web.dev/optimize-... , and a video with tons of details at https://www.youtube.com/watch?v=diAc65p15ag">https://www.youtube.com/watch...
First Input Delay / FID is cool because it measures responsiveness - what& #39;s the user& #39;s first impression when they try to interact with your page? For me, it& #39;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/ ">https://web.dev/fid/"... (these URLs are kinda predictable, huh?), and tips on optimizing at https://web.dev/optimize-fid/ ">https://web.dev/optimize-... . An interesting quirk of this metric is that you need a user to measure it.
Then there& #39;s the new one, Cumulative Layout Shift / CLS. It& #39;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& #39;s more about CLS at … https://web.dev/cls/ ">https://web.dev/cls/"... and on how to optimize for it at https://web.dev/optimize-cls/ ">https://web.dev/optimize-... -- and a great video with much more information here: https://www.youtube.com/watch?v=zIJuY-JCjqw">https://www.youtube.com/watch...
So, apart from Search Console, where can you see these metrics? They& #39;re coming (or in) a lot of our tools, such as Chrome Dev Tools, Lighthouse, CrUX, Page Speed Insights, etc. They& #39;re also in http://webpagetest.org"> http://webpagetest.org , and there& #39;s a JS library if you want to measure for yourself.
With these tools, there& #39;s a difference between lab (when you test it yourself) & field data (when you see what users see, on aggregate). It& #39;s probably worth checking both, so you don& #39;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">https://blog.chromium.org/2020/05/t... has some about that, as well as https://web.dev/defining-core-web-vitals-thresholds/">https://web.dev/defining-... . The doc mentions "users are 24% less likely to abandon page loads" - which is niiice.
