--- title: "How WordPress Blocks Cause Layout Shift" date: 2026-03-18 author: "Imtiaz Rayhan" featured_image: "https://wpblocksuite.com/wp-content/uploads/2026/08/featured-wordpress-blocks-layout-shift.png" categories: - name: "Block Editor" url: "/blog/category/block-editor.md" --- # How WordPress Blocks Cause Layout Shift WordPress blocks cause layout shift when late information changes previously calculated space. Reserve dimensions for media and dynamic regions before their content arrives. Then record the public page and inspect every unexpected movement. ## Understand what CLS measures Cumulative Layout Shift measures unexpected movement of visible content during a visit. Its score combines affected viewport area with the movement distance. CLS is unitless. A lower score represents greater visual stability. ## Use the current good threshold Google defines good CLS as 0.1 or less. Apply that target at the seventy-fifth percentile of page visits. Field data matters because movement can occur throughout real journeys. ## Distinguish expected movement Content may move immediately after a visitor deliberately expands something. Some recent input-related shifts receive exclusions from CLS calculations. That exclusion does not excuse confusing, delayed, or inaccessible interfaces. ## Record the public page Open a logged-out production page with normal caching and consent behaviour. Use browser performance tools to record layout-shift entries and affected nodes. Reload several times. Variable assets can produce different sequences. ## Find the cause, not only the victim The highlighted element often moved because something earlier changed size. Inspect ancestors and preceding siblings. Watch the filmstrip before each shift. Record both the moved node and the element changing available space. ## Check Image block dimensions Image markup should include correct intrinsic width and height attributes. Browsers can calculate aspect ratio before downloading the image. Responsive CSS can still use full width and automatic height. ## Keep dimensions accurate Incorrect width and height reserve the wrong aspect ratio initially. The browser corrects that space after decoding the real image. Inspect generated markup after replacements, crops, migrations, and optimisation. ## Check responsive image crops Art-directed sources can use different aspect ratios at separate breakpoints. Each source needs dimensions matching its rendered crop. Test breakpoint transitions and initial loads at each supported width. ## Check Cover blocks Cover blocks can use background media, overlays, minimum heights, and inner content. Late fonts or responsive styles can change their visible height. Set deliberate minimum dimensions. Test long headings and translated content. ## Check Gallery blocks Gallery rows depend on image dimensions, column rules, gaps, and cropping. A missing dimension can change row height after one image arrives. Test incomplete caches and slow images. Warm visits can hide movement. ## Check slider blocks Slider scripts may calculate track height only after JavaScript executes. Different slide ratios can resize the complete component during rotation. Reserve the initial frame and stabilise height across expected slides. ## Check Video blocks Video elements need dimensions or a stable aspect-ratio wrapper. Poster images should match the video ratio. Controls must fit reserved space. Test metadata delays and missing posters under constrained networks. ## Check Embed blocks Remote embeds often replace placeholders with frames of different heights. Reserve a suitable aspect ratio or minimum height before replacement. Test consent rejection, errors, and unavailable providers. Fallbacks also need space. ## Check social embeds Social posts can expand after remote scripts retrieve text and media. The final height may vary with deleted posts or language. Prefer stable static quotations when the live embed adds little value. ## Check iframe dimensions Maps, forms, and external widgets often arrive through iframes. Reserve space with explicit dimensions, aspect ratio, or tested minimum height. A loading spinner without dimensions does not reserve the final region. ## Check Query Loop images Repeated featured images amplify one missing-dimension problem across many cards. Use consistent aspect ratios when the design expects aligned rows. Test posts lacking images, titles, excerpts, or expected metadata. ## Check variable card content Badges, prices, ratings, and excerpts can arrive after initial card layout. Reserve predictable regions or render essential data within initial HTML. Do not force fixed heights that clip enlarged or translated text. ## Check pagination updates Dynamic pagination can replace grids with differently sized result sets. Movement after direct input may receive scoring exclusions. Still maintain orientation, focus, scroll position, and predictable container behaviour. ## Check notices above content Cookie notices, promotions, alerts, and account messages can push everything downward. Reserve their area before display or use a deliberate overlay. Overlays must not obscure focus or essential content. ## Check administrator-only elements The WordPress toolbar changes the viewport for logged-in sessions. Do not confuse administrator movement with anonymous visitor field data. Test both when editors need reliable previews and public behaviour. ## Check web fonts Fallback and final fonts can use different character widths and line heights. Swapping can rewrap headings, buttons, navigation, and block captions. We wrote that up in [improving Largest Contentful Paint on block pages](https://wpblocksuite.com/blog/improve-lcp-block-based-pages/). Reduce unnecessary files and choose closely matched fallback metrics. ## Use font-display deliberately Font loading strategy changes when fallback text appears or swaps. `font-display: optional` can avoid later replacement under some conditions. Test readability and brand requirements. One strategy does not fit every font. ## Match fallback font metrics CSS font metric overrides can make fallback geometry resemble the final font. Useful properties include size adjustment and ascent or descent overrides. Measure actual families and weights. Guessed values can worsen movement. ## Check icon fonts Late icon fonts can replace empty boxes with differently sized glyphs. Buttons and navigation may shift when those glyphs arrive. Prefer stable inline icons when appropriate. Preserve accessible names. ## Check block CSS arrival Late styles can change gaps, borders, display modes, and element dimensions. Critical visible block styles should arrive before initial rendering. Inspect stylesheet order and optimisation tools that defer CSS. ## Check JavaScript layout calculations Plugins may measure blocks and assign sizes after the page paints. Masonry galleries and equal-height cards commonly use this pattern. Prefer stable initial CSS. Reserve sufficient space before scripts run. ## Check breakpoint scripts JavaScript may replace markup after detecting viewport width. The initial server layout can then collapse or expand visibly. Use CSS for presentation changes where possible. Keep source content stable. ## Check sticky navigation Sticky headers may change height after scrolling or loading fonts. They can obscure shifted content without contributing directly to CLS. Keep state dimensions predictable. Test banners and administrator bars together. ## Check accordions and Details blocks Expansion after direct activation is usually expected by the visitor. Delayed image or font changes inside expanded content remain separate risks. Keep focus visible and prevent unexpected automatic opening. ## Check tabs and hidden panels Tab panels can differ greatly in height. Activation naturally changes nearby layout. Late assets can extend that change beyond the immediate input window. Pre-size predictable media and preserve keyboard focus during panel changes. ## Check form error messages Validation messages can push fields and buttons after submission. The input makes some movement expected, but usability still matters. Keep errors near fields and move focus or announcements appropriately. ## Check advertising slots Advertisements can use variable sizes or return no creative. Reserve the most suitable expected region. Avoid collapsing empty slots suddenly. Place uncertain late content lower when business requirements allow. ## Check personalisation Recommendations and account blocks may arrive after an API response. Use stable placeholders matching likely content dimensions. Do not insert personalised banners above content without reserved space. ## Check comment sections Avatars, nested replies, forms, and moderation notices can alter comment height. Late loading lower on long pages can still enter the viewport. Keep avatar dimensions explicit and reserve dynamic form feedback. ## Check infinite scrolling Automatic insertion can move footers and content near the viewport. Use deliberate loading controls when appropriate. Preserve predictable navigation. Reserve placeholders for expected cards before replacing them. ## Animate with transforms The [web.dev CLS guide](https://web.dev/articles/optimize-cls) recommends avoiding layout-changing animation properties. Transforms can move visual layers without changing surrounding document layout. Animation still needs reduced-motion support and accessible interaction. ## Avoid animating layout properties Changes to top, left, width, or height can trigger layout work. They may move neighbouring blocks and create recorded shifts. Use composited transforms when the visual effect permits them. ## Use aspect ratio carefully CSS aspect ratio can reserve responsive space for media and frames. Choose a ratio matching the delivered content at that breakpoint. Use intrinsic attributes on images too. They provide early parser information. ## Use minimum heights carefully A minimum height can reserve space when final content varies. Too little still shifts. Too much leaves awkward empty regions. Base values on measured content distributions and responsive states. ## Do not collapse placeholders Removing a reserved region can shift content as severely as insertion. Keep the slot or transition after deliberate visitor input. Handle errors and empty results without abrupt document movement. ## Test cache states Warm browser caches can deliver fonts and images before movement appears. Cold visits expose real reservation failures more consistently. Record both. Field populations include first and repeat visitors. ## Test slow networks Slow assets widen the interval between initial and final layout. That delay makes missing reservations visible and easier to identify. Use repeatable throttling for diagnosis. Confirm impact with field data. ## Test long sessions Laboratory load tests can miss shifts occurring after scrolling or interaction. Browse galleries, comments, filters, embeds, and late notices. Field CLS covers the visit, not merely the initial viewport. ## Test multiple viewports Responsive wrapping changes which dimensions and components matter. Test narrow phones, larger phones, tablets, laptops, and wide desktops. Use real orientation changes when the site supports them. ## Test text enlargement Enlarged text increases block height and can expose fixed-size assumptions. This reflow is user-controlled, but clipping remains a serious failure. Allow containers to grow while preserving predictable dynamic regions. ## Inspect WordPress loading attributes WordPress coordinates image loading, priority, and decoding attributes. The full walkthrough is in [lazy loading images in blocks](https://wpblocksuite.com/blog/lazy-loading-images-wordpress-blocks/). Its [loading optimisation function](https://developer.wordpress.org/reference/functions/wp_get_loading_optimization_attributes/) requires image dimensions for key decisions. Inspect final markup after filters and optimisation plugins run. ## Fix the owning layer Correct image metadata in content when the saved attachment is wrong. Correct reusable sizing in themes or plugins when many pages fail. Avoid scattered CSS patches that mask one viewport only. ## Retest after the fix Repeat the exact failing route, viewport, cache state, and interaction. Check every related template because shared changes can create regressions. Monitor field trends after enough new visits accumulate. ## Check template-part insertion Headers and footers can contain remotely updated notices or navigation content. Late template-part scripts may alter every page sharing that structure. Test shared changes across posts, archives, search, and empty-result templates. ## Check fallback media Broken images and blocked embeds can activate differently sized fallback interfaces. Those states still appear in real visits and monitoring samples. Test unavailable sources deliberately. Keep fallback regions geometrically stable. ## Check localisation changes Longer translations wrap controls, headings, captions, and navigation labels. Language switching can also introduce another font with different metrics. Record important locales separately. Avoid fixed heights around translated copy. ## Check optimisation exclusions Performance tools may exclude some styles or scripts from their normal sequence. One forgotten exclusion can restore late sizing across selected pages. Document rules by handle and purpose. Retest after plugin updates. ## Keep a shift evidence log Save recordings with viewport, network, cache state, URL, and browser version. Note the affected node, responsible element, score contribution, and correction. Evidence prevents visual guesses from becoming permanent maintenance rules. ## Know when CLS is not first A tiny expected movement may matter less than an unusable interaction. Prioritise severe field failures and movements causing mistakes or lost context. This is the honest weak case. Use evidence and visitor impact. ## Use the layout-shift checklist 1. Open the anonymous public page. 2. Record several page loads. 3. Inspect layout-shift entries. 4. Identify cause and victim. 5. Check image dimensions. 6. Check responsive ratios. 7. Check embeds and frames. 8. Check dynamic insertion. 9. Check font swaps. 10. Check late block CSS. 11. Check JavaScript sizing. 12. Test cold caches. 13. Test slow networks. 14. Test long sessions. 15. Fix the owning layer. 16. Repeat every failing route. ## Frequently asked questions What causes layout shift in WordPress blocks? Common causes include missing dimensions, late styles, fonts, embeds, scripts, and injected content. What is a good CLS score? Google defines good CLS as 0.1 or less for most visits. Do width and height break responsive images? No. Correct attributes establish aspect ratio while CSS controls rendered size. Can lazy loading cause CLS? Missing reserved space causes movement. Lazy media still needs accurate dimensions. Should every dynamic block use a fixed height? No. Reserve suitable space without clipping enlarged, translated, or variable content. ## The verdict Verdict **Reserve space early:** media, embeds, fonts, and dynamic regions need stable initial geometry. **Record actual movement:** identify both the shifted element and the late cause before changing blocks. Core blocks usually preserve useful media dimensions. Verify every extension. Then [compare the $299 lifetime suite](https://wpblocksuite.com/#pricing) when several Pro blocks pass every stability test.