How to Set Image Above the Fold set to Eager

Images above the fold should load immediately. By default, Webflow sets images to lazy load, which tells the browser to wait until an image is near the viewport before downloading it. That's the right default for most images — but not the ones visible before any scrolling happens.

Above-the-fold images are visible the moment the page loads. If they're lazy, the browser still has to detect the image is in the viewport, request it, then download it. That delay adds up. Google measures it as Largest Contentful Paint (LCP), one of the three Core Web Vitals. A hero image set to lazy can be your entire LCP problem on mobile.

How to fix it in Webflow: click on any image in your canvas. In the Settings panel (the gear icon), look for the "Loading" option. It defaults to "Lazy." For any image visible without scrolling — your hero, your logo, any imagery in the navbar — switch this to "Eager."

What counts as above the fold: the fold is the bottom of the browser window on first load, before any scrolling. Everything visible within that area on desktop and mobile should be Eager. Everything below should stay Lazy. A common mistake is setting the hero image to Eager but forgetting the logo in the navbar, which is sometimes the LCP element on certain pages. Check both.

CSS background images are handled differently: if your hero uses a background image set via Webflow's style panel, the Loading attribute doesn't apply. CSS background images load when the browser encounters the CSS rule — they don't support lazy or eager through Webflow's UI. If LCP performance matters, use an Img element for your hero (which supports Loading: Eager). Alternatively, preload the background image in Webflow's custom code head section with a link rel="preload" as="image" tag.

Monthly audit: run PageSpeed Insights on your homepage and top landing pages. If LCP is failing, the diagnostic tells you what the LCP element is. If it's an image, check whether it's set to Eager in Webflow. Fix it, republish, retest.

Every time you add a new section to the top of any page, ask whether it contains an image. If it does, set it to Eager. It takes ten seconds and can move your LCP score from failing to passing on mobile.

Most Webflow sites fail LCP on mobile for exactly this reason. It's one of the quickest wins in technical Webflow SEO.