How to Use the Chrome DevTools Rendering Tab to Highlight Core Web Vitals Layout Shifts

Cumulative Layout Shift (CLS) is a critical Core Web Vitals metric that measures visual stability. When a webpage loads and elements suddenly jump around—often because an image loaded late or a dynamic ad pushed the text down—it creates a frustrating user experience. Tracking down exactly which DOM element is causing the shift can be tedious. Fortunately, Google Chrome DevTools includes a “Rendering” tab that visually highlights these problematic layout shifts in real time.

Why Use the Layout Shift Regions Tool?

Instead of guessing which CSS block is pushing your content around, the Layout Shift Regions tool visually flashes a bright blue overlay across any element that abruptly changes its position during the page lifecycle. This allows front-end developers to instantly spot missing width and height attributes on images, or dynamically injected content that lacks a reserved container size.

Step 1: Open the Rendering Tab

The Rendering panel is hidden by default inside the DevTools Drawer.

1. Open Google Chrome and navigate to the website you want to debug.
2. Right-click anywhere on the page and select Inspect to open Developer Tools.
3. Press Esc on your keyboard to open the “Drawer” panel at the bottom of the DevTools window.
4. In the top-left corner of the Drawer, click the three vertical dots (More Tools icon).
5. Select Rendering from the drop-down menu.

Step 2: Enable Layout Shift Highlights

Once the Rendering tab is open, you can activate the visual debugging tools.

1. Scroll down the list of checkboxes in the Rendering tab until you find the option labeled Layout Shift Regions.
2. Check the box to enable the feature.

Step 3: Trigger and Observe Shifts

You must now interact with the page or reload it to observe the shifts.

1. Perform a hard refresh of the web page.
2. Watch the screen carefully as the assets load. Any DOM element that causes a layout shift will flash brightly with a blue/purple overlay.
3. Scroll down the page. Sometimes layout shifts occur post-load when lazy-loaded images or asynchronous ads enter the viewport. These will also flash blue when they push surrounding content.

Step 4: Debug Paint Flashing (Optional)

While you have the Rendering tab open, you can also check for inefficient rendering.

1. Check the box labeled Paint flashing (located just above the Layout Shift option).
2. This feature highlights areas of the page in green whenever the browser is forced to repaint them. Excessive green flashing during CSS animations indicates severe performance bottlenecks.

By regularly utilizing the DevTools Rendering tab, developers can easily identify and eliminate the jagged, shifting content blocks that negatively impact their site’s Core Web Vitals score.