Framer Core Web Vitals: How to Measure and Improve Your Scores

What Core Web Vitals Are (and Why They Matter for Framer Sites)

Core Web Vitals are a set of standardized, user-centric performance metrics that Google uses to measure real-world page experience. They are not abstract benchmarks, they measure how a real user experiences the act of loading your page: how quickly content appears, how stable the layout is, and how quickly the page responds to interaction.

Google officially incorporated Core Web Vitals as a ranking signal as part of the Page Experience update. Poor Core Web Vitals directly harm user experience, increase bounce rates, and reduce conversion rates, all of which have downstream effects on your site's performance in search.

The Three Core Metrics

First Contentful Paint (FCP) measures the time from navigation start to the moment the browser renders the first piece of DOM content. A fast FCP (under 1.8 seconds) reduces the perception of a slow or unresponsive page.

Largest Contentful Paint (LCP) measures the time from navigation start to when the largest visible element in the viewport has fully rendered. On most Framer landing pages, this is the hero image or the hero headline text. Google's "good" threshold is under 2.5 seconds; "needs improvement" is 2.5 to 4.0 seconds; anything above 4.0 seconds is "poor."

Cumulative Layout Shift (CLS) measures the sum of all unexpected layout shift scores during the page's lifetime. A layout shift occurs when a visible element changes its position between frames. CLS is scored as a unitless value; lower is better. The target is below 0.1.

Why Mobile Score Is the One That Counts

Google uses mobile-first indexing. This means Google primarily crawls and indexes the mobile version of your site. The Core Web Vitals data that Google collects through the Chrome User Experience Report (CrUX) is real-world data from mobile Chrome users. Your desktop Lighthouse score can be excellent while your mobile score is poor, and it is the mobile score that affects your rankings.

Mobile-First Mindset

When prioritizing performance improvements, test on mobile first and desktop second. A change that improves desktop LCP by 0.3 seconds is useful; a change that improves mobile LCP by 0.8 seconds is urgent.

How Framer Handles Performance Natively

Framer's publishing infrastructure provides a solid performance foundation that most web builders do not match.

Static Site Generation (SSG)

Framer generates static HTML files at build time rather than rendering pages dynamically on each request. This means when a user or Googlebot requests a page, the server sends a pre-built HTML file rather than executing server-side code. Static files are faster to deliver and eliminate server-side rendering bottlenecks.

Edge CDN Delivery

Framer delivers your static site through a global edge network. Your pages are cached at edge nodes geographically close to your users. Edge delivery reduces Time to First Byte (TTFB), which is a prerequisite for good FCP and LCP.

Rolldown Code Splitting

Framer uses Rolldown (a Rust-based JavaScript bundler) for code splitting. According to Framer's own benchmarks, Rolldown-based code splitting has delivered LCP improvements of up to 41% compared to previous bundling approaches.

Automatic Image Optimization

When you upload images to Framer, they are automatically converted to WebP format and served through Framer's CDN. Images are also resized and served at appropriate dimensions for the device viewing them.

Where Framer Falls Short Natively

Despite this foundation, Framer cannot optimize what you deliberately add to the design: heavy animations, third-party embeds, oversized images, custom code components with unoptimized external dependencies, and fonts without explicit size reservations.

How to Measure Core Web Vitals for Your Framer Site

Google PageSpeed Insights

Google PageSpeed Insights (PSI) at pagespeed.web.dev is the free, authoritative tool for Core Web Vitals measurement. Enter your page URL and PSI returns two types of data: lab data (a Lighthouse audit run in controlled conditions) and field data (real-world data from Chrome users in the CrUX dataset, if your site has enough traffic).

RankFrame Page Speed: Integrated Lighthouse for Framer

RankFrame's Page Speed feature removes this friction by running Google Lighthouse audits for mobile and desktop directly inside the Framer editor.

The Page Speed tab displays mobile and desktop Lighthouse performance gauges, Core Web Vitals per device, Speed Optimization Suggestions, and a Re-analyze button that triggers a fresh Lighthouse run after you make changes.

Improving LCP on Framer Sites

LCP is the Core Web Vital that most directly reflects how quickly users see the main content of your page. For Framer sites, it is also the metric most likely to be in the "needs improvement" or "poor" range on mobile.

Identify the LCP Element First

Before optimizing LCP, identify exactly which element Google is measuring as the LCP element on your page. Run your page through Google PageSpeed Insights and look for the "Largest Contentful Paint element" in the diagnostics section.

Optimize the Hero Image

If the LCP element is a hero image: use WebP format, size images to their display dimensions, set explicit dimensions, and use Framer's native image hosting.

Avoid Render-Blocking Resources

Render-blocking resources are scripts and stylesheets that must be downloaded and processed before the browser can render any content. In Framer, the most common render-blocking additions are synchronous third-party analytics scripts, chat widget scripts loaded in the <head>, and custom web font stylesheets without display=swap.

Minimize Animation Initialization Before LCP

Framer's animation system initializes JavaScript before rendering begins. The simplest fix is to either remove entrance animations from the LCP element itself, or set a very short (under 100ms) delay before the hero section animation starts.

Animation vs. Performance Balance

You do not need to remove all animations. Animations that run after the LCP element has already rendered do not affect the LCP score.

Improving CLS on Framer Sites

Cumulative Layout Shift is often the most confusing Core Web Vital to understand and the most surprising to encounter on Framer sites.

Set Explicit Dimensions on All Images

The most common cause of CLS on Framer sites is images without explicit width and height attributes. When a browser loads an image without knowing its dimensions, it allocates zero space for the image initially. When the image data arrives, the browser reallocates space and shifts all surrounding content.

Reserve Space for Third-Party Embeds

HubSpot forms, Typeform embeds, Calendly widgets, and video players all load content asynchronously. The fix is to set a fixed minimum height on the containing frame in Framer that matches the typical rendered height of the embed.

Manage Font Loading to Prevent Text Reflow

Custom web fonts that load after the initial page render cause text reflow. Framer's native Google Fonts integration includes display=swap by default, which allows text to be visible in the fallback font immediately and then swaps when the custom font is ready.

Avoid JavaScript-Triggered Layout Changes After Load

Any Framer component or custom code that modifies the DOM layout after the page has loaded contributes to CLS. For cookie banners and notification bars, reserve the space they occupy from the initial render rather than inserting them into the layout after load.

Improving FCP on Framer Sites

First Contentful Paint is usually the easiest Core Web Vital to bring into "good" range on Framer sites because the platform's SSG and edge CDN already handle the heaviest lifting. When FCP is poor on a Framer site, it almost always traces back to render-blocking resources.

Defer Non-Critical Custom Code Components

Framer supports custom code components, React components you write or import from npm packages. If a custom component loads a heavy JavaScript library synchronously, it blocks rendering until that library is downloaded and executed. The fix is to use dynamic imports in React (React.lazy with Suspense) to defer loading the component.

Reduce Synchronous External Script Loads

Every synchronous script tag in your page's <head> blocks rendering. In Framer's Site Settings under Custom Code, move any scripts that do not need to block rendering to the "End of Body" section and add the async attribute.

Third-Party Script Audit

If your Framer site has added multiple marketing and analytics tools over time, run a PageSpeed Insights audit and look at the "Reduce the impact of third-party code" opportunity.

Speed Optimization Suggestions in RankFrame

RankFrame's Speed Optimization Suggestions go beyond the generic by naming the specific files, resources, and byte sizes involved in each performance issue on your Framer site.

How to Read the Suggestions

Each suggestion in RankFrame's Page Speed panel follows a consistent format: the issue type, the specific resource or file causing the issue, and the potential improvement in seconds or bytes. For example: "Defer offscreen images, hero-background.webp (340 KB), potential saving: 0.8s LCP".

Iterating with the Re-analyze Button

After implementing a fix, click the Re-analyze button in RankFrame's Page Speed panel to trigger a fresh Lighthouse run. This gives you immediate confirmation of whether the fix improved the score and by how much.

Core Web Vitals Score Targets for Different Framer Site Types

These are realistic targets, not perfect targets. The goal is to be in the "Good" range for CWV metrics (LCP under 2.5s, CLS under 0.1, FCP under 1.8s) on mobile, not to achieve a theoretical perfect 100 score.

Reducing Animation Scope on Mobile

Framer's responsive design controls allow you to disable or simplify animations specifically for mobile breakpoints. Consider using simpler fade-in animations on mobile while keeping the full parallax and scroll-trigger effects on desktop.