By Mehdi HassanHow do you improve Core Web Vitals on Framer, Webflow and Next.js sites?
You improve Core Web Vitals on each platform by working within the controls it gives you. Framer and Webflow handle hosting, image resizing and much of the build for you, so the fixes are mostly about choices you make in the editor. Next.js gives you full control, so the fixes are about build decisions.
This is a fix guide, not a platform comparison. If you're choosing a platform, that's a different decision. Here we assume you're staying where you are and want to pass LCP, INP and CLS for real visitors. For the metrics themselves, see Core Web Vitals explained for marketers and founders.
Platform | Handles for you | You control | Usual failing metric |
|---|---|---|---|
Framer | Hosting, CDN, image resizing, code output | Effects, embeds, custom code, fonts, image choices | INP and LCP on mobile |
Webflow | Hosting, CDN, responsive image variants | Interactions, lazy loading, custom code, fonts, page structure | INP, sometimes LCP |
Next.js | Image, font and script tooling if you use it | Rendering, hydration, hosting, everything else | INP; LCP if pages are dynamic |
Which fixes apply to every platform?
Three fixes apply everywhere: cut third-party scripts, treat the hero as the LCP element, and reserve space for anything that loads late. Do these before any platform-specific work, because they're often the largest wins.
- Third-party scripts. Analytics, chat, heatmaps, A/B testing and ad pixels add main-thread work on every platform. Remove what nobody uses and load the rest late; our third-party scripts audit gives the method.
- The hero. Compress the hero image or video poster, don't lazy load it, and keep the headline visible from the first paint. Our guide to improving LCP goes deeper.
- Reserved space. Images, embeds and banners need dimensions or fixed containers so they don't shift content.
- Fonts. Load fewer families and weights, and prefer a variable font.
How do you improve Framer performance?
Improve Framer performance by simplifying effects, limiting embeds and code components, and keeping the hero's main content visible on load. Framer optimizes images and hosting well, so most problems come from what's added in the canvas.
Remove appear effects from the LCP element
An appear or entrance effect that starts the hero headline or image at zero opacity delays the largest paint. Keep it visible and animate supporting elements instead.
Reduce scroll effects and long animations
Scroll-linked transforms and many simultaneous effects add main-thread work, which hurts INP on mid-range phones. Keep the ones that explain the product.
Audit embeds and code components
Third-party embeds for forms, video, calendars and reviews each load their own scripts. Replace them with native elements or click-to-load versions where you can.
Check image sizes at upload
Framer resizes images, but very large source files and huge background videos still cost time. Upload sensibly sized files and compress video.
Trim custom code in site settings
Scripts added to the site head load on every page. Move page-specific scripts to the pages that need them.
How do you improve Webflow page speed?
Improve Webflow page speed by setting the hero image to load eagerly, trimming interactions, and controlling where custom code loads. Webflow generates responsive image variants for you, but its defaults aren't tuned for the hero.
- Hero image loading. Webflow images default to lazy loading. Set the hero image to eager in the image settings so it starts downloading immediately.
- Interactions. Large interactions that run on page load or on scroll, especially across many elements, are a common INP cost. Simplify them, and use CSS transitions for simple hovers.
- Custom code placement. Code in the head runs before the page renders. Put scripts before the closing body tag, or load them after interaction.
- Background images and videos. Background images set in the style panel skip the responsive image variants. For the hero, use an image element positioned behind content.
- Fonts. Upload only the weights you use, and check the font settings for a font-display option so text shows while fonts load.
- CMS pages. Collection lists with many images should paginate or limit items, since every image and card adds work.
Webflow's own documentation covers image settings and custom code placement on webflow.com. The principles match the other platforms: less script, earlier hero, reserved space.
How do you improve Next.js Core Web Vitals?
Improve Next.js Core Web Vitals by keeping marketing pages static, keeping client components small and using the built-in image, font and script tools with the right settings. Next.js gives you good defaults, but they're easy to undo.
Field data published by corewebvitals.io for the second quarter of 2026 shows only about two-thirds of Next.js sites passing INP, with a median around 236ms. In practice, the cause is usually one of the items below rather than the framework itself.
- Static rendering. Check the build output. A cookies, headers or uncached fetch call in a shared layout can turn every page dynamic and slow the first byte.
- Client components. Marking a whole section as client code hydrates everything inside it. Keep interactivity in small leaf components.
- Images. Use the Image component with real sizes values and priority on the hero only. Our guide to next/image, fonts and scripts has the defaults.
- Scripts. Load tags with the Script component and lazyOnload or click-to-load for widgets.
- Hosting. Static pages on a CDN serve fast anywhere; see hosting Next.js on Cloudflare Workers for a low-cost setup.
- Upkeep. Framework updates bring performance improvements, so keep dependencies current as covered in keeping a Next.js site healthy.
Hypothetical example: the same page on three platforms
For example, suppose a startup has the same pricing page design on Framer, Webflow and Next.js, each with a chat widget, a tag manager and a monthly or annual toggle.
On Framer, the fix is removing the appear effect from the plan cards' headline, replacing the chat embed with a click-to-load button and moving a script out of the site head. On Webflow, it's setting the hero image to eager, simplifying the toggle's interaction and moving custom code to the footer. On Next.js, it's making the toggle the only client component on the page and loading chat on click. The chat widget fix is the same everywhere.
When is the platform itself the limit?
The platform is the limit when you've removed scripts, fixed the hero and simplified effects, and field data still fails on core pages. At that point, more optimization rounds are wasted money, and the question becomes whether the design needs to change or the platform does.
Be honest about which it is. Often the design is the constraint: heavy motion everywhere, multiple videos and many embeds would fail on any platform. Sometimes it's the reverse, and a coded site with a shared design system would give you the control you need. Moves in either direction are covered in our guides to moving from code to a visual builder and choosing a platform for your marketing site. For INP specifically, our guide on how to fix INP helps you check whether you've exhausted the fixes first.
