# How to Fix Layout Shifts Caused by Images and Embeds

> Fix layout shifts caused by images and embeds: trace the trigger, reserve the right space, and test loading and scrolling on the live page.

Canonical: https://www.getdexseo.com/blog/website-performance-optimization/fix-layout-shifts-images-embeds/
Author: Dex SEO, Editorial team
Published: Oct 20, 2026 · Updated: Oct 20, 2026

## Key takeaways

- Trace the trigger before changing a media slot.
- Reserve space that matches the final image or embed.
- Check small screens and movement after the first load.
- Verify the public release and keep the test evidence.

To fix layout shifts caused by images and embeds, find what appears or changes size before the page moves. Reserve the right space for that content, then repeat the same visit. The text that jumps may be the victim, while an image or widget above it is the cause.

This guide focuses on those media slots. Use the [website performance guide](https://www.getdexseo.com/blog/website-performance-optimization/) for the broader metrics and diagnosis. Here, the useful result is a page that keeps a reader’s place while its images and embedded content load.

## Find the image or embed that triggers the shift

A long wait for the document is a separate [TTFB diagnosis](https://www.getdexseo.com/blog/website-performance-optimization/diagnose-slow-ttfb/). Keep its evidence apart from visible movement after content arrives.

Start with one page and a clear report: what moved, when, and on which screen size? “The paragraph drops when the video appears” gives the reviewer more to work with than “the page feels slow.” Record the visitor state too, such as a first visit with a notice still open.

Replay that path in the browser. Watch the first load, then scroll through the article and open relevant controls. Some shifts happen after the first screen has finished loading. A static screenshot can miss that sequence.

Chrome’s Performance panel can show layout-shift records. Select a shift and inspect the nearby activity. The listed moving text does not by itself prove that the text caused the problem. Look above it for a new element or a box that changed size.

Save a short note or recording with the affected section. Pick one cause to test first. If several things move, separate them into small tasks so each fix has a clear result.

## Reserve space for images before they arrive

Correct width and height attributes let the browser work out an image’s shape before it loads. CSS can still make the image fit the screen. The reserved shape needs to match the asset that the visitor will see.

For example, a wide photo needs a wide slot. Do not use a square placeholder just because it is easy to add. The slot may have to change when the real image arrives, moving the next paragraph again.

Ask the template owner to check the image markup and the styles applied to it. If the CMS writes dimensions but a theme removes them or overrides the shape, changing the source file alone may not solve the problem.

Use our [image SEO guide](https://www.getdexseo.com/blog/image-seo/) for the wider asset review. Keep this task focused on space and movement rather than rewriting file names or alt text as a layout fix.

## Check responsive images at each layout size

When a shared media feature owns the slot, use a [controlled plugin test](https://www.getdexseo.com/blog/website-performance-optimization/test-wordpress-plugin-performance/) to narrow the change on a safe copy.

A page may use different image crops on small and large screens. Check the shape of each version and the slot used at that screen size. A fix that works for a wide desktop photo can fail when a phone receives a taller crop.

Review more than one article if the change affects a shared template. Choose a page with a short caption, one with a long caption, and one with no caption. This helps reveal whether the space belongs to the image, its caption, or the whole media block.

A useful review note names the asset, the slot, and the layout tested. Avoid a vague ticket to “add dimensions everywhere.” The owner needs enough context to reproduce the mismatch and judge the result.

## Give embeds a stable slot

If the embed also makes clicks slow, [record its JavaScript work](https://www.getdexseo.com/blog/website-performance-optimization/reduce-javascript-execution-time/). A stable box does not prove that the widget runs quickly.

Videos, maps, social posts, and other embeds may arrive later than the article text. Leave space for the intended content rather than inserting a new box into the reader’s view after loading.

A video with a known shape can use a slot based on that ratio. A social widget with variable height needs a different plan. Ask what height can reasonably be reserved at each layout size, and review what happens if the service fails to load.

Do not hide useful content under a rigid box that clips it. Check the whole embed once it is ready: labels, controls, captions, and any link the visitor needs. Stable space is only useful if the component still works.

For consent-based content, test both the waiting state and the state after consent. Keep the visitor’s place when the real content replaces the placeholder. Do not disable a consent control just to get a cleaner test result.

## Keep lazy loading separate from space reservation

For text that changes shape, follow the [web font loading review](https://www.getdexseo.com/blog/website-performance-optimization/web-font-loading-best-practices/) rather than resizing image boxes.

Lazy loading controls when an image is requested. It does not remove the need to leave space for it. A deferred image can still move the page when the browser learns its size.

Review the [image lazy loading checks](https://www.getdexseo.com/blog/website-performance-optimization/image-lazy-loading-best-practices/) when a later image is involved. The two tasks work together: choose when the image should load, and make sure its slot is ready.

If the moving content is text changing shape when a font arrives, treat that as a font-loading issue. Do not keep changing image boxes after evidence points elsewhere. A good diagnosis can end with a different owner and a separate task.

## Example: a video pushes a repair guide down

Imagine a repair article where a video appears halfway down the page. The text below it drops when the player loads. This is a fictional example, not a report of a measured client result.

1.  Record the screen size and the point where the movement occurs.
2.  Check whether the player’s space exists before the player loads.
3.  Add a suitable slot in a test version of the template.
4.  Repeat the same visit and scroll path.
5.  Check the player controls and nearby text at a smaller screen size.
6.  Record whether the original shift is gone and note any other movement.

The point is to connect one visible problem to one change. Do not claim a new score or a faster page without measuring it. If another shift remains, keep its evidence separate from the one you fixed.

## Verify the fix on the published page

First [verify the cache serves the updated page](https://www.getdexseo.com/blog/website-performance-optimization/how-to-test-website-caching/) so your comparison uses the intended media styles.

Compare repeat visits with matching screen, browser, and loading conditions. Test beyond the first load. Check the full article, embedded controls, and the first-visit state. A cached visit may hide the sequence that a new reader sees.

Use the CMS publishing checklist to confirm the live release. If the fix belongs to the template, check a small set of pages using it. Keep a rollback plan for a change that breaks a media block elsewhere.

DEX Health helps review page quality and SEO, including on the free plan. Use it alongside the browser test. A Health score is not a recording of layout movement or proof that the cause is fixed.

Save the before-and-after notes, owner, and final result. The task is complete when the media has suitable space and readers can follow the page without that unwanted jump.

## FAQ

### Does the element that moves always cause the shift?

No. A paragraph may move because an image or embed above it grows. Trace what changed before choosing a fix.

### Does lazy loading reserve image space?

No. Check the image dimensions or layout rules separately from the choice to defer loading.

### Is one desktop load enough to verify the fix?

Test relevant screen sizes and the reader’s full path, including scrolling and late-loading content.

## Sources

- [Optimize Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — Google web.dev