WordPress CLS vs Next.js: Why Your Page Jumps and How to Make It Stop

How Google scores a jump

Every time a visible element moves without being asked, the browser records a layout shift score: the share of the viewport affected multiplied by how far things moved, as a share of the viewport's largest dimension. Google's CLS documentation on web.dev groups shifts into bursts, called session windows, where each shift follows the last by less than one second and the whole window lasts five seconds at most. Your CLS is the worst burst of the visit, not the first one.

Google calls 0.1 or less good and anything above 0.25 poor, measured at the 75th percentile of page loads on mobile and desktop. To feel the scale, take a hypothetical phone page where a banner pushes everything in view down by a quarter of the screen. The whole viewport is affected and the distance is a quarter, so that single shift scores about 0.25, two and a half times the good line.

• Shifts you cause do not count. Movement within 500 milliseconds of a tap, click or key press is treated as expected. Opening an accordion is fine.
• Scrolling is not an excuse. It does not count as that kind of input, so a header that jumps while you scroll still scores.
• Transforms are free. Moving or scaling an element with a CSS transform does not create a layout shift. Changing its top, left or margin does.
• The whole visit counts. CLS is tracked for the life of the page, which is why lab tests that stop after load often miss the worst shifts.

The Core Web Vitals overview covers lab versus field data in general. Here we stay with one question: what moves, and why.

Six ways a WordPress page learns to jump

Images that arrive without a size

Without width and height, the browser reserves no room for an image until the file arrives, then shoves everything below it down. Since version 5.5, WordPress back-fills width and height on content images, but only when the image is a media library attachment carrying its wp-image class. Images in custom HTML blocks, images pulled from another domain and builder modules that write their own markup can all slip through.

Ads, embeds and widgets with no seat saved

An ad slot rarely knows its size until the auction ends. A video or map iframe pasted without a sized wrapper starts tiny. Review carousels, social feeds and booking widgets are usually injected by script after the page has painted. Google's guidance notes that late content near the top of the viewport causes the biggest shifts, which is exactly where marketing teams like to put it.

Fonts that swap in late

With font swapping, the browser shows text in a fallback font, then redraws it when the web font lands. If the two fonts differ in width or line height, paragraphs rewrap and everything below moves. A font served from Google's servers usually arrives later than a local one. Theme settings help with the timing: Astra, Kadence, OceanWP and Neve all offer local Google Fonts hosting. Arriving sooner is not the same as matching, though, so a mismatched fallback can still shift.

Headers that change shape after load

A sticky header built in JavaScript often starts as a normal element, then switches to fixed positioning once you scroll. The moment it leaves the page flow, the content beneath jumps up by the header's height unless a spacer takes its place. Announcement bars and top strips inserted above the header after load push the whole page down. Some themes get this right in CSS: Kadence and Blocksy switch between desktop and mobile headers with media queries in their stylesheets, not with a script after paint.

Cookie banners that push instead of float

A consent banner inserted at the top of the page, in the normal flow, moves everything beneath it. The same banner fixed to the bottom of the screen as an overlay moves nothing. Which one you get depends on the consent plugin and its settings, not on your theme.

Builder animations and styles that land late

Entrance effects that slide sections in by changing margins or positions are layout shifts with good intentions. Late styling does the same at page scale: Hello Elementor's support forum has reports of a flash of unstyled content across several sites running Elementor Pro, and a page that restyles itself after painting reflows. Critical CSS can cause a quieter version. Divi and Avada both generate critical CSS and defer the rest; if the critical slice misses a rule above the fold, things move when the full stylesheet arrives. Avada's own update notes tell owners to rebuild critical CSS after major updates.

Space reserved in code: what Next.js does before anyone asks

Next.js does not have a magic layout-shift switch. It has components that make the stable choice the required one, and a build that refuses some unstable choices outright.

To be fair, a Next.js site can shift too. Content fetched in the browser without a placeholder of the right size will push the page. A fill image inside a container with no height collapses. Ad networks, consent tools and third-party widgets behave the same on any framework. What changes is who decides: on a custom Next.js build, one developer reviews the sizing once, in one template, instead of every plugin vendor making the call separately.

Six causes, two stacks, one table

Notice that every fix in the right column is the same idea: tell the browser how much room something needs before it arrives. WordPress lets each vendor decide whether to do that. Next.js makes the developer decide, once.

The third option

Athena CMS, with AI agents on staff.

Not a theme and not a blank Next.js repo. The content system we put behind every custom site: plain fields, a real preview, every version kept, and AI agents that handle the chores a plugin only nags you about.

• PPicassoImages
• AApolloSite analysis
• AAresCompetitor watch
• PPrometheusContent holes
• AAtlasPage depth and structure
• DDelphiAI search visibility

ZDAOAand 12 more agents. Two come with Athena; the rest are monthly add-ons.

Meet the agentsTake the Athena tour

PPicassoWeekly · ImagesAApolloWeekly · Site analysis

Fixes that hold on a WordPress site

Most CLS problems on WordPress are fixable without a rebuild, and they tend to stay fixed if you check after each update. Our layout shift troubleshooting guide walks through diagnosis in more detail.

1. 1

   Find what moves

   Search Console's Core Web Vitals report shows which URL groups fail. Chrome DevTools' Performance panel marks each layout shift and the elements involved. Record yourself scrolling too, not just loading.

2. 2

   Size every image

   Check builder image modules, custom HTML blocks and logos for width and height. Give background sections a fixed aspect ratio.

3. 3

   Reserve slots for ads and embeds

   Set a minimum height on ad containers equal to the most common size. Wrap videos and maps in a box with an aspect ratio, or use a click-to-load facade.

4. 4

   Calm the fonts

   Host fonts locally, preload the one used above the fold, and pick a fallback with similar proportions. Google notes that the optional display rule can avoid a re-layout entirely.

5. 5

   Fix the header and banners

   Prefer CSS sticky positioning to scripts that toggle fixed positioning. Float cookie banners at the bottom. Render top bars in the HTML, not after load.

6. 6

   Animate with transforms only

   Switch entrance effects to fade and transform, and turn them off for anything visible on first load.

7. 7

   Retest after every update

   A builder update can change image markup overnight. Rerun your checks on key templates after updates land.

If you would rather not spend a weekend in DevTools, our theme speed optimization service handles CLS fixes alongside the rest of the vitals, and a free website health check is a quick place to start.

Theme notes from the layout shift front

Themes differ less in CLS than in raw weight, because most shifts come from what you add. Still, a few details matter. Kadence and Blocksy switch headers in CSS, which removes one common source of jumps. Astra, Neve and OceanWP offer local font hosting, which narrows the swap window but does not match font metrics for you.

Builder themes carry more moving parts. Divi and Avada defer much of their CSS behind generated critical CSS, which speeds up the first paint and puts the burden of completeness on the generator. Avada also offers font-display choices and video facades, both useful here. Hello Elementor sites lean on Elementor for nearly all styling, so the unstyled-flash reports belong to the pairing. Flatsome's vendor says its new Site Builder, in beta as of October 2026, brings lower layout shift; treat that as a claim to test on your own pages, not a result.

A cookie banner that pushes the page down is asking for consent while taking away the button.

Keeping the layout still after launch day

CLS is the vital most often broken by content, not code. Someone pastes an embed into a post, uploads a logo without dimensions, or adds a seasonal banner above the header. On WordPress, nothing stands between that edit and your score. On the sites we build with Athena CMS, editors work in plain fields and the templates decide how each piece is laid out, with sizes set in code. Picasso makes sure images are described and sized, never missing, and Argus watches for slow pages after every change.

That is the pattern across all three metrics, covered alongside this page in WordPress vs Next.js for LCP and WordPress vs Next.js for INP, and argued in full on the WordPress vs Next.js comparison hub. If you want a second pair of eyes on your field data, our WordPress performance consulting starts there. If the answer is a move, the Next.js rebuild keeps your URLs and redirects every old one.