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.amensty.ie/end-direct-provision
Step 3. Copy the code snippet from web.dev/cls, open the cjs Chrome Extension and paste it in and click save
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 and scroll around (often your layout shifts happen when users are scrolling around)
Step 7. In the console open up the “LayoutShift” objects that appear and find the sources property. Hovering over the node value within sources will highlight the impacted element. This is the element that moved
Step 8. Likely whatever caused this element to shift is something coming in directly above it so start experimenting with adding fixed heights and widths to elements that you think caused this shift!