How to fix cwv lcp on Webflow

Steps for Webflow

1. In the Webflow Designer, select your hero image element → in the Settings panel (right sidebar, gear icon) → upload a WebP version of the image, or use the Asset Manager (left panel → Assets) to replace the existing image with a WebP file.
2. Set 'Loading' to 'Eager' (not Lazy) for the hero image: in the Image Settings panel → Loading dropdown → select 'Eager'. Also set 'Preload' to 'High Priority' if available in your Webflow plan.
3. Add a preload link via Project Settings → Custom Code → Head Code: <link rel='preload' as='image' href='YOUR-WEBP-CDN-URL' fetchpriority='high'>. Get the CDN URL from the published page's source or the Assets panel.
4. Defer non-critical JS: in Project Settings → Custom Code, ensure third-party <script> tags in the Head have 'defer' added. Move non-critical scripts to the Footer Code field instead.
5. Review and remove unused Webflow interactions/animations on the hero section — heavy GSAP or Lottie animations above the fold significantly delay LCP. Delete or move them below the fold.
6. Publish and verify with PageSpeed Insights (mobile). Webflow's CDN (via Fastly) handles global delivery; the main wins are format, preload, and removing blocking resources.

<link rel="preload" as="image" href="/images/hero-banner.webp" fetchpriority="high" imagesrcset="/images/hero-banner-800.webp 800w, /images/hero-banner-1500.webp 1500w" imagesizes="100vw">

<!-- Hero img tag — NO lazy loading, explicit dimensions -->
<img src="/images/hero-banner.webp"
     srcset="/images/hero-banner-800.webp 800w, /images/hero-banner-1500.webp 1500w"
     sizes="100vw"
     width="1500" height="600"
     alt="Descriptive hero text"
     fetchpriority="high"
     loading="eager">

What is cwv lcp?

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page — almost always the hero image or headline banner — to fully appear on the screen after someone clicks your link. Google considers anything under 2.5 seconds "Good," 2.5–4 seconds "Needs Improvement," and over 4 seconds "Poor." An LCP of 7.5 seconds on mobile means shoppers are staring at a blank or half-loaded page for over seven seconds before they see your store's main content — a painfully long wait that drives them away before they ever see your products.

LCP is one of Google's Core Web Vitals, a confirmed ranking signal that directly affects where your store appears in search results. A poor LCP score suppresses organic traffic, meaning fewer potential buyers even find your store. On mobile — where most ecommerce browsing now happens — slow LCP dramatically increases bounce rates: studies consistently show conversions drop 4–8% for every additional second of load time. Improving LCP from 7.5s to under 2.5s can meaningfully lift both your search rankings and the percentage of visitors who stay long enough to make a purchase. Mobile-first indexing means Google judges your site primarily by its mobile experience, so a slow mobile LCP hurts your desktop rankings too.

See the complete Cwv lcp guide for every platform and the full background.