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.
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
Time to Interactive and Total Blocking Time