Minimizing layout shifts helps improve SEO and creates a more pleasing user experience. Learn how to fix layout shifts in SSR Next.js apps.

Google tweaks its core search algorithm on an ongoing basis, and soon, overall web performance will play a bigger factor in page rankings. Google will evaluate the following three metrics collected from real users when determining rankings:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

These metrics together comprise Google’s Web Vitals initiative. In this post, we will discuss CLS specifically, with special focus on how to prevent layout shifts in Next.js apps.

What is CLS?

Google defines Cumulative Layout Shift as follows:

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

In the simplest terms, CLS is a measure of the shifts between components when a page loads. It’s ultimately represented by a layout shift score, calculated as below:

layout shift score = impact fraction * distance fraction

Where impact fraction is the sum of the area of impact of all the unstable elements between two frames, and distance fraction is the distance of an element’s or component’s movement between two frames.

Layout shifts are commonly caused by ads/embeds, dynamically injected content, and images without dimensions. Let’s explore how to handle CLS for each of these cases.

#next #react #seo #web-development #javascript