How to fix cwv lcp on Webflow

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

Steps for Webflow

  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your published Webflow URL. The LCP element is usually a Hero Section background image or a large <img> element at the top of the page.
  2. CONVERT TO WEBP/AVIF: In the Webflow Designer, select your hero image element › Asset panel › upload a WebP version of your hero image. Webflow also auto-generates WebP for images uploaded as JPEG/PNG in newer projects.
  3. SET LOADING PRIORITY: Select the hero <img> in the Designer › Element Settings (D key) › set Loading to 'Eager' and in the Custom Attributes panel add: Name: fetchpriority, Value: high.
  4. PRELOAD: Go to Project Settings › Custom Code › Head Code. Add: <link rel='preload' as='image' href='YOUR_WEBFLOW_IMAGE_CDN_URL' fetchpriority='high'>. Find the URL from the published page's source.
  5. DEFER JS: In Project Settings › Custom Code, move non-critical third-party <script> tags to the Footer Code section and add 'defer'. Do not defer scripts that must run before first paint.
  6. REMOVE INTERACTIONS FROM HERO: Webflow Interactions that trigger on page load for above-the-fold elements add JS weight. Simplify or remove entrance animations on the hero section.
  7. VERIFY: Publish the site and re-run PageSpeed Insights. Check Webflow's SEO settings confirm no lazy-load is applied to the hero.
Official Webflow documentation ↗

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 banner — to fully appear in a visitor's browser. Google considers a "good" LCP anything under 2.5 seconds. An LCP of 9+ seconds means shoppers are staring at a blank or partially loaded page for nearly ten seconds before they see your main content. LCP is one of Google's three Core Web Vitals, which are direct ranking signals used in Google Search.

A slow LCP directly hurts your Google rankings because Core Web Vitals are an official page-experience ranking factor — pages with poor LCP can lose positions to faster competitors even with identical content. More critically, research consistently shows that every additional second of load time reduces conversion rates by 2–7%; an LCP of 9 seconds can cost you the majority of mobile visitors who leave before the page even finishes loading. Mobile shoppers are disproportionately affected because mobile connections are slower, and Google indexes the mobile version of your site first. Fixing LCP is one of the highest-ROI technical improvements an ecommerce store can make: faster pages rank higher, bounce less, and convert better.

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

Not sure if your Webflow store has this?

Run a free SEOLZ scan — we’ll find cwv lcp and every other issue across your whole site.

Scan my site free

Fix cwv lcp on another platform