Using Chrome Developer Tools to find Web Vitals Largest Contentful Paint and Cumulative Layout Shift

First and most importantly a big thank you to Brodie Clark for tweeting about this in the first place

The video below shows you how to use Chrome Dev Tools and the performance section to get a better understanding of the Largest Contentful Paint and Cumulative Layout Shift elements of the new Web Vitals metrics

In the video you see how to

• Setup Chrome Dev tools to capture Cumulative Layout Shift
• Find the element that is the Contentful Layout Paint
• See which elements Google sees as ‘shifting’
• See the total blocking time which is a useful way of understanding First Input Delay

We used a product page from the Next web site as an example as it’s similar layout used on many ecommerce websites