Layout shift
CLS · A score for how much elements move unexpectedly while the page loads; Google counts 0.1 or less as good.
- 01
Why it matters
Layout shift is when elements move unexpectedly while the page loads. The text being read jumps, and visitors press the wrong button; it is annoying and can cause wrong orders or clicks. Images without set dimensions, ads that load later and font swaps are the most common causes.
- 02
Example
On the checkout page, a promotion banner that loads late is inserted above the “Complete order” button and pushes it down. Once space is reserved for the banner, the button stays put and the mis-clicks stop.
- 03
Common mistake
Not giving images a width and height. If the browser does not know an image's size in advance it cannot reserve space, so the content is pushed down when the image arrives.
- 04
Related terms
- Core Web Vitals · Google's page experience metrics
- LCP · Main content load time
- INP · Interaction response time
Related services and guides
Let's talk about your project.
Tell us what you need; we will define the scope together.