Cumulative Layout Shift Optimization for Shopify

With the introduction of the “Web Vitals” overview in the Search Console, the previously unknown ranking factor “Cumulative Layout Shift” (CLS) has also gained in importance.

It is not so easy to describe what it is: The “Cumulative Layout Shift” value describes the stability of a web page during the loading process. This sounds quite complicated, but everyone has seen a layout shift before. When loading the content, it jumps back and forth or is shifted for a few seconds or dropdown menus are displayed expanded for a short time, although they should have been closed.

All these optical effects are no longer tolerated by Google and cause penalties in the ranking. Of course, removing them now at the latest makes absolute sense.

What is Cumulative Layout Shift (CLS)?

As explained before, the value of the Cumulative Layout Shift (CLS) describes the visual stability during the loading process of the Shopify store. Google wants that there are no major jumps in the design of the page when it loads.

In addition, unexpected changes on the page also play a role in the loading process. For example, if an image loads asynchronously slowly and shifts the contents of the page significantly, this would be a behavior that would result in very bad values for the Cumulative Layout Shift.

A typical scenario would be when you start reading the text on a page, for example, and then an image builds up under the headline, which then pushes the text further down.

Especially on small displays this is very annoying for readers, because they have to scroll down to find the right place to continue reading.

Causes of Cumulative Layout Shift

The behavior can only be due to three causes:

• The web server is so slow that the content is not served fast enough.
• The code is so bad that it can’t load the content fast enough.
• The code is bad in itself and causes the shifts, although the web server would be fast enough.

Often it is a combination of the first two points. Code that is bad in itself should be able to be eliminated.

Strictly speaking, this is almost a historical problem, as load time optimization has become increasingly important in recent years.

Especially for online stores that have existed for a few years, optimization is therefore difficult, because often not only the design must be optimized, but also the delivery of the content is often slow. The problem is often best solved by switching to a modern software like Shopify, or if this is already used, with a relaunch of the Shopify theme.