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.