How to make your Framer site load fast: a practical performance checklist

A Framer site can look finished in the editor and still feel slow on a real phone. The hero video takes a second too long, the fonts swap halfway through the first scroll, and the page jumps as images load in. Visitors rarely say "this site is slow". They just leave, and the client sees a bounce rate instead of a reason.

The good news is that most speed problems in Framer come from a short list of design decisions, not from the platform. Framer already handles hosting, image resizing and caching for you. What it cannot do is stop you from putting a 40 MB video in the hero. This checklist covers the decisions that make the biggest difference, in the order we check them on our own projects.

1. Measure before you change anything

Start with numbers, not a feeling. Publish the site and run the live URL through Google PageSpeed Insights. Look at the mobile tab first, because that is where most problems show up and where most of your visitors are.

Write down three values so you can compare after each fix:

• Largest Contentful Paint (LCP): how long the biggest visible element, usually the hero image or heading, takes to appear. Aim for under 2.5 seconds.
• Cumulative Layout Shift (CLS): how much the page jumps around while loading. Aim for under 0.1.
• Total page weight: listed in the diagnostics. This tells you whether the problem is heavy assets or something else.

Test the pages that matter most: the home page, the main landing page and the page your ads point to. A fast home page does not help if the pricing page carries three autoplay videos.

2. Treat the hero as a budget

The first screen decides your LCP score, so it deserves the strictest rules. Everything above the fold competes for the same few hundred milliseconds.

A few rules we follow:

• One main visual per hero. A product shot plus a looping video plus a Lottie animation is three downloads before the visitor sees anything useful.
• If the hero is a video, keep it short, muted and compressed. A 6–10 second loop at 720p usually looks fine on a laptop and loads far faster than 4K footage.
• Give the hero video a poster image so something appears right away.
• Make sure the main heading is live text, not part of an image. Text renders almost instantly.

3. Export images at the size they are shown

Framer resizes and serves images through its CDN, but it works from what you upload. A 6000-pixel PNG straight from a mockup tool still costs more to process and can still lead to heavier files than you need.

Before you upload, export images at roughly twice the largest size they appear on screen. For a card that is 400 pixels wide, 800 pixels is enough. Use JPG or WebP for photos and screenshots, and keep PNG for graphics that need transparency. Run large files through a compressor first; most images lose 50–70% of their weight with no visible difference.

Also check background images on sections. They are easy to forget because they do not appear in the layers panel the same way regular images do.

4. Be selective with fonts

Every font weight is a separate file. A site that uses a display font in two weights and a text font in four weights asks the browser for six files before the typography settles.

1. Pick one text family and use at most three weights: regular, medium and bold usually cover everything.
2. Use the display font only where it earns its place, such as headings, and limit it to one weight.
3. If you upload custom fonts, use WOFF2 files. They are the smallest format modern browsers support.
4. Remove unused fonts from the project's font settings so they are not loaded by mistake.

Fewer weights also make the design more consistent, so this is one change clients rarely push back on.

5. Reserve space to stop layout shift

Layout shift happens when content loads and pushes other elements down. In Framer, the usual causes are images and embeds without a fixed height, and CMS lists that render after the rest of the page.

Give images and video containers a fixed aspect ratio or height, especially in stacks that change at each breakpoint. For embeds such as forms, calendars or videos from other sites, set a minimum height that matches the loaded content. Then reload the page on a slow connection and watch whether anything jumps. You can simulate this in your browser's developer tools by choosing a slower network profile.

6. Audit embeds, scripts and code components

Third-party code is the most common reason a clean Framer site scores badly. Chat widgets, analytics tags, cookie banners, booking embeds and heatmap tools each load their own scripts, and some of them load more scripts in turn.

Every script you add should answer one question: what decision will this data or feature help the client make?

Open the site's custom code settings and list everything that is there. Remove tools nobody checks anymore. Move scripts that do not need to run right away to the end of the body instead of the head. For heavy embeds like maps or video players, consider showing a static preview image that loads the real embed only when clicked.

Code components deserve the same review. A component that pulls a large library to animate one button is rarely worth the cost.

7. Keep effects purposeful

Scroll effects, appear animations and parallax are part of why people choose Framer, and used well they make a site feel considered. Used everywhere, they keep the browser busy on every scroll, which makes cheaper phones stutter.

Animate the moments that matter, such as a hero reveal or a key feature section, and let the rest of the page simply appear. Prefer transform and opacity effects over ones that change size or layout. Check every animated section on a real mid-range phone, not only on your design laptop.

8. Recheck after every big content change

Performance is not a one-time task. A site that scored well at launch can slow down after a client adds ten new case studies with full-resolution images. Agree on a simple rule with the client: images go through the same export and compression step before upload, and new scripts get a quick conversation before they are added.

A short handoff note with these rules, plus your baseline scores, makes it easier for the client to keep the site fast without you.

Conclusion

A fast Framer site comes from a few clear choices: a light hero, right-sized images, fewer font files, reserved space for media, and only the scripts that earn their place. Measure first, fix the biggest problem, measure again. Most sites reach good scores after an hour of focused cleanup, and your visitors notice the difference even if they never put it into words.