Example fix — see how Abby explains a remediation

critical Performance Core Web Vitals

LCP is 4.2 seconds on mobile.

Largest Contentful Paint — the moment the biggest thing above the fold finishes loading — is 4.2s on a mid-range Android. Google’s threshold is 2.5s. You are in the red zone.

Current

4.2s

Mobile 4G throttled

After fix

1.8s

Projected, same device

Impact

~15 min to fix · +7 Abby points

Abby’s diagnosis

The hero image on / is a 1.8 MB JPG served without explicit width/height. The browser can’t reserve space, so it re-paints, and your LCP element keeps changing. Two-part fix below — swap in a sized, responsive image, then defer the hero slideshow JS.

The fix

Two code changes. Both copy-pasteable. Apply them and re-run Abby — you should see LCP drop below 2s.

Replace the hero <img> with a sized, responsive version

Serve WebP, declare width and height so layout reserves space, and use fetchpriority="high" to tell the browser this is the LCP element.

Before · in index.html

<!-- hero -->
<img src="/hero.jpg"
     alt="Studio interior">

After · Abby’s patch

<!-- hero: sized, WebP, priority -->
<img src="/hero-1200.webp"
     srcset="/hero-800.webp 800w,
             /hero-1200.webp 1200w,
             /hero-1800.webp 1800w"
     sizes="(min-width: 900px) 1200px, 100vw"
     width="1200" height="720"
     fetchpriority="high"
     alt="Studio interior — glass-walled meeting room">

Defer the hero slideshow script

The slideshow doesn’t need to run until after first paint. Add defer so the parser doesn’t block on it.

<!-- bottom of <head> -->
<script src="/hero-slideshow.js" defer></script>

Re-scan to confirm

Deploy, then run Abby again — she’ll recheck LCP and flip this issue to ✓ passing.

Scan your site See the full guide →

Why Abby cares

LCP is one of three Core Web Vitals Google uses for ranking. A slow LCP doesn’t just hurt search — it’s why a large share of visitors bounce before your hero finishes loading.