Chrome DevTools: View Layout Shift Regions to improve page render performance

A Layout Shift can occur throughout a pages lifecycle. For example, a lazily loaded cookie banner at the top of the page may cause everything below it to shift downwards, this is known as a layout shift and can have negative side effects:

• It can be a jarring experience for the user since page elements are moving around in an unexpected way.
• It can eat into your frame budget which has a knock-on effect on other render related operations. This can translate into page jank.

The Layout Shift Regions feature can help identify where and when such Layout Shifts occur. To enable:

1. Open up the Rendering Drawer in DevTools. (Cmd + Shift + P > Type render)
2. Enable the Layout Shift Regions checkbox

Navigate to popular sites like disney.com, techcrunch.com, ft.com etc. to observe Layout Shifting. Layout Shifts are highlighted blue on the page.

This feature is currently in Chrome Canary and will be making its way to stable soon