Cumulative Layout Shift (CLS): Stop losing customers to jumpy layouts

// Chrome DevTools Performance tab
// 1. Open DevTools > Performance
// 2. Start recording and reload the page
// 3. Look for "Layout Shifts" in the Experience track
// 4. Click on a shift to see which elements moved

Install Google's web-vitals library first:

npm install web-vitals

Then track CLS:

import {onCLS} from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);

  // Get details about each shift
  metric.entries.forEach(entry => {
    console.log('Layout shift:', {
      value: entry.value,
      startTime: entry.startTime,
      // Elements that shifted
      sources: entry.sources?.map(source => ({
        node: source.node,
        previousRect: source.previousRect,
        currentRect: source.currentRect
      }))
    });
  });
});

/* Bad: These trigger layout recalculation */
.box {
  transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}

/* Good: These are GPU-accelerated and don't affect layout */
.box {
  transition: transform 0.3s, opacity 0.3s;
}

/* Example: Slide-in animation */
/* Bad */
@keyframes slideIn {
  from { left: -300px; }
  to { left: 0; }
}

/* Good */
@keyframes slideIn {
  from { transform: translateX(-300px); }
  to { transform: translateX(0); }
}

<!-- Preload the most critical font file -->
<link
  rel="preload"
  href="/fonts/roboto-regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

<!-- Only preload 1-2 critical fonts
     Loading too many delays LCP -->

<!-- Show placeholder while content loads -->
<div class="article-skeleton">
  <div class="skeleton-image"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
</div>

<style>
.skeleton-image {
  width: 100%;
  height: 300px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>

/* Tell browser this element won't affect outside layout */
.article-card {
  contain: layout style paint;
  /* Browser can optimise rendering and prevent shifts */
}

.sidebar-widget {
  contain: size layout style paint;
  /* Fixed size, fully isolated */
  width: 300px;
  height: 400px;
}

import {onCLS} from 'web-vitals';

onCLS((metric) => {
  // Only report poor CLS (> 0.1)
  if (metric.value > 0.1) {
    // Get the largest shift
    const largestShift = metric.entries.reduce((max, entry) =>
      entry.value > max.value ? entry : max
    );

    // Identify the element that shifted most
    const shiftingElement = largestShift.sources?.[0];

    analytics.track('poor_cls', {
      cls_value: metric.value,
      largest_shift_value: largestShift.value,
      element_selector: getSelector(shiftingElement?.node),
      shift_time: largestShift.startTime,
      page_url: location.pathname
    });
  }
});

function getSelector(node) {
  if (!node) return 'unknown';
  if (node.id) return `#${node.id}`;
  if (node.className) return `.${node.className.split(' ')[0]}`;
  return node.tagName.toLowerCase();
}