How to identify your CLS (Cumulative Layout Shift) problem elements

We’re going to use the Javascript code snippet from web.dev/cls 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.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

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 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

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

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!