Finding the LCP node with Chrome DevTools

Official documentation about Largest Contentful Paint is super interesting and explicit. But it misses one thing: How to identify the largest node / block / image /text ?

Chrome DevTools allows you to find which node you should optimize. Simply follow the steps below.

• Open Chrome
• Open the page you want to find the LCP block on
• Open Chrome DevTools
  • If you are on a PC, type Ctrl+Shift+C
  • If you are on a Mac, just type the following hieroglyph:

• Follow the steps recorded in this video or follow steps written below the video if you need more details.

• Open the tab “Performance”, between “Network” and “Memory”

• Two options to record all the events and other data
  • Option #1 – Record and manually reload and stop
    • Click on the Record icon and reload manually the page by clicking on the icon next to the URL, then come back in DevTools and click on the blue button “stop”
  • Option #2 – Automatic record, reload and stop
    • Click on the Reload icon

Which option choosing ?

It depends… Sometimes you will have to interact with the page to get the LCP. In this case you should choose to record manually.

• The LCP tag should be in the Timings row. This section is below Frames and Interactions. If you don’t see it immediately, try by scrolling below Interactions.

• Click on LCP, it will show you which element is considered as the LCP

• Click on the related node (if present), it will send you directly to the node in the source code of the page

I hope it is clear enough. If you have any question, feel free to contact me on Twitter.