Layout shifts are a cause of bad user experience during the page load, to eliminate it, the following actions are required:

1. Locate a layout shift to resolve

To begin optimizing layout shifts, first locate one. Prefer starting with shifting elements a top of the page first, because most often cases of layout shifts issues are when elements at top are rendered while below elements already present on page, hence causing them to shift.

Follow this article to select one:

How to locate the layout shifts?

For instance, let’s consider the layout shift from previous article:

First layout shift happened when application has rendered Header component at top of the page.

With pausing scripts execution it is visible what location had element main before header was Arendered.

When Header component is rendered, element main is shifted to bottom.

Element main it has style property top with value of header height.

At first location of element main is calculated depending on beginning of page, but when Header component appears on page, property top is moving element main depending on header layout block end.

To solve this layout shift issue it is required to investigate how Header element is rendered.

2. How to create placeholder for element

From investigating the code, Header component is rendered in Router component with using lazy load, which means that this component will be loaded with delay depending on how long it is required to load chunk where .

// Lazy load of Header component
export const Header = lazy(
		() => import(
				/* webpackMode: "lazy", webpackChunkName: "header" */
				'Component/Header'
		),
);

// Map with components declaration
[BEFORE_ITEMS_TYPE] = [
        ...
        {
            component: <Header />,
            position: 20,
            name: HEADER
        },
        ...
    ];

While chunk for Header component is loading, Router component is using Suspense with provided fallback to render all components from BEFORE_ITEMS_TYPE array. From code it is observable that fallback in this case is a tag main without loader.