What is CLS? The Unexpected Punch While Browsing and How to "Prevent" It Effectively

Have you ever been engrossed in reading an article, or just about to click "Add to Cart," when suddenly, everything on the page unexpectedly jumps around? That frustrating, annoying feeling when content "tricks" you like that is the "punch" of Cumulative Layout Shift (CLS)! CLS is not just an annoyance; it's also one of the three critical Core Web Vitals metrics Google uses to evaluate user experience on your website.

What is CLS? Understanding the "Unexpected Punch"

Cumulative Layout Shift (CLS) measures how much elements on a page shift unexpectedly as users interact or as the page loads. In other words, it's the sum of all unexpected layout shifts that visible elements experience throughout the page's lifecycle.

How is the CLS Score Calculated?

The closer the CLS score is to 0, the better. Google categorizes scores as follows:

• Good: CLS ≤ 0.1
• Needs Improvement: 0.1 < CLS ≤ 0.25
• Poor: CLS > 0.25

A high CLS score indicates that your website provides an unstable experience, prone to confusing and frustrating users. This not only affects user satisfaction but can also negatively impact SEO, as Google prioritizes pages with good user experience.

Why Does Your Website "Jump Around"? Common CLS Culprits

Many reasons can cause CLS, but the most common ones include:

• Images or videos without explicit dimensions: The browser doesn't know in advance how much space to reserve for them, so when they load, the layout gets pushed around.
• Ads, iframes, or embedded content without fixed dimensions: Similar to images, these components are often loaded dynamically and can change size, causing layout shifts.
• Slow-loading fonts (FOUT/FOIT): When custom fonts load slowly, the browser displays a fallback font. Then, when the main font loads, it might have different dimensions, causing text to "jump" to fit the new font.
• Dynamically injected content: For example, cookie banners, pop-ups, or custom content inserted into the page after it has partially rendered without reserving space beforehand.
• Actions awaiting network responses: Some user actions (e.g., search) might trigger network requests, and the returned results could alter the layout.

Fighting the "Punch": How to Effectively Prevent and Optimize CLS

Fortunately, there are many ways to "prevent" and minimize CLS:

• Always set dimensions (width and height) for images and videos:

  This is the simplest and most effective method. The browser will know in advance how much space to reserve for them. You can use HTML attributes or CSS aspect-ratio.

  <!-- Using width and height attributes -->
  <img src="image-example.jpg" width="600" height="400" alt="Image description">
  
  <!-- Or using CSS aspect-ratio -->
  <style>
    img {
      width: 100%; /* Keep width flexible */
      height: auto; /* Auto height */
      aspect-ratio: 16 / 9; /* 16:9 aspect ratio */
    }
  </style>
  <img src="video-thumbnail.jpg" alt="Video description">

• Reserve space for ads, iframes, and embedded content:

  If you use dynamic ads, ensure you reserve enough space for them by setting minimum height or width (min-height, min-width) or a fixed size. This helps prevent them from pushing surrounding content.

• Load fonts efficiently:
  • Use font-display: swap in CSS so the browser displays a fallback font first, then swaps to the main font once it loads.
  • Preload important fonts using <link rel="preload" href="/fonts/myfont.woff2" as="font" crossorigin> so they load earlier.
  • Use CSS properties like size-adjust, ascent-override, descent-override, line-gap-override to adjust the fallback font's size to be as close to the main font as possible.
• Avoid injecting dynamic content above existing content:

  If you absolutely must inject content (e.g., a cookie banner), ensure you've reserved space for it beforehand or inject it at the bottom of the page, where it causes the least disruption.

• Use CSS transform property for animations:

  When creating animations, instead of using properties like top, left, width, height (which cause reflow), prioritize using transform (such as translate, scale). transform operates on the GPU and does not cause layout changes.

Conclusion: Stable Website, Satisfied Users

Optimizing CLS is not just a technical requirement to please Google's algorithms; more importantly, it's how we show respect to our users. A smooth, stable website, free from unexpected "jumps," provides a pleasant browsing experience, retains visitors longer, and improves conversion rates.

Take some time today to check and improve your website's CLS score using tools like Lighthouse or PageSpeed Insights. Don't let layout "punches" ruin the excellent experience you want to provide for your users!