/dev tips

(201) Extract all CSS for an element Web Audio Inspector (203)

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

16th August 2019
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:

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

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.