«   Previous tip Next tip   »

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.

«   Previous tip Next tip   »

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