FNJ

Framer Core Web Vitals: A Practical Guide

LCP, CLS, and INP are the three metrics that actually matter for ranking and user experience. Here's how a typical Framer site scores, and why.

PublishedJuly 17, 2026
Read time2 min
Written byThe Framer → Next.js team
All posts ↗

Core Web Vitals are the specific performance metrics Google factors into ranking, and they're worth understanding individually rather than just chasing a single Lighthouse score — because each one has a different, specific cause.

Largest Contentful Paint (LCP) — how fast the main content appears

Measures when the largest visible element (usually a hero image or heading) finishes rendering. On a typical Framer site, LCP is commonly held back by: an unoptimized hero image (wrong format, oversized for its display dimensions), font loading from an external CDN adding a connection round-trip before text can render in the correct typeface, or render-blocking JavaScript delaying paint. Good target: under 2.5 seconds.

Cumulative Layout Shift (CLS) — how much the page jumps around while loading

Measures unexpected layout movement as a page loads. Framer sites are usually reasonably disciplined here since the editor generally reserves space for elements — but a common culprit when CLS is bad is images or embeds without explicit dimensions, causing surrounding content to jump once the resource finishes loading and its actual size is known. Good target: under 0.1.

Interaction to Next Paint (INP) — how responsive the page feels to actual clicks/taps

Measures the delay between a user interaction and the page visibly responding. This is where Framer's runtime weight shows up most directly — a heavier JavaScript bundle means more main-thread work competing with your click/tap handler, which can measurably delay the page's response even on a device that's not obviously struggling. Good target: under 200ms.

What a runtime-stripped export typically improves

Removing Framer's JS runtime directly helps INP (less competing main-thread work) and often LCP (less render-blocking script). Self-hosting images and fonts helps LCP specifically. CLS is largely unaffected by export itself, since it's mostly a content-authoring concern rather than a platform overhead one — if your original Framer site had CLS issues, they typically carry through unless explicitly addressed.

How to actually check yours

Don't rely on lab data alone (Lighthouse) — check PageSpeed Insights for real-world "field data" from actual visitors (the CrUX report), where available for your domain. Lab and field data can diverge, and field data is what actually factors into ranking. If your site doesn't have enough traffic for field data yet, lab data from Lighthouse is the next best signal, run on your actual live URL rather than a local preview.

#framer#core web vitals#seo#performance#lcp

Convert your Framer site next

Free, takes about a minute, and you can preview the result before deploying.

Convert free →
Up nextThe Best Framer to Next.js Converter Options in 2026, Compared Honestly

Ready to convert your website?

Paste your published Framer URL to generate a production-ready project in minutes.

Framer Core Web Vitals: A Practical Guide — Framer → Next.js Optimizer