Webflow Image SEO and Core Web Vitals: Fixing LCP

Webflow does a lot of image optimization automatically. Responsive srcsets, WebP serving, a fast CDN — these are real advantages that most platforms require plugins or manual configuration to achieve. But there's one default that actively hurts performance on most Webflow sites: lazy-loading applied to hero images.

This guide covers what Webflow handles automatically, how to fix the LCP issue, alt text patterns for CMS images, and how to interpret your Core Web Vitals scores.

What Webflow Does Automatically

Before getting to the problems, it's worth understanding what you're getting for free.

Responsive srcsets. Every image you upload to Webflow gets multiple sizes generated automatically. Webflow adds a srcset attribute with multiple resolutions, and the browser picks the appropriate size for the device. A mobile visitor doesn't download a 2400px wide desktop image.

WebP serving. Webflow serves images in WebP format to browsers that support it (virtually all modern browsers). WebP files are typically 25–35% smaller than JPEG at equivalent quality. This happens without any configuration.

CDN delivery. Images are served from Webflow's CDN (AWS CloudFront). Edge nodes deliver images from a location close to each visitor. You don't manage this — it's included in every Webflow plan.

Compression. Webflow applies compression to uploaded images. The amount of compression isn't configurable per-image, but it's reasonable for most use cases.

These features put Webflow ahead of a bare WordPress install or a plain HTML site. The optimization baseline is strong.

The LCP Problem: Lazy-Loading on Hero Images

Largest Contentful Paint (LCP) measures how long it takes for the largest element visible in the viewport to finish rendering. On most landing pages, the largest viewport element is the hero image.

When an image has loading="lazy", the browser delays fetching it until the image is near the viewport. For images below the fold, this is correct and improves performance. For images that are in the viewport when the page loads — hero images, above-the-fold content — lazy-loading delays a resource that needs to be fetched immediately. The browser renders the initial HTML, sees a lazy image, waits until layout is complete, then starts the fetch. This delay adds directly to your LCP time.

Webflow applies loading="lazy" broadly. It doesn't distinguish between above-the-fold and below-the-fold images. Your hero image is almost certainly lazy-loaded unless you've changed it.

This is the #1 cause of poor LCP scores on Webflow sites.

The Fix: Set Hero Images to Load = Eager

Where: Select the hero image element in the Designer → Settings panel (the gear icon on the right) → Load dropdown → change from "Lazy" to "Eager"

That's it. One setting change per hero image. Webflow will render the image with loading="eager" (or without the loading attribute, which defaults to eager behavior), and the browser will fetch it as a high-priority resource.

After making the change, run your page through Google PageSpeed Insights. You should see your LCP score improve. On pages where the hero was the LCP element, it's common to see 1–2 second improvements.

For a deeper look at what constitutes a good LCP score and how to interpret your results, see what is a good LCP score.

Fetchpriority: Going Further

If setting Load = Eager isn't enough, you can add fetchpriority="high" to your hero image. Webflow doesn't expose this as a UI setting, but you can do it with a custom attribute.

In the Designer, select your hero image → Settings panel → Custom Attributes → Add:

• Attribute name: fetchpriority
• Attribute value: high

This tells the browser to prioritize fetching this image above other resources during the initial page load. Combined with loading="eager", this is the most aggressive approach to improving hero image LCP in Webflow.

Alt Text for CMS Images

Alt text serves two purposes: accessibility (screen readers describe the image to visually impaired users) and SEO (search engines use alt text to understand image content and context).

For static images: Select the image element → Settings panel → Alt Text field. Write a descriptive phrase that describes what's in the image. Don't start with "Image of" or "Photo of" — just describe it.

For CMS images: The alt attribute in Webflow's image element can be bound to a CMS field. Create a plain text field in your collection called "Image Alt Text" and bind the image's Alt Text to it.

Field: Image Alt Text (Plain Text)
Image element Alt Text: bound to "Image Alt Text" field

This lets your content team write appropriate alt text for each item rather than having a generic template string applied to every image.

For hero images on blog posts, a good alt text pattern is: [Subject] – [Context]. For example: Webflow Designer interface showing the image settings panel. Specific, descriptive, not a keyword-stuffed string.

Decorative images: Images that are purely visual decorations and add no content meaning should have empty alt text (alt=""). This tells screen readers to skip the image. In Webflow, set the Alt Text field to empty and check "Decorative image" if Webflow provides that option — or just leave the field empty and bind it to an empty string.

Image Dimensions and Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures how much the page layout shifts during loading. One common CLS source: images without explicit width and height attributes, where the browser doesn't know how much space to reserve until the image loads.

Webflow sets explicit dimensions on images based on the element size you've set in the Designer. But if your images are inside flexible containers (like a grid or flexbox layout that changes size on mobile), the actual rendered dimensions may differ from what Webflow baked in.

Check your CLS score in PageSpeed Insights. If it's above 0.1, look at the "Avoid large layout shifts" diagnostic — it'll identify which elements are shifting. Images without reserved space are often near the top.

The fix is usually to set an explicit aspect ratio on the image container, so the browser reserves the space even before the image loads:

.hero-image-wrapper {
  aspect-ratio: 16 / 9;
}

You can add this in Webflow's custom CSS section (Site Settings → Custom Code → Header or via the Embed element).

Image File Size Before Uploading

Webflow generates responsive sizes and compresses images automatically, but it starts from whatever you upload. A 15MB RAW image converted to JPEG is going to generate large srcset variants even after Webflow's compression.

Before uploading hero images to Webflow:

1. Resize to a maximum of 2400px wide (larger than any display size you need)
2. Compress to under 500KB using a tool like Squoosh or ImageOptim
3. Save as JPEG for photos, PNG for graphics with transparency

Webflow will then generate WebP versions and multiple sizes from this already-optimized source. The output will be significantly smaller than starting from an uncompressed original.

Running a Core Web Vitals Audit

Run every important page through PageSpeed Insights and look at the three Core Web Vitals:

For Webflow sites, LCP is the most common failing metric because of the lazy-loading issue. CLS shows up occasionally with image-heavy layouts. INP (Interaction to Next Paint, which replaced FID in 2024) is rarely a problem on standard Webflow sites unless you've added heavy JavaScript.

RankCrab's audit runs a Lighthouse check via Google PageSpeed Insights on every audited URL, so you get these scores alongside all 80 on-page checks in one report. If your Webflow site has hidden CWV problems, running the audit will surface them.

The SEO for Webflow hub covers everything else you need: meta tags, CMS templates, redirects, and sitemap. If you're doing a full pre-launch review, use the SEO checklist for Webflow sites as your working document.