How we identify our LCP (Largest Contentful Paint) element and get quick feedback

We’re going to use the Javascript code snippet from web.dev/lcp and the chrome extension cjs which will inject that Javascript into the page.

Step 1. Add cjs chrome extension to your Chrome browser (any other JS injecting extensions will likely work fine. this is the one I use.)

Step 2. Navigate to the page you want to measure. Let’s do www.amnesty.ie/end-direct-provision

Step 3. Copy the code snippet from web.dev/lcp, open the cjs Chrome Extension and paste it in and click save

image of the code snippet pasted into the cjs Chrome Extension

Step 4. Open up the Chrome devTools by right-clicking anywhere on the page and choosing “Inspect”

Step 5. Click on the console tab

Step 6. Reload the page

Step 7. In the console open up the latest “LCP Candidate” objects that appear and find the element property. Hovering value will highlight the impacted element. You want to only look at the last Candidate in the list.

image of element highlighted on screen on the right and output from the console on the right

You can also find this using the performance tab of devTools but we found that quite slow and this was much faster feedback.