Practical guide to Framer Core Web Vitals: what LCP, INP and CLS mean, what Framer handles for you, and the fixes I use to hit 90+ on real client sites.
Written by
Pavlo Zhydkykh
Core Web Vitals are the numbers Google uses to judge how fast your site feels, and they feed directly into rankings. Framer gives you a strong technical baseline out of the box, but a 90+ score is not automatic. Here is how I get real client sites into the green on every Core Web Vitals metric.
Key Takeaways
Framer's infrastructure — CDN hosting, image optimisation and code splitting — gives you a strong Core Web Vitals baseline before you touch a single setting.
LCP is usually decided by your hero section — compress the hero image and skip autoplay video backgrounds.
INP problems almost always trace back to overloaded animations and third-party scripts, not to Framer itself.
CLS is the easiest win: give every image and embed a fixed size and avoid late-loading banners.
Judge yourself on real-user field data in PageSpeed Insights, not on lab scores alone.
What Core Web Vitals actually measure
Core Web Vitals are three numbers Google collects from real Chrome users on your pages. They are part of Google's page experience signals, which means they influence rankings as well as how your site feels to visitors.
LCP (Largest Contentful Paint) — how quickly the main content becomes visible. Good is 2.5 seconds or less.
INP (Interaction to Next Paint) — how quickly the page reacts when someone taps, clicks or types. Good is under 200 milliseconds.
CLS (Cumulative Layout Shift) — how much the layout jumps around while loading. Good is 0.1 or less.
All three are judged at the 75th percentile of real visits. That is why a quick test on office Wi-Fi can hide a slow reality on mid-range phones — and why mobile is where you win or lose the green score.
What Framer already does for you
A lot of the classic performance checklist is simply not your job on Framer. Every site ships through a global CDN, images are converted to modern formats like AVIF and WebP with responsive sizes generated automatically, JavaScript is split per page, and there is no plugin ecosystem quietly injecting scripts into your head tag. I covered how this compares with a typical WordPress stack in my Framer vs WordPress guide.
That baseline is why a freshly built Framer site often scores 85 to 95 out of the box. The last few points — and staying in the green as the site grows — depend on the decisions you make inside the canvas.
A 90+ score is rarely won in the settings panel. It is won in the hero section.
How to fix LCP on Framer
On almost every Framer audit I run, a weak LCP comes down to the hero. This is the order I work in:
Compress the hero image before you upload it — aim for under 200 KB at roughly 2x its display size, then let Framer handle AVIF and WebP.
Replace autoplay background videos with a poster image, or load the video only after the first paint. Video heroes are the single most common LCP killer I see.
Limit custom fonts to two families and only the weights you actually use — every extra weight delays the headline render.
Keep the largest text or image inside the first viewport instead of hiding it behind an intro animation or preloader.
Do those four things and LCP under 2.5 seconds is realistic even on 4G. On real client projects this step alone has moved mobile scores from the low 70s into the 90s.
How to fix INP: animations and scripts
Interaction to Next Paint replaced First Input Delay in 2024, and it is stricter — it watches every interaction, not just the first. On Framer the culprits are predictable:
Animate transform and opacity only. Animating width, height or position forces layout work on the main thread and shows up directly in INP.
Cut the number of layers animating at the same time — one well-chosen scroll effect beats six competing ones.
Defer third-party embeds such as chat widgets, video players and analytics until after interaction or scroll. They compete with your visitors for the main thread.
Keep custom code components lean: memoise expensive work and avoid re-rendering on every scroll event.
Then test on a mid-range Android phone, not your MacBook. If the page feels instant there, your INP is almost certainly green.
How to fix CLS on Framer
Cumulative Layout Shift is the most mechanical of the three — and the fastest to fix:
Give every image and embed an explicit size or aspect ratio so the browser reserves the space before it loads.
Reserve room for cookie notices and announcement bars instead of letting them push the page down after load.
Be careful with fonts that swap in late — preload your main text family or pick one with similar metrics to the fallback.
Avoid inserting content above what a visitor is already reading, especially on blog templates.
How to measure Core Web Vitals properly
Lab tests and field data answer different questions, so use them in this order:
PageSpeed Insights — the top section shows real-user field data from the Chrome UX Report; this is what Google actually judges you on.
Lighthouse in Chrome DevTools — a lab test for fast iteration while you fix things.
Search Console's Core Web Vitals report — shows which URL groups pass or fail across the whole site.
If you want the wider picture of how performance fits into rankings — indexing, schema, internal linking — start with my complete Framer SEO guide.
Watch: Optimize for Core Web Vitals — a practical deep dive from the Chrome for Developers team: https://www.youtube.com/watch?v=AQqFZ5t8uNc
Want an SEO-first Framer website?
Pavlo Zhydkykh builds Framer websites where performance is part of the architecture, not an afterthought — sites that load fast, rank well and stay in the green as they grow. If your current site scores below 90 and you would like that fixed, get in touch and I will take a look.
