How to reduce article text movement caused by late-loading ads

Reserve the space before the ad arrives

If an ad appears above a paragraph after someone starts reading, it can push that paragraph down the screen. Reserve an appropriate amount of space before the ad loads, then test what happens when the ad is small, large, late or absent.

The difficult choice is not simply whether to reserve space. It is how much to reserve when the same placement accepts several ad sizes. Google’s web performance guidance explains that ads and other late-loading content can cause layout shift, the visible movement of content that was already on screen. (web.dev: Optimize Cumulative Layout Shift ↗)

A 600-pixel ad can push text down by 350 pixels

Suppose a desktop placement accepts ad images measuring 300 pixels wide by either 250 or 600 pixels tall. Reserving 250 pixels leaves a 350-pixel expansion when the tall ad arrives. Reserving 600 prevents that expansion but leaves 350 pixels unused when the shorter ad wins.

The useful choice is therefore about the placement, not just the page’s CSS styling rules. You can reserve the taller space, restrict the slot to a shorter format, or move the taller format to a location where it fits the reading layout. Test the actual formats accepted at each screen size where the layout changes.

Watch the text before and after the ad loads

Simulate a slow connection in the browser’s developer tools, begin reading before the ad arrives, and watch the paragraph below the slot. Repeat when no ad is returned. A screenshot taken after loading can look perfect in both cases while hiding a disruptive jump.

If blank space is unacceptable, change the allowed format or placement. Replacing a large blank rectangle with a late layout shift merely trades one reading problem for another.

Give the developer the actual allowed ad sizes for each phone and desktop layout. Request a short screen recording that starts before the ad loads and continues through its arrival, plus a no-ad test. Record the space reserved at the start. Do not apply a 600-pixel desktop reservation to every phone by default; agree the allowed sizes and placement for each layout.

Test an empty slot as well as a filled one

Include an empty response in the test. If a publisher reserves space on load and then removes it while the reader is halfway down the page, the collapse can also move visible text. Record the top and bottom of the slot and the location of the same paragraph before the request, after the response, and after any collapse. Repeat at the widths readers use. If reservation solves movement but leaves an unacceptable gap, reconsider which creative sizes that placement accepts.

When reserving more space is the wrong fix

Imagine a mobile placement receives mostly 250-pixel creatives but occasionally shows one that is 600 pixels tall. Reserving 600 pixels prevents the tall ad from pushing the article down, but can leave a large blank area on common responses. A second option is to constrain that placement to shorter formats. Test both against the same reader experience and measure the revenue tradeoff before changing the whole site.

Run the test on a narrow screen and a slower connection. Capture what happens when the slot fills, fills late, and receives nothing. Record whether a visible paragraph moves in each case. A clean screenshot after load does not reveal which of those states caused the reader to lose their place.