Core Web Vitals on Framer: How to Hit 90+ in 2026
Core Web Vitals are three Google metrics from real Chrome visits: LCP for loading, INP for responsiveness and CLS for visual stability. Core Web Vitals on Framer: How to Hit 90+ in 2026 is Pavlo Zhydkykh's fix list for Framer sites, from the hero image to third-party scripts.
Pavlo ZhydkykhUpdated · 5 min read
Short answer
Core Web Vitals are the numbers Google uses to judge how fast your site feels, and the numbers 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
- A good Largest Contentful Paint is 2.5 seconds or less, the target web.dev sets for a good user experience.[2]
- Each Core Web Vital is judged at the 75th percentile of page loads, segmented across mobile and desktop.[3]
- INP observes the latency of all clicks, taps and key presses during a visit, not only the first one.[4]
- Framer resizes every uploaded image into several sizes and lazy-loads images further down the page.[5]
- Framer builds by Pavlo Zhydkykh target PageSpeed 90+ on mobile at launch.
What is Core Web Vitals?
Core Web Vitals are the subset of Web Vitals that apply to every web page: Largest Contentful Paint (good at 2.5 seconds or less), Interaction to Next Paint (good at 200 milliseconds or less) and Cumulative Layout Shift (good at 0.1 or less), each judged at the 75th percentile of real visits.
“A 90+ score is rarely won in settings. I win the score in the hero: one compressed image, no autoplay video, two font families.”
Last checked · 5 min read
What Core Web Vitals actually measure
Core Web Vitals are three numbers Google collects from real Chrome users on your pages. The three are part of Google's page experience signals, which means Core Web Vitals 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 gives a freshly built Framer site a good start. The rest, and staying in the green as the site grows, depends on the decisions you make inside the canvas.
A 90+ score is rarely won in the settings panel. The score 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 the file - 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 the element behind an intro animation or preloader.
Do those four things and an LCP under 2.5 seconds is realistic on mobile.
How to fix INP: animations and scripts
Interaction to Next Paint replaced First Input Delay in 2024, and INP is stricter - INP 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. Those embeds 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 the content loads.
- Reserve room for cookie notices and announcement bars instead of letting those bars 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 both 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 the sites grow. If your current site scores below 90 and you would like that fixed, get in touch and I will take a look.
If you need this built
A Framer landing page from Pavlo starts at $1,200 (1 to 2 weeks), a multi-page site at $3,000 (2 to 4 weeks). SEO and GEO basics are included.
See Framer developmentFrequently asked questions
Does Framer guarantee a 90+ PageSpeed score?
No. Framer removes the infrastructure problems - hosting, image formats, code splitting - but your content decisions still set the score. A heavy hero or a wall of animations will drag any platform below 90.
Do Core Web Vitals really affect Google rankings?
Yes. They are part of Google's page experience signals. They act more as a tiebreaker than a dominant factor - but slow pages also convert worse, so the business case is bigger than SEO alone.
What is a good LCP time?
2.5 seconds or less, measured at the 75th percentile of real visits. Between 2.5 and 4 seconds needs improvement, and anything over 4 seconds is poor.
Why is my Framer site slower on mobile than on desktop?
Because Google's field data is dominated by mid-range phones on 4G connections. Oversized hero images, autoplay video and heavy scroll animations hit those devices hardest, so mobile is where you should optimise first.
How long until fixes show up in Google's data?
PageSpeed Insights and Search Console use a 28-day rolling window of real Chrome user data, so expect roughly a month before an improvement is fully reflected in your scores.
Written by
Independent designer and developer in Eastern Europe. He builds websites on Framer and on Astro with Sanity for AI, fintech and B2B startups, and writes these guides from client work.
First published · Updated
Start a project
Free tool Does ChatGPT recommend you? Free report in 48 hours · 5 AI engines
Checklist
7 signs a Framer page will miss 90 on mobile
The patterns Pavlo Zhydkykh finds on almost every Framer audit, roughly in the order he checks.
1. An autoplay video hero
Video heroes are the most common LCP killer Pavlo sees. A poster image, or video loaded after the first paint, removes most of the delay.
2. A heavy hero image
Pavlo compresses the hero file to under about 200 KB at roughly twice the display size before upload, then lets Framer serve the right size per screen.
3. A preloader or intro animation
Hiding the headline behind an intro pushes back the largest element on screen, and the LCP time moves with the headline.
4. More than two font families
Every extra family and weight delays the headline, and fonts that swap in late shift the text.
5. Chat widgets and trackers loading first
Third-party scripts compete with visitors for the main thread; deferring those scripts until scroll or interaction protects INP.
6. Images and embeds without a fixed size
Without a set size or aspect ratio the browser cannot reserve space, so the layout jumps and CLS grows.
7. Banners that push the page down
Cookie notices and announcement bars need reserved room instead of shifting content after load.
Fit check
Is a Core Web Vitals fix
right for you?
A good fit if
- Your Framer site scores below 90 on mobile in PageSpeed Insights.
- The hero uses a background video, a large image or an intro animation.
- Search Console's Core Web Vitals report lists URL groups that fail.
- You want Pavlo to find which layer or script is responsible and fix the page in Framer.
Not the right fit if
- You expect speed alone to lift rankings: Core Web Vitals act more as a tiebreaker than a dominant factor.
- You want a guaranteed score: Framer removes the infrastructure problems, but content decisions still set the number.
- You need the report green tomorrow: field data uses a 28-day rolling window, so a fix takes about a month to show.
Compared
Lab score vs field data
Pavlo Zhydkykh uses both, in this order: lab tests to fix the page, field data to confirm the fix.
| Criterion | Lab test (Lighthouse) | Field data (Chrome UX Report) |
|---|---|---|
| Source | One simulated load on one device | Real Chrome visits to the page |
| What Google judges | Not the lab score | The field data, as Core Web Vitals |
| Feedback speed | Instant, rerun after every fix | A 28-day rolling window |
| Best for | Iterating while fixing | Confirming the fix worked |
| Where to find | Lighthouse in Chrome DevTools | PageSpeed Insights top section and Search Console |
How it works
From a sub-90 score to green, step by step
How Pavlo Zhydkykh works through a slow Framer page, from diagnosis to confirmed field data.
| # | Step | When | What happens | You get |
|---|---|---|---|---|
| 01 | Read the field data | Start | PageSpeed Insights and the Search Console report show which URLs fail and on which metric. | The real problem, by metric |
| 02 | Fix LCP in the hero | Then | Hero image compressed, autoplay video swapped for a poster, fonts cut to two families. | A faster first view |
| 03 | Fix INP | Then | Animations limited to transform and opacity, third-party embeds deferred. | A page that reacts at once |
| 04 | Fix CLS | Then | A size on every image and embed, space reserved for banners. | A layout that holds still |
| 05 | Retest in the lab | Before publishing | Lighthouse rerun and a test on a mid-range Android phone. | Proof before the fix goes live |
| 06 | Confirm in the field | About a month later | The 28-day window of real Chrome data catches up with the fix. | A green report that holds |
In their words
Core Web Vitals, by the docs
and by Pavlo's clients
Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.
“To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less.”
“INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were beneath.”
“We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.”
“It was an absolute pleasure working with Pavlo. He's very professional and responds immediately to all questions and/or feedback. The quality of work he delivered was AMAZING.”
“He's amazing in what he contributes, both design-wise and also from the ideas.”
“One of the best contractors I have worked with. Really thoughtful about communication. Went above and beyond in delivering the results that our team needs. Would 100% hire again for our projects.”
About the author
Pavlo Zhydkykh
Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.
- Top Rated on Upwork
- 100% Job Success
- 10 years since 2016
- 50+ sites shipped
- 90+ PageSpeed at launch
About Pavlo LinkedInUpworkContra Privacy policy
Page reviewed by Pavlo Zhydkykh · Updated
In this topic
Framer guides
9 articles
- 01 Framer SEO Guide 2026: Rank Your Framer Site 7 min
- 02 Core Web Vitals on Framer: How to Hit 90+ in 2026 You are here
- 03 Framer CMS: The Complete Guide for Blogs & Portfolios Next
- 04 How to Add a Blog to Your Framer Website (2026 Guide) 3 min
- 05 Framer Animations: A Practical Guide for Real Sites 5 min
- 06 Can Framer Handle Custom Code and WebGL? (Yes! Here's How) 5 min
- 07 Is Framer Ready for E-commerce in 2026? 5 min
- 08 10 Framer Mistakes That Quietly Kill Your Conversions 5 min
- 09 Framer Website Redesign: Rebuild or Patch? (2026 Guide) 5 min