Guide

Core Web Vitals and ads: how to fix layout shift and slow pages without losing revenue

How ad slots and ad scripts affect each Core Web Vital, practical fixes that keep ad revenue intact, and how to measure page experience on a site where ads load after the page.

Updated · 4 min read

Ads and page experience are often treated as opposites: more ads, slower pages. In practice, most of the damage ads do to page experience comes from how they are loaded, not from the fact that they are there. Content jumping as ads appear, heavy scripts competing with the page, and slots that collapse and expand can usually be fixed while keeping the same ads.

The three Core Web Vitals

Google's Core Web Vitals measure loading, responsiveness and visual stability. A page is considered "good" when 75% of real page loads meet each threshold:

MetricWhat it measuresGoodHow ads commonly affect it
Largest Contentful Paint (LCP)How quickly the main content appears2.5 seconds or lessAd scripts compete with the page for the network and the browser's main thread
Interaction to Next Paint (INP)How quickly the page responds to taps, clicks and key presses200 milliseconds or lessLong-running ad and bidding scripts delay the page's response
Cumulative Layout Shift (CLS)How much visible content moves unexpectedly0.1 or lessSlots that expand when an ad arrives push content down

INP replaced First Input Delay as a Core Web Vital in March 2024. The definitions and thresholds are documented at web.dev.

Layout shift: the most common ad problem

When an ad slot has no height until an ad arrives, the ad pushes everything below it down the page. A reader who was about to tap a link taps the ad instead. That is a poor experience, it can count against you in CLS, and accidental clicks are not the kind of engagement advertisers want to pay for.

Reserved space versus no reserved space (narrated, with captions). Left: the ad loads into a slot with no height and pushes the article down, so the reader's tap lands on the ad. Right: the slot's space is reserved before the ad loads, and nothing moves. Layout shift scores shown are illustrative.
Read the transcript

Why do ad slots need reserved space? When an ad arrives in a slot with no height, it pushes everything below it down the page. Here are two versions of the same page. On the left, the ad slot has no reserved space. On the right, the space is held before the ad loads. The reader is about to tap a link. The ad arrives. On the left, the page jumps, and the tap lands on the ad instead. On the right, nothing moves, and the tap lands on the link. So reserve space for every ad slot, sized for each screen. Keep unfilled slots near the top of the page instead of collapsing them, and make sticky ads and consent banners overlay the page.

How to fix it

  • Reserve space for every slot before the ad loads. Give the slot container a minimum height in CSS, set per screen size if the slot sizes differ between mobile and desktop.
  • Choose what to reserve for multi-size slots. Reserving the largest size prevents any shift but can leave empty space when a smaller ad wins. Reserving the most common size is a compromise. Check which sizes actually serve in each slot before deciding. Google's guide to minimizing layout shift walks through the options.
  • Do not collapse slots near the top of the page when they go unfilled. Collapsing an empty slot also moves content. For slots above the fold, keep the space and show a house ad or a subtle placeholder.
  • Insert in-content slots in the page's HTML. Slots injected by script after the article has rendered cause shifts; slots that exist from the start do not.
  • Use fixed positioning for sticky and anchor ads. Elements that overlay the page instead of pushing content do not cause layout shift. The same applies to consent banners.

Loading: keep ad scripts out of the critical path

  • Load ad libraries asynchronously. Ad tags and header bidding wrappers should never block the page from rendering.
  • Prioritize the main content. If the largest element is an image, do not lazy load it, and consider giving it a high fetch priority so it is not queued behind ad requests.
  • Lazy load below-the-fold ads so they do not compete with the content the reader sees first. Our viewability guide covers how to set the margins.
  • Review every third-party script, not only ad tags. Analytics, social embeds, video players and recommendation widgets add up.

Responsiveness: reduce the work ads do in the browser

  • Audit how many bidders run in the browser. Each one adds requests and processing. Bidders that rarely win may not justify their cost. See our guide on header bidding timeouts.
  • Consider moving some bidders server-side, which shifts work off the reader's device.
  • Report heavy creatives. Some ads run expensive scripts or animations. Most ad platforms let you block or report creatives that misbehave.
  • Defer anything that is not needed straight away.

Measure with ads present

Lab tools are useful, but they can miss ad problems: test runs may not get an ad, may not pass the consent step, or may finish before ads arrive. Use field data from real visitors to decide what to fix.

  • Google Search Console, Core Web Vitals report: field data grouped by similar pages.
  • PageSpeed Insights: field data where available, plus a lab test with diagnostics.
  • Chrome DevTools, Performance panel: shows layout shifts and long tasks, and which element moved.
  • Your own real-user measurement: Google's open-source web-vitals library can report each metric, and the element responsible, from real visits.

Keep an eye on revenue

Most of these fixes are neutral or positive for revenue, but not all. Reserving space can leave gaps when a slot goes unfilled; lazy loading can reduce impressions per page view; removing bidders can reduce competition. Make one change at a time and track page RPM, viewability and the relevant Core Web Vital together.

The checklist, in order

  1. Find which templates fail which metric, using field data.
  2. Reserve space for every ad slot, per screen size.
  3. Stop collapsing unfilled slots above the fold.
  4. Make sticky ads and consent banners overlay the page rather than push it.
  5. Load ad scripts asynchronously and keep them away from the main content's loading path.
  6. Lazy load below-the-fold ads, then tune the margins.
  7. Reduce browser-side bidders and heavy third-party scripts.
  8. Re-measure with ads present, and check page RPM alongside each metric.

If ad revenue and page experience seem to be pulling against each other on your site, an independent audit can look at both together and show which changes are worth making first.

Common questions

Do Core Web Vitals affect search rankings?

Google says its core ranking systems look to reward content that provides a good page experience, and it recommends good Core Web Vitals for success in Search. It also says page experience is only one of many things its systems consider, so good scores will not make up for weak or irrelevant content.

Do ads count towards Cumulative Layout Shift?

Yes. If an ad slot changes size and moves visible content without the reader interacting, that movement counts towards CLS, whether the cause is an ad or anything else.

Should I reserve space for the largest ad size?

It prevents all shifts in that slot but can leave empty space when smaller ads serve. Check which sizes actually win in each slot, then reserve the largest or most common size depending on the trade-off you prefer.

Why do lab tests show good scores while real users see problems?

Lab tests often run without ads filling, without the consent step, or for too short a time to see ads load. Field data from real visits reflects what readers actually experience.