Skip to main content

Core Web Vitals and Ads

Understand how ads affect your Core Web Vitals — and how to minimize the impact.

What are Core Web Vitals?​

Core Web Vitals (CWV) are Google's metrics for measuring user experience:

MetricMeasuresGoodNeeds workPoor
LCP (Largest Contentful Paint)Loading< 2.5s2.5-4s> 4s
INP (Interaction to Next Paint)Interactivity< 200ms200-500ms> 500ms
CLS (Cumulative Layout Shift)Visual stability< 0.10.1-0.25> 0.25

These metrics affect:

  • Google rankings — CWV is a ranking factor
  • User experience — Correlates with engagement and bounce rate
  • Ad performance — Slow pages have lower viewability

How ads affect each metric​

LCP (Largest Contentful Paint)​

What it measures: Time until the largest content element loads.

How ads hurt LCP:

  • Ad-related network requests compete with LCP-critical resources for bandwidth
  • Large ad creatives take time to load and can become the LCP element themselves
  • Content-pushing layout (ad loads above content) delays the visual LCP

The fix:

StrategyImpact
Keep the wrapper tag near the top of <head>The inline IIFE loader is designed to kick off library + config fetches at priority: 'low' — non-blocking already. Don't wrap it in a blocking guard (consent gate, A/B test) that defers it past LCP.
Lazy-load below-fold slotsOnly above-fold ads can affect LCP
Tighten wrapper bid timeoutShorter wait = faster auction-to-render
Use fetchpriority for contentPrioritize content over ads

INP (Interaction to Next Paint)​

What it measures: Responsiveness when user interacts.

How ads hurt INP:

  • Ad scripts consume CPU
  • Rich media ads (video, animations) compete for resources
  • Too many ads = more JavaScript execution

The fix:

StrategyImpact
Limit rich media formatsLess CPU competition
Defer non-critical ad scriptsMain thread stays responsive
Reduce total ad countLess JavaScript overall

CLS (Cumulative Layout Shift)​

What it measures: How much content shifts during load.

How ads hurt CLS:

  • Ads load after content, pushing it down
  • Different ad sizes cause different shifts
  • Late-loading ads inject into content flow

The fix:

StrategyImpact
Reserve space for adsNo shift when ads load
Use fixed ad sizesPredictable dimensions
Avoid injected adsPlace ads in designed slots
Load ads earlyShift happens before user sees it

Measuring ad impact on CWV​

In Anima​

If CWV tracking is enabled:

  1. Go to Dashboard → Core Web Vitals
  2. View metrics by:
    • Page type
    • Device
    • Ad configuration
  3. Compare pages with/without specific ad setups

In Google Search Console​

  1. Go to Core Web Vitals report
  2. Review "Poor URLs" and "Needs improvement"
  3. Cross-reference with pages that have more ads

In Chrome DevTools​

  1. Open DevTools (F12)
  2. Go to Lighthouse tab
  3. Run audit with "Performance" checked
  4. Review CWV scores and diagnostics

Best practices by metric​

Optimizing for LCP​

Target: LCP < 2.5s even with ads loading.

Wrapper tag architecture

The wrapper tag is an inline IIFE, not a hosted <script src=…>. It loads the per-domain library from jsDelivr and the config from the Portal API in parallel, both at priority: 'low'. For the full architecture, see Wrapper Debugging.

Optimizing for CLS​

The key: Reserve space before ads load.

<!-- BAD: No reserved space -->
<div class="ad-container">
  <!-- Ad loads here, pushes content down -->
</div>

<!-- GOOD: Reserved space -->
<div class="ad-container" style="min-height: 250px; min-width: 300px;">
  <!-- Ad loads into reserved space, no shift -->
</div>

For each ad slot:

  1. Define the maximum size that could load
  2. Set min-height and min-width in CSS
  3. Consider using aspect ratio containers

For responsive ads:

.ad-container {
  min-height: 250px;
  aspect-ratio: 300 / 250;
  contain: layout;
}

Optimizing for INP​

Reduce JavaScript weight:

  • Enable only necessary ad features
  • Avoid heavy rich media on slow devices
  • Consider lighter ad formats for mobile

Defer non-critical scripts:

<script defer src="analytics.js"></script>
<script defer src="optional-features.js"></script>

Configuration recommendations​

Above-the-fold slots​

SettingRecommendationWhy
Lazy loadingOFFNeeds to load for LCP
Reserved spaceYESPrevents CLS
SizesLimited (1-2)Predictable dimensions
PriorityHighPart of initial render

Below-the-fold slots​

SettingRecommendationWhy
Lazy loadingONDoesn't affect LCP
Reserved spaceYESStill prevents CLS
SizesMore flexibleDoesn't affect initial load
PriorityNormalCan wait

Mobile-specific​

SettingRecommendation
Fewer slots3-4 max per page
Smaller sizes320x50, 300x250
Simpler formatsAvoid heavy video
Aggressive lazyOnly visible ads

Testing your setup​

Pre-deployment testing​

  1. Lighthouse audit:

    • Run on pages with ads
    • Check CWV scores
    • Review diagnostics

  2. WebPageTest:

    • Test real devices
    • Film strip view shows shift
    • Waterfall shows blocking

  3. Chrome DevTools Performance:

    • Record page load
    • Identify layout shifts
    • Find long tasks

A/B testing CWV impact​

Create experiments to test:

ExperimentControlVariation
Lazy loadingOff for allOn for below-fold
Slot count6 slots4 slots
Timeout1500ms1000ms
Reserved spaceNoneAll slots

Measure both CWV and revenue to find optimal balance.

Common CWV issues and fixes​

Issue: LCP > 4 seconds​

Diagnose: Is the largest element an ad or content?

  • If ad: Your ad is loading before content (bad)
  • If content: Ads may be blocking content load

Fix:

  1. Ensure wrapper loads async
  2. Prioritize content with fetchpriority="high"
  3. Lazy load all below-fold ads
  4. Reduce timeout

Issue: CLS > 0.25​

Diagnose: Where is the shift happening?

  • Use Chrome DevTools → Performance → Experience
  • Look for layout shift entries

Fix:

  1. Add reserved space for all ad containers
  2. Use fixed sizes instead of responsive
  3. Load ads earlier if possible
  4. Avoid injecting ads dynamically

Issue: INP > 500ms​

Diagnose: What's blocking the main thread?

  • DevTools → Performance → Main thread
  • Look for long tasks during interaction

Fix:

  1. Reduce number of ad scripts
  2. Disable heavy ad formats
  3. Defer non-critical scripts
  4. Consider fewer demand partners

Balancing CWV and revenue​

The goal isn't perfect CWV scores — it's good enough CWV with optimal revenue.

CWV StatusAction
All green (good)You have room to add monetization
Yellow (needs work)Optimize before adding more
Red (poor)Fix CWV before anything else

The revenue check​

Before any CWV optimization:

  1. Measure current revenue per pageview
  2. Make CWV changes
  3. Measure new revenue per pageview

If revenue drops significantly, the CWV improvement may not be worth it. Find a better solution.