No layout shift

Text that changes shouldn't push the page around. A three-line trick GreedUI uses everywhere, with a switch to see it.

In 20 seconds

What layout shift is and why people hate it.

The invisible-copy trick that stops rolling text from jumping.

The other places pages usually jump, and the fix for each.

Try reading this sentence while the status above changes.

The jump you've learned to hate

You're about to tap a button and the page moves, because something above it got bigger. You tap the wrong thing. That's layout shift, and Google treats it as one of the core signs of a good or bad page.

It's not just annoying. It breaks trust. If the page moves under you once, you start waiting a beat before every tap, and that hesitation is exactly the delay usability research says breaks your flow.

Layout shift is when things on the page move on their own, after you've started looking at them.

See it happen

This card has a status line that changes every couple of seconds. Try to read the grey text, or click the button, in both versions.

Bad: The card grows and shrinks with every message.

Bad: The text and button below keep moving.

Bad: You can't click it reliably.

Good: The card is always as tall as the longest message.

Good: Everything below stays perfectly still.

Good: The text still rolls, it just changes inside its space.

The trick

Put an invisible copy of the longest message in the same spot as the real one. The invisible copy decides the size. The real one changes freely on top. No measuring, no JavaScript, no jump.

Decide the space first, then let things change inside it.

The other usual suspects

Text isn't the only thing that jumps. Google's own checklist lists the same culprits every time. Here's how I handle each.

Images and videos: always set width and height (or an aspect ratio), so the browser saves the space before they load.

Loading placeholders: make skeletons the exact size of the real thing. A skeleton that's shorter is just a slower jump.

Banners and toasts: show them on top of the page, or in a space that already exists. Never push the content down.

Fonts: load them early and pick a fallback with similar size, so the text doesn't reflow when the real font arrives.

How to check your page

Open your page, then watch it while it loads and while you use it. Anything that moves without you touching it is a shift. Chrome's DevTools can measure it: a score of 0.1 or less counts as good. GreedUI's home page scores 0.

Sources

[1] Cumulative Layout Shift (CLS). Google. web.dev, accessed 2026. https://web.dev/articles/cls

[2] Optimize Cumulative Layout Shift. Google. web.dev, accessed 2026. https://web.dev/articles/optimize-cls

[3] Response Times: The 3 Important Limits. Jakob Nielsen. Nielsen Norman Group, 1993. https://www.nngroup.com/articles/response-times-3-important-limits/

	GreedUI
I can explain what layout shift is in one sentence.	I'd reserve space for the longest message before it shows up.	I'd give images, skeletons and banners their final size up front.
The card grows and shrinks with every message.	The text and button below keep moving.	You can't click it reliably.
The card is always as tall as the longest message.	Everything below stays perfectly still.	The text still rolls, it just changes inside its space.
Guess a min-height and hope	Reserve the space of the longest message with an invisible copy	Animate the height so the jump is smooth

Full component index: llms.txt