Framer Page Speed Optimization: A Technical Guide

Why Page Speed Is a Ranking Factor You Cannot Ignore

Google has used page speed as a ranking signal since 2010 for desktop and 2018 for mobile. With the Page Experience update, Core Web Vitals — Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) — became explicit ranking factors. A Framer site that scores poorly on these metrics will be at a disadvantage against competitors with similar content but faster pages. The good news is that Framer's architecture gives you a strong baseline. The bad news is that common design choices can erode that advantage quickly.

Understanding Framer's Performance Baseline

Out of the box, a minimal Framer page scores 95–100 on PageSpeed Insights. This is because Framer pre-renders pages to static HTML, serves them through a global CDN with edge caching, automatically compresses images to WebP, and ships a lightweight JavaScript runtime. The runtime handles page transitions, interactions, and scroll-triggered animations. As you add content, custom fonts, embedded videos, third-party scripts, and complex animations, performance degrades incrementally. The goal is to know which additions cost the most and how to mitigate their impact.

Optimizing Largest Contentful Paint (LCP)

LCP measures the time it takes for the largest visible element — usually a hero image or headline — to render. On Framer sites, LCP issues typically arise from unoptimized hero images, custom fonts that block rendering, or CMS-loaded content that is not prioritized. To fix LCP: compress hero images to under 150KB before uploading, use Framer's built-in image component which adds lazy loading and srcset automatically, and ensure your hero image is above the fold and not hidden behind a loading animation.

• Compress hero images to under 150KB using tools like Squoosh or TinyPNG before uploading to Framer.
• Avoid using background videos as LCP elements — use a static poster image with a play trigger instead.
• Preload critical fonts by adding tags in the site-wide custom code head section.
• Remove or defer any above-the-fold animations that delay content visibility.
• Use Framer's image component rather than background-image CSS for hero images to enable automatic optimization.

Fixing Cumulative Layout Shift (CLS)

CLS measures unexpected visual shifts during page load. The most common CLS culprits on Framer sites are images without explicit dimensions, custom fonts that swap and change text size, embedded content (iframes, videos) that load after the initial render, and sticky headers that push content down. To eliminate CLS: always set explicit width and height on all image components, use font-display: swap with fallback fonts that match the custom font's metrics, and reserve space for embedded content by setting fixed dimensions on iframe containers.

Reducing Total Blocking Time and INP

Total Blocking Time (TBT) and Interaction to Next Paint (INP) measure how responsive your page is to user input. Heavy JavaScript execution blocks the main thread and makes the page feel sluggish. On Framer sites, the biggest offenders are third-party analytics scripts (Google Tag Manager, Hotjar, Intercom), complex scroll-triggered animations that recalculate on every frame, and large custom code components that execute synchronously. Defer all non-essential scripts by loading them with the async or defer attribute, and move analytics to fire after the page has finished loading.

Third-Party Script Management

Every third-party script you add to a Framer site — analytics, chat widgets, pixel trackers, A/B testing tools — increases page weight and main thread blocking time. Audit your scripts quarterly using Chrome DevTools' Coverage tab to see how much of each script's code is actually executed on page load. Common optimizations: load Google Tag Manager asynchronously, replace Hotjar with a lighter alternative like Microsoft Clarity, defer Intercom until user scrolls or clicks, and use Google Analytics 4's gtag.js directly instead of loading it through GTM for simple setups.

Font Loading Strategy

Custom fonts are a frequent performance bottleneck on Framer sites. Each font file is typically 20–80KB, and loading multiple weights and styles can add 200–400KB to your page. Framer loads Google Fonts efficiently, but custom uploaded fonts may not be optimized. Best practices: limit yourself to 2 font families with a maximum of 3 weights each, use WOFF2 format exclusively for custom uploads, add font-display: swap via custom CSS to prevent invisible text during loading, and preload your primary heading font in the custom code head section.

Animation Performance

Framer's built-in animations use CSS transforms and opacity, which are GPU-accelerated and performant. Problems arise when you use custom code animations that trigger layout recalculations — animating width, height, top, left, or margin forces the browser to re-layout the entire page on every frame. Stick to transform (translate, scale, rotate) and opacity for all animations. For scroll-triggered effects, use Intersection Observer rather than scroll event listeners. If you need complex animation sequences, consider using Framer Motion's layout animation feature, which automatically uses transform-based animations.

Performance Monitoring Setup

Do not wait for traffic drops to discover performance issues. Set up ongoing monitoring with these tools: Google Search Console's Core Web Vitals report shows field data from real Chrome users, PageSpeed Insights provides lab data for specific URLs, and web-vitals.js can send real-user metrics to your analytics platform. Run PageSpeed Insights on your top 10 pages monthly and track scores over time. Any score drop of more than 5 points warrants investigation — check for newly added scripts, unoptimized images, or layout changes that introduced CLS.