How we identify our LCP (Largest Contentful Paint) element and get quick feedback
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.