Google Core Web Vitals for Framer Sites: 2026 GuideIn this article
- What Are Core Web Vitals?
- LCP: Largest Contentful Paint
- CLS: Cumulative Layout Shift
- INP: Interaction to Next Paint
- How Framer Performs by Default
- Optimizing Each Metric
- Tracking Your Scores
Core Web Vitals are Google's official user experience metrics — and they directly influence your search rankings. For Framer designers, understanding these metrics is the difference between a site that ranks and one that doesn't.
This guide breaks down each metric, explains what Framer handles automatically, and shows you exactly what you need to optimize yourself.
What Are Core Web Vitals?
Google uses three metrics to measure real-world user experience:
These metrics are measured on real user devices (Chrome User Experience Report) and reported in Google Search Console. Sites that meet "good" thresholds for all three get a ranking boost.
LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible element to render. On most Framer sites, this is the hero image.
| Score | Rating | SEO Impact |
|---|---|---|
| ≤ 2.5s | Good ✅ | Ranking boost |
| 2.5-4.0s | Needs Improvement ⚠️ | Neutral |
| > 4.0s | Poor ❌ | Ranking penalty |
What Causes Bad LCP on Framer Sites
- Oversized hero images — a 4MB PNG hero image takes 4-6 seconds to download on mobile
- Uncompressed source images — Framer's CDN resizes but can't fix a bloated source
- Too many above-fold images — multiple images competing for bandwidth
How to Fix LCP
- Identify your LCP element using PageSpeed Insights
- Open Skwiz and find that specific image
- Convert to WebP, quality 82, max width 1920px
- Target: under 200KB for the LCP image
- Re-test — you should see a 1-3 second improvement
CLS: Cumulative Layout Shift
CLS measures unexpected layout shifts during page load — when elements move around as the page renders.
| Score | Rating |
|---|---|
| ≤ 0.1 | Good ✅ |
| 0.1-0.25 | Needs Improvement ⚠️ |
| > 0.25 | Poor ❌ |
Framer generally handles CLS well because its layout system defines dimensions before images load. However, CLS issues can occur when:
- Images load lazy without reserved space
- Custom code components inject content dynamically
- Font loading causes text reflow
INP: Interaction to Next Paint
INP measures how quickly the page responds to user interactions (clicks, taps, key presses). This replaced FID (First Input Delay) in 2024.
| Score | Rating |
|---|---|
| ≤ 200ms | Good ✅ |
| 200-500ms | Needs Improvement ⚠️ |
| > 500ms | Poor ❌ |
INP is mostly controlled by Framer's JavaScript runtime. As a designer, you have limited direct control. However, heavy image decoding can block the main thread and worsen INP. Compressed images decode faster because there's less data to process.
How Framer Performs by Default
Out of the box, a typical Framer site with unoptimized images scores:
After optimizing images with Skwiz:
Image optimization alone moves LCP from "Poor" to "Good" and improves INP as a side effect. CLS stays unaffected.
Tracking Your Scores
- Google Search Console → Core Web Vitals report — shows site-wide health over time
- PageSpeed Insights → Lab + field data for specific URLs
- Chrome DevTools → Performance tab for real-time debugging
Check Search Console monthly. If you see URLs flagged as "Poor" for LCP, the fix is almost always image optimization.