Use Chrome DevTools to Detect Cumulative Layout Shift
In this lesson, we explore using Chrome's DevTools to detect unwanted visual instability on a page.
We can do this using the new "Experience" heading under recorded "Performance" metrics.
To truly see the impact of "Cumulative Layout Shift", we can make use of DevTools' "Network throttling" feature to see any visual instability with the naked eye.
Jhey Tompkins: [0:00] To detect unwanted visual instabilities, first, open Chrome's Developer Tools, head to the Performance tab. Then, we can use this button that starts profiling and reloads the page.
[0:13] Once that's done, we can see various performance metrics for our page. The one we're interested in is Experience. We can view more details by exploring this bottom panel. We can dig into the specific layout shifts by clicking on the Event Log. Alternatively, on the metrics panel, you can use your mouse wheel and scroll up and down to zoom in on specific events.
[0:33] Here, we've zoomed in on this particular layout shift. If we click that layout shift, we get more details about it. Exploring that layout shift, we're able to see which elements are being moved when the layout shifts. In this example, these two buttons are being shifted by the loading of this image. We can see that the first button moves from that location to its final location.
[0:53] Cumulative Layout Shift might be harder to detect or see with the naked eye, if you have a good network connection. One way to really see the impact of Cumulative Layout Shift is to use Chrome's Network Throttling feature. If we set the throttle to Slow 3G connection, we head back to the Performance panel, and then re-profile our page, and watch for these two buttons shifting as the image loads. They're here, and then they jump.
[1:23] This would be terrible for UX if I was hitting the Not now button and then accidentally hit the Adopt a kitten button because the image caused a layout shift. That, of course, depends on how much you like kittens though. Once the page is loaded up, we can see the same layout shift being detected by DevTools.
[1:39] In review, we can use Chrome's DevTools to detect any visual instabilities that might negatively impact user experience. Exploring the details of each layout shift enables us to see which elements are shifting in our layout. To truly see how some layout shifts might be seen by the naked eye, we can use Chrome's Network Throttling feature to really see the impact.