<aside> 🧠 This guide uses the Performance Insights feature of Google Chrome development tools. Refer to this guide to learn how to use it!

How to get FCP and LCP readings?

</aside>

A layout shift is an unintentional (not caused by transform or scroll) shift in an element position a page between animation frames. AKA, the element should not jump, while the page is loading. To investigate where they occur, the following actions are required:

1. Measure throttled page load

For measuring CLS it is preferred to use Performance insights tool with setting throttling to Fast 3G.

<aside> 💁🏻 Lowering internet speed with network throttling will help for future investigation of layout shifts in Performance insights tool.

</aside>

After measure is done, in right section there is insights tab where will be shown CLS score for current page.

CLS score is computed in summary of all layout shifts on page during application loading.

2. Locate elements causing layout shifts

Use the Layout Shifts track to identify potential issues and causes of layout shifts.

<aside> 📝 Layout shifts track can have some delay on showing when shift was made, so it can happen earlier then it shown in track.

</aside>

It is possible to click on screenshots below track to view the layout shift's details, identify potential root causes and impacted elements.

<aside> ❗ Layout shifts screenshots can show not correct element shifts, so it is advised to not consider them as helpers in indicating layout shifts

</aside>

To approximately see on what moments layout shifts where done, it is possible to use controls at the top to control replay of recording.

This is the case where setting network throttling can show in more accurate way how the application was rendering during measuring.

It is advised to always start improving CLS metric in order from beginning till end of application rendering session. Because removing of jumping element can cause other elements to behavior differently and will be required to fix them also.

3. Note shifting element location and position

Depending on gathered information about layout shifts from second section, it is now known when layout shifts happens and can be used inspect element which are causing shifts.

Lets find location of element that is causing first major layout shift:

With help of layout shifts track screenshots shows visual representation of layout shifts element. Here it is possible to indicate approximately which element was shifted.

On screenshot the pink rectangle shows which element has been shifted.

<aside> ❗ Section elements impacted can show which element was shifted, but often it doesn’t show correct shifting elements or can’t determine them at all.

</aside>

To inspect shifting elements it is required to:

1. Set network throttling to slow 3G
2. Open Source tab
3. Reload page
4. Click on pause button to catch moment when layout shift happened.

When script execution is stopped, it is possible to inspect element to see why element was shifted.

In example below, after clicking on script execution pause, it is noticeable that when header appears it is shifting element ‘main’ down and this is reason of layout shift.

<aside> 🎉 This is how to measure CLS metric on page and find location of elements causing it!

</aside>