Docs home / Issue summary

Issue summary

HTML elements responsible for metric scores

The issue summary is available for Cumulative Layout Shift, First Input Delay, Largest Contentful Paint and Interaction to Next Paint metrics. This helps you zero in on poor scores and understand exactly what element is causing the user experience issue.

The debug string itself can look a bit confusing initially but really it's just a set of directions to navigate through the DOM to the element that is causing the issue.

The best way to make use of it is to click on one of the debug strings, which then filters the dashboard and allows you to see what paths that element is rendered on. Open another tab and vist one of those paths.

Note that in this example, the Chrome browser is being used. Within the page you have opened, right click your mouse and select the Inspect option. This will open up the Chrome Dev Tools in the Elements tab. Then, using your keyboard, select Command + F or Control + F and this will reveal a search input where you can paste the debug string. Chrome will then very helpfully hightlight the element both in the HTML code and in the view. Now you've found the cause of the issue and can quickly get to work to fix the problem!

Using Chrome Dev Tools to paste in the debug string