The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.
In our final section, I’ll dig into each of the six Core Web Vitals metrics and show you which elements of your website are usually to blame for poor performance.
First Contentful Paint and Largest Contentful Paint
These two metrics are all about your above-the-fold content on the typical mobile device. (If you need help determining the location of “the fold,” Google’s PageSpeed Insights tool will show you a screenshot of what it thinks your page looks like on mobile.) Google measures how long it takes for the first text or imagery above the fold to be visible and uses that as your “First Contentful Paint” score. Then it looks at how long it takes for the largest single element (an image, headline or paragraph) above the fold to be visible.
You can speed up your First Contentful Paint score by improving your hosting infrastructure since your server’s response time is a big factor in when that first visible element is displayed. If your Largest Contentful Paint element is an image, you can either optimize your images or simply remove images entirely from the above-the-fold area on the mobile version of your site.
Speed Index
This is a similar metric to First Contentful Paint, but it measures the timing for all of the page’s content to become visible. This “fully visible” event generally takes place after First Contentful Paint but before the Time to Interactive marker described below.
Cumulative Layout Shift
This metric measures how much the layout of your site changes as each element loads. For example, if you have a big image that’s zero pixels tall when it hasn’t yet loaded, but then grows to 200 pixels when it finally downloads, that’s going to cause a big shift in how your page looks over the course of the loading sequence. Resolve this by ensuring that your HTML, CSS and JavaScript don’t cause this “jumpy” behavior, especially on mobile devices above the fold. This one may not be easy to solve without a developer, since it often involves getting under the hood with the code, but tightening up your above-the-fold design on mobile is a good start.
Time to Interactive and Total Blocking Time
Time to Interactive attempts to measure when a page is functional for the user. It doesn’t have to be 100% fully loaded, but the vast majority of JavaScript and other interactivity is up and running, so you can scroll, click buttons, interact with forms, and do everything a user might expect to do on a typical page. Because this is usually the last event in the loading sequence, this is usually the metric with the highest raw number (i.e. the number of seconds it takes your page to become fully interactive). Total Blocking Time is a simple matter of arithmetic — it’s the difference between your Time to Interactive and your First Contentful Paint values. In other words, Total Blocking Time is the duration from the point when the user sees content to the point where the user can interact with the page.
