Building High-Performance Websites With Framer

Framer makes it easy to build visually stunning websites. But a beautiful site that loads slowly is a problem for both users and SEO.

This is how we build Framer sites at Soleno that look sharp and perform well.

Why Performance Matters

Google uses Core Web Vitals as a ranking signal. The three metrics that matter:

LCP (Largest Contentful Paint): how fast the main content loads. Target: under 2.5 seconds.
INP (Interaction to Next Paint): how fast the site responds to clicks. Target: under 200ms.
CLS (Cumulative Layout Shift): how much the layout moves during load. Target: under 0.1.

A Framer site that nails these metrics gets better search rankings, lower bounce rates, and more conversions.

Image Optimization

Images are usually the biggest performance bottleneck. In Framer:

Use WebP or AVIF formats where possible. They're 30 to 50 percent smaller than JPEG or PNG.
Set explicit dimensions on every image to prevent layout shift (CLS).
Use lazy loading for images below the fold.
Compress aggressively. Most hero images look great at 80 percent quality.
Avoid oversized images. A hero image doesn't need to be 4000px wide. Match it to the max display size.

Animation Performance

Animations are Framer's superpower, but they can kill performance if you're not careful.

Do:

Animate transform and opacity. Both are GPU-accelerated and don't trigger layout recalculations.
Use will-change sparingly, and only on elements that actually animate.
Keep scroll-triggered animations simple. Complex parallax on every element adds up fast.
Test on mobile devices, not just your MacBook Pro.

Don't:

Animate width, height, top, or left. These force expensive layout recalculations.
Stack dozens of animated elements on a single page.
Auto-play heavy video backgrounds without thinking about mobile data.

Font Loading

Custom fonts can cause layout shift and slow down rendering.

Limit to 2 font families. Each additional font is another network request.
Use font-display: swap so text renders immediately with a fallback font.
Subset your fonts. If you only need Latin characters, don't ship Cyrillic and Greek glyphs.

CMS Considerations

If your Framer site uses CMS collections:

Keep collection pages lean. Don't load every field on list pages.
Optimize CMS images the same way you optimize static images.
Paginate if you have more than 20 or 30 items in a collection.

Testing Your Performance

Before launching any Framer site, we run it through:

Google PageSpeed Insights for Core Web Vitals scores.
WebPageTest for detailed waterfall analysis.
Real device testing. Chrome DevTools throttling doesn't perfectly simulate real phones.

A site that scores 90+ on PageSpeed Insights is the minimum bar. We aim for 95+.

The Bottom Line

Framer gives you incredible design flexibility. The trick is using it intentionally. Every animation, image, and font choice should be deliberate.

A fast Framer site isn't the result of doing less. It comes from being careful about what you do. Not sure if Framer is the right platform? Check our comparison of Framer vs Webflow.

At Soleno, every Framer site we build is optimized for performance from day one, not bolted on at the end. Let's build something fast.

Frequently asked questions

Is Framer actually good for SEO, or just for design?

Framer renders static HTML by default and gives you control over meta tags, schema, sitemaps, and canonical URLs. The platform itself isn't slow. Most templates are, because they ship with heavy fonts and animations nobody trims. We've launched Framer sites that score 95+ on Lighthouse mobile and rank for competitive keywords. The ceiling is how you build inside Framer, not Framer itself.

Why is my Framer site slow on mobile?

Usually three culprits. Hero images over 200KB. Five or six Google Font weights loading on every page. Animations firing on load instead of on scroll. Convert images to WebP under 200KB, pick two font weights at most, and trigger heavy animations only when a section enters the viewport. Those three fixes alone often take a Framer site from a Lighthouse score of 40 to 85 or higher.

Can a Framer site rank as well as a Next.js site?

For marketing sites under 50 pages, yes. Google can't tell the difference between well-built Framer and well-built Next.js. Where Framer falls behind is large-scale programmatic SEO with thousands of templated pages, and anything that needs real app behavior. For studio sites, SaaS landing pages, and most blogs, the platform isn't a ranking factor.

Should I use Framer's built-in CMS or something external like Sanity?

For a blog with fewer than 100 posts and one or two authors, Framer CMS is plenty and saves you a backend. Move to Sanity or Payload when you need multi-author workflows, approval flows, or you want to power a Framer site and a mobile app from the same content source. Pick based on your team size and how often you publish, not on what looks impressive.