Lazy Loading Without Layout Shift: An Ad Setup for Recipe and Lifestyle Sites

The long-page problem

Recipe and lifestyle pages are long by design: a story, step-by-step photos, tips, the recipe card, comments. That length is good for monetization, since it supports many ad slots, but it creates two predictable problems. Requesting every ad at page load wastes auctions on slots most readers never reach, and slots that load, resize or collapse as the reader scrolls push the content around. The first costs revenue and page speed. The second costs user trust and your Cumulative Layout Shift (CLS) score.

Both are fixable, and the fixes work together: request ads only when they are about to be seen, and reserve the space they will occupy before they arrive.

Know the target

Google's guidance on Cumulative Layout Shift says sites should aim for a CLS of 0.1 or less, measured at the 75th percentile of page loads across mobile and desktop; above 0.25 is considered poor. The same guidance calls out third-party ads and widgets that resize themselves as a common cause of unexpected shifts. CLS is one of the three Core Web Vitals, alongside Largest Contentful Paint and Interaction to Next Paint, which replaced First Input Delay in March 2024. Heavy ad scripts can hurt the other two as well, which is another reason not to load everything at once.

Step 1: reserve space for every slot

Google's publisher tag documentation on minimizing layout shift is blunt: the only guaranteed way to avoid layout shift is to reserve enough space for each ad slot in CSS. In practice:

• Single-size slots: set a min-height on the container equal to the creative height.
• Multi-size slots: Google recommends reserving space for the largest size configured to serve. If that leaves too much blank space too often, reserve for the most frequent size based on your Ad Manager fill data, and accept a small shift for less common, larger creatives.
• Slots near the top of the page: take special care. The higher a slot sits in the initial viewport, the more content it can displace.
• Fluid or native sizes: these cannot be sized in advance and will shift content. Use them only below the fold and fetch them early.

Step 2: decide what happens when a slot doesn't fill

Collapsing an empty slot removes blank space but moves content if it happens in view. Google's guidance: slots that are likely to fill should start expanded, and slots unlikely to fill should start collapsed. Check fill rates by slot. A slot that fills most of the time should keep its reserved space even on the occasional miss; a rarely filled slot may be better removed from the page entirely.

Step 3: lazy load with sensible margins

Lazy loading means requesting an ad only when its slot comes within a set distance of the viewport. In Google Publisher Tag this is built in through enableLazyLoad, which takes three settings:

• fetchMarginPercent: how far from the viewport, as a percentage of viewport height, a slot must be before its ad is requested.
• renderMarginPercent: how close it must be before the ad is rendered.
• mobileScaling: a multiplier applied to both margins on mobile, where fast thumb scrolling means you need more lead time.

If you run Prebid, the header bidding auction must also start before the slot is needed. The usual pattern is to watch slots with the Intersection Observer API and run a Prebid auction for each slot, or small group of slots, as it approaches, then request the ad from the ad server. Make sure your fetch distance allows for your bidding timeout plus ad server response; otherwise readers scroll past before the ad arrives.

Step 4: tune the margins with data

There is no universal right margin. Too small and ads arrive after the reader has scrolled past, hurting viewability and impressions. Too large and you are back to requesting ads nobody sees. Test two or three configurations and compare:

• Impressions per page view and viewability by slot position.
• Revenue per page view and per session.
• CLS and LCP from real-user data, not lab tests.

Recipe pages have a specific pattern worth checking: many readers jump straight to the recipe card, and users on mobile scroll quickly past the story section. Slots in that fast-scroll zone may need larger margins than those near the recipe card, where readers slow down.

Step 5: keep refreshes and sticky units stable

If slots refresh, keep the new creative within the reserved dimensions. Sticky footers and anchors should overlay rather than push content, and should not cover the recipe card or instructions. In-content video players need a fixed aspect-ratio container so they do not collapse and expand as they load.

Common culprits when CLS is still high

• Ad containers without explicit heights inside responsive layouts, especially on mobile breakpoints.
• Creatives that expand after load or render at a different size than the slot requested.
• Consent banners, email signup prompts and cookie notices that insert themselves above content.
• Late-loading web fonts and images without width and height attributes, which are not ad problems but get blamed on ads.

Use your browser's performance tools or a layout shift debugger to identify which elements are moving. Fix the biggest contributors first.

What good looks like

A well-tuned long-form page requests ads progressively as the reader scrolls, every slot has a stable home before its ad arrives, and CLS stays within the good threshold on real devices. Readers get a page that does not jump while they are measuring flour, and advertisers get impressions that are actually seen, which is what they pay for.

Stable pages and strong ad revenue are not a trade-off. Reserve the space, request ads just in time, and measure both sides of the result.

If your site runs dozens of slots per page, a managed setup that treats layout stability and yield as one problem, not two, is worth a close look.