Cumulative Layout Shift

Browsers do not wait to receive all webpage files before beginning to render the page. Instead, browsers will begin rendering once some elements are ready. For example, the webpage's main text may load quickly and will render first, but the header files, such as the logo or navigation CSS, may load slowly and will render later. As the browser loads additional files, executes additional code, and displays new elements, previously rendered elements may need to move from their initial position to a new position to make room for those new elements. Elements moving from one position to another can make it harder for visitors to use the page.