Why should you understand Reflow, Repaint, and Layout Shift?

When building a website UI—especially in modern SPAs or e-commerce pages—you might already optimize images, split your code, lazy load, or minify scripts. But there's one subtle yet crucial aspect many developers overlook: how stable and smooth the page appears while rendering.

You may have seen things like:

• The layout “jumps” after an image finishes loading
• A block of text suddenly moves down because of a late banner
• A button shifts right when the user is just about to click it

All of these are related to Reflow, Repaint, and Layout Shift. These behaviors directly impact CLS – Cumulative Layout Shift, one of the key metrics in Google’s Core Web Vitals.

---

What is Reflow?

Reflow (also called Layout) is when the browser recalculates the size and position of elements on the page.

Reflow is triggered when:

• A DOM element is added, removed, or modified
• CSS properties like width, font-size, position, display, etc. are changed
• Text content is updated
• The browser window is resized

For example:

element.style.width = "200px";

This forces the browser to recalculate the layout for that element and potentially for its siblings, parent, or children—hence, a reflow.

Reflow is resource-intensive. A small change can cascade and affect many parts of the layout, especially in complex structures.

---

What is Repaint?

Repaint is when the browser redraws elements visually without recalculating their layout.

Repaint happens when:

• You change styles like background-color, color, border, or visibility
• You apply shadow effects, opacity changes, etc.

Example:

element.style.backgroundColor = "blue";

No layout change needed, just visual re-rendering.

Repaint is less expensive than Reflow, but if triggered repeatedly (e.g., through poorly optimized animations), it can still hurt performance.

---

What is Layout Shift?

Layout Shift refers to elements unexpectedly moving on the screen without user interaction. If this happens too often or too late in the load process, it can lead to a very poor user experience.

This is exactly what CLS – Cumulative Layout Shift measures.

Common causes:

• Images that load without predefined dimensions
• Custom fonts replacing fallback fonts (FOIT/FOUT)
• Late-loaded ads or banners pushing content around
• JavaScript injecting DOM elements dynamically without space reservations

---

How is CLS calculated?

CLS is determined by this formula:

CLS = Total Layout Shift Score = Impact Fraction × Distance Fraction

Simply put:

• Impact Fraction: how much of the screen is affected by the shift
• Distance Fraction: how far the shifted elements move

Google recommends keeping CLS below 0.1 for good Core Web Vitals.

---

How to reduce unnecessary Reflows and Repaints

1. Avoid continuous DOM manipulations

// NOT recommended
for (let i = 0; i < 100; i++) {
  document.body.style.margin = `${i}px`;
}

// Recommended
document.body.style.margin = "100px";

2. Use CSS classes instead of inline styles

element.classList.add("expanded");

3. Read and write DOM separately

const height = element.offsetHeight; // Read layout
element.style.height = height + 10 + "px"; // Write layout

// Better: batch DOM updates in requestAnimationFrame
requestAnimationFrame(() => {
  // Make multiple changes here
});

---

How to optimize and reduce CLS

1. Always set fixed dimensions for images

<img src="/logo.png" width="200" height="100" alt="Logo" />

Or use CSS:

img {
  aspect-ratio: 2 / 1;
}

If you’re using Next.js, the next/image component does this automatically.

---

2. Prevent font swap shifts – preload fonts early

<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

Or use:

font-display: swap;

This avoids layout-blocking and reduces font-related shifts.

---

3. Reserve space for dynamic components (banners, ads...)

If a component is going to appear late (e.g., a newsletter banner), reserve its space upfront:

.banner-placeholder {
  min-height: 120px;
}

---

4. Avoid unexpected DOM insertions via JavaScript

Avoid using setTimeout to inject large UI blocks without prior layout preparation.
If animations are necessary, prefer opacity or transform, which don’t cause layout recalculations.

---

Conclusion

Reflow, Repaint, and Layout Shift are fundamental to understanding how your page behaves during render—and directly affect CLS, a major Core Web Vital.

By learning how the browser processes your layout, you can:

• Optimize performance beyond Lighthouse scores
• Prevent frustrating user experiences
• Build more stable and professional frontend interfaces

Start with the small things: define image sizes, preload fonts, and reserve layout space. Over time, your pages will load smoother, feel faster, and earn better trust from your users.