Skip to main content

Detecting Layout Shifts

5 min read Last updated: March 2026

Layout shifts occur when elements move unexpectedly on the page, often due to late-loading content, missing dimensions, or CSS issues. QA Proof helps you detect and fix them.

What Causes Layout Shifts?

  • Images without explicit width and height
  • Dynamically injected content (ads, banners, embeds)
  • Web fonts loading and causing text reflow
  • CSS changes that affect element positioning
  • JavaScript that modifies the DOM after initial render

How QA Proof Detects Shifts

QA Proof compares element positions between the design baseline and the live page. It identifies:

  • Vertical shifts: Elements pushed down or up from expected positions
  • Horizontal shifts: Elements misaligned left or right
  • Size changes: Elements that are larger or smaller than designed
  • Missing elements: Components that should be present but aren't

Viewing Shift Reports

In your test results:

  1. Look for issues tagged as "Layout Shift"
  2. Click on an issue to see the exact pixel offset
  3. Use the overlay view to see where elements have moved
  4. Check the severity score — large shifts are flagged as critical

Fixing Common Layout Shifts

  • Always set width and height on images and videos
  • Use font-display: swap or preload critical fonts
  • Reserve space for dynamic content with placeholder elements
  • Avoid inserting content above existing content after page load

Monitoring CLS Score

QA Proof tracks your Cumulative Layout Shift (CLS) score over time, helping you maintain good Core Web Vitals performance.