LCP Webflow

Fix LCP in Webflow

Updated April 18, 2026 14 min read 5 steps

Webflow makes it easy to build visually impressive sites, but the same design features that make Webflow appealing -- rich interactions, animation-heavy hero sections, and extensive custom code integrations -- can significantly hurt Largest Contentful Paint (LCP). The most common causes in Webflow are hero images set to lazy load by default, above-fold entrance animations that delay element visibility, and third-party analytics and marketing scripts added to the page head. The five fixes in this guide address those causes directly using Webflow's Designer interface, custom attributes, and Site Settings panels -- no code export required.

Expected results

Before

4.5s

LCP (Poor) -- lazy hero image, blocking scripts, above-fold animations

After

1.9s

LCP (Good) -- preloaded WebP hero, deferred scripts, transform-only interactions

Step-by-step fix

Use WebP images with explicit dimensions in Webflow Designer

Webflow automatically converts uploaded images to WebP format and serves them through its Imgix CDN, which handles resizing and format negotiation. However, you still need to set explicit pixel dimensions and the correct loading priority for your hero image in the Designer. Select the hero image element and open the Settings panel. Set the width and height to match your intended display dimensions -- this ensures the browser can reserve the correct space and avoids layout shift. In the Custom Attributes section of the Settings panel, add two attributes: fetchpriority set to high, and loading set to eager. By default, Webflow may apply lazy loading to images that appear low on the initial page, but the hero image almost always needs eager loading regardless of its position in the designer's element tree. Also ensure the image file you upload is appropriately sized -- uploading a 4000px wide image for a 1200px display size wastes bandwidth even with Imgix resizing.

HTML -- Webflow Custom Attributes output 
<!-- Webflow Designer: Image Element > Settings > Custom Attributes -->
<!-- Add these two custom attributes to your hero image element: -->

<!-- Attribute 1: -->
<!-- Name: fetchpriority    Value: high -->

<!-- Attribute 2: -->
<!-- Name: loading          Value: eager -->

<!-- Webflow renders the following HTML output: -->
<img
  src="https://uploads-ssl.webflow.com/[site-id]/[image-id]/hero.webp"
  width="1200"
  height="600"
  alt="Hero image"
  fetchpriority="high"
  loading="eager"
  srcset="...480w, ...800w, ...1200w"
  sizes="100vw"
  class="hero-image"
>

<!-- For the preload link, add this in Site Settings > Custom Code > Head: -->
<link
  rel="preload"
  as="image"
  href="https://uploads-ssl.webflow.com/[site-id]/[image-id]/hero.webp"
  fetchpriority="high"
>

Minimize custom code and third-party scripts

Webflow Project Settings has a Custom Code section with three areas: Head Code, Body Start Code, and Body End Code. Any script placed in the Head Code section blocks HTML parsing and delays the browser from reaching the LCP element. A common mistake is pasting Google Analytics, Meta Pixel, Hotjar, and other tracking scripts into the Head Code section because the vendor documentation says to. While some of these tools do provide a small window in which head placement is beneficial for tracking accuracy, the performance cost is significant. Move all analytics and marketing scripts to the Body End Code section (just before ) and add the defer attribute. For scripts that must stay in the head (such as scripts that prevent flash-of-unstyled content), add async if the script is self-contained. Remove any scripts from services you no longer use -- these are easy to forget and often represent 30 to 100KB of unnecessary blocking JavaScript.

HTML -- Webflow Project Settings > Custom Code 
<!-- BAD: analytics script in Head Code (blocks parsing) -->
<script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>

<!-- GOOD: GTM in Body End Code with defer -->
<script defer src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>

<!-- GOOD: Load analytics after LCP is painted (Body End Code) -->
<script>
  // Load heavyweight scripts after load event fires
  window.addEventListener('load', function() {
    // Hotjar
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      // ... rest of hotjar snippet
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  });
</script>

<!-- Meta Pixel: defer in Body End Code -->
<script defer>
  !function(f,b,e,v,n,t,s){
    // Meta Pixel base code
  }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
</script>

Optimize Webflow interactions and animations

Webflow's Interactions panel makes it simple to add scroll animations and entrance effects to any element. However, entrance animations on above-fold elements create a direct LCP penalty. When an element starts with opacity: 0 and animates to opacity: 1, the browser counts the element as not painted until it becomes visible. If your hero image or main heading uses a fade-in entrance, your LCP measurement is the time until the animation completes rather than the time until the element is downloaded and rendered. The fix is to either remove entrance animations from above-fold elements entirely, or replace them with interactions that do not affect visibility: use transform: translateY() animations that start from a visible state and move to the final position, keeping opacity: 1 throughout. For scroll-triggered animations on below-fold sections, continue using entrance effects freely -- they only affect LCP if the element is in the viewport on initial load.

CSS -- Webflow interaction performance rules 
/* BAD: Hero section starts invisible (direct LCP penalty) */
/* Webflow Interactions: Page Load > Start Value: opacity 0 */
/* This delays LCP until the fade-in completes */

/* GOOD: Use transform-only animations for above-fold elements */
/* Webflow Interactions: Page Load > Start Value: opacity 1, Y offset 20px */
/* End Value: opacity 1, Y offset 0px */
/* No visibility change = no LCP impact */

/* For complex hero animations, use CSS directly in Custom Code: */
.hero-section {
  /* Remove Webflow interaction and use CSS animation instead */
  animation: hero-enter 0.6s ease-out both;
  /* 'both' fills forwards AND backwards -- element starts in start state */
}

@keyframes hero-enter {
  from {
    opacity: 0.99;            /* NOT 0 -- avoid LCP penalty */
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Best practice: disable above-fold interactions in Webflow Designer
   Navigator > Hero Section > Interactions panel > remove Page Load trigger */

Enable Webflow's built-in page preloading

Webflow Hosting includes a built-in asset CDN powered by AWS CloudFront and Fastly. To get the most from it, navigate to your project's Site Settings, then open the Hosting tab. Ensure your site is published to Webflow's hosting (not a custom export) to benefit from these features. For critical assets, you can add preload hints in the Head Code section of Project Settings. The most important preload is for your hero image. Find the image URL from your published site (inspect the rendered image in Chrome DevTools and copy the full src URL including the Imgix parameters), then add a preload link tag to the Head Code. You can also preconnect to Webflow's CDN origin and Imgix to eliminate connection setup time for image requests. This combination -- CDN delivery plus explicit preloading -- produces the fastest possible image delivery on Webflow Hosting.

HTML -- Site Settings > Custom Code > Head Code 
<!-- Webflow Site Settings > Hosting > Custom Code > Head -->

<!-- Preconnect to Webflow's image CDN (reduces connection time) -->
<link rel="preconnect" href="https://uploads-ssl.webflow.com">
<link rel="preconnect" href="https://assets-global.website-files.com">

<!-- Preload hero image (copy exact URL from published site) -->
<link
  rel="preload"
  as="image"
  href="https://uploads-ssl.webflow.com/[site-id]/[image-hash]/hero.webp"
  imagesrcset="
    https://uploads-ssl.webflow.com/[site-id]/[hash]/hero-p-500.webp 500w,
    https://uploads-ssl.webflow.com/[site-id]/[hash]/hero-p-800.webp 800w,
    https://uploads-ssl.webflow.com/[site-id]/[hash]/hero.webp 1200w"
  imagesizes="100vw"
  fetchpriority="high"
>

<!-- Preload critical font (if using Webflow-hosted custom font) -->
<link
  rel="preload"
  as="font"
  href="https://uploads-ssl.webflow.com/[site-id]/[font-hash]/font.woff2"
  type="font/woff2"
  crossorigin
>

Reduce CSS complexity from Webflow's generated styles

Webflow generates CSS based on the classes you create in the Designer. Each unique class combination produces CSS rules in the published stylesheet. Sites built without a class naming strategy -- where every element gets its own one-off style instead of reusing shared classes -- accumulate hundreds of near-duplicate CSS rules. A larger CSS file takes longer to download and parse, delaying the browser's ability to apply styles and paint the page. Follow Webflow's recommended class structure: use a single base class (such as button) for shared styles, then add a modifier combo class (such as button--primary) only for variants. Avoid more than two levels of combo classes on a single element. Audit your existing classes using the Webflow Designer's Style Manager to identify classes used only once -- these are candidates for consolidation. Reuse section and component classes across pages rather than duplicating sections with fresh styles.

CSS -- Webflow class naming best practices 
/* BAD: one-off classes per element (bloated generated CSS) */
.hero-button-blue-large { ... }
.hero-button-white-small { ... }
.cta-button-rounded-blue { ... }
/* Result: 3 nearly-identical CSS rules, never reused */

/* GOOD: base class + modifier combo class */
/* In Webflow Designer: apply 'button' class, then add 'is-primary' combo */
.button {
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.button.is-primary {
  background: #0066FF;
  color: white;
}
.button.is-secondary {
  background: transparent;
  border: 2px solid currentColor;
}

/* Webflow Style Manager audit:
   Designer > Style Manager (paint icon in left panel)
   Filter by "Used 1 time" to find consolidation candidates
   Merging 50 single-use classes into shared components
   typically reduces CSS by 15-30KB */

Quick checklist

  • Hero image has Custom Attributes fetchpriority=high and loading=eager in Webflow Designer
  • Hero image preload link added in Site Settings > Custom Code > Head
  • All Head Code scripts moved to Body End Code with defer attribute
  • Above-fold entrance animations removed or replaced with transform-only (no opacity 0 starts)
  • Preconnect links added for Webflow's CDN origin domains
  • Style Manager audited for single-use classes -- consolidated into shared component classes

Frequently asked questions

Google's Good LCP threshold is under 2.5 seconds. Well-optimized Webflow sites on Webflow Hosting typically achieve 1.5 to 2.2 seconds on desktop. Mobile LCP is more variable and depends heavily on whether above-fold interactions have been disabled and whether custom scripts have been deferred. Reaching under 2 seconds on mobile requires addressing all five of the optimizations in this guide.

Yes, positively. Webflow Hosting uses AWS CloudFront as its CDN and automatically serves images through Imgix, which converts uploaded images to WebP and applies size optimization. This is significantly better for LCP than self-hosted alternatives. However, the hosting infrastructure only helps with asset delivery speed -- image discovery timing and JavaScript blocking are still governed by your design choices in the Webflow Designer.

Webflow interactions that animate above-fold elements on page load can directly delay LCP. If your hero image or heading starts invisible and fades in via an entrance interaction, the browser does not register the element as painted until after the animation completes -- artificially inflating your LCP measurement. Disable entrance animations on above-fold elements entirely, or ensure they start visible and animate into a non-hidden final state.

Select the hero image element in the Webflow Designer. In the Settings panel (gear icon) on the right, scroll down to Custom Attributes. Add a new attribute with the Name fetchpriority and Value high. Also add a second attribute with Name loading and Value eager. These attributes are output directly on the rendered <img> element and signal to the browser that this image should be fetched with the highest priority available.

Webflow and WordPress have comparable LCP potential when both are properly optimized. Webflow's advantage is its built-in Imgix CDN for automatic WebP conversion and managed hosting. WordPress's advantage is more granular server-side control and plugins like WP Rocket for advanced caching and prefetching. Unoptimized Webflow sites can actually score worse than optimized WordPress sites due to interaction-heavy designs and generated CSS volume. The performance gap between optimized and unoptimized is larger in Webflow than in WordPress.

Google rates LCP as 'good' when it is under 2.5 seconds at the 75th percentile. For Webflow applications specifically, aim for under 2.0 seconds. Measure with field data from Chrome User Experience Report (CrUX) through PageSpeed Insights, as lab tests may not reflect real-user experience with third-party scripts and varying network conditions.

Guide

Complete LCP Guide

Deep dive into LCP measurement, thresholds, element types, and optimization strategies for any stack.

 Fix

Fix LCP in WordPress

WordPress-specific LCP fixes including image optimization plugins, caching, and theme performance settings.

 Fix

Fix LCP in Shopify

Shopify LCP fixes using image_tag, theme.liquid preloading, app auditing, and the Dawn theme.

Continue learning

Guide

Complete LCP Guide

Deep dive into LCP -- thresholds, measurement, and optimization strategies.

 Fix

Fix CLS in Webflow

Related performance optimization for the same framework.

 Tool

CWV Score Explainer

Enter your scores for personalized fix recommendations.