How to Make a Framer Site Load Faster

Most slow Framer sites are not slow because of Framer. They are slow because of what got added on top: a background video, a chat widget, three analytics scripts, a 3D embed, and a hero with enough effects that the phone in someone's hand struggles to keep up.

You can find most of these problems in one focused session. This guide walks through the audit in the order we would run it on a client site: measure first, rule out what Framer already handles, then fix what usually costs the most. The Framer-specific advice below is based on Framer's own site speed guidance.

Measure before you change anything

Run your published site through PageSpeed Insights and save the results. Test your homepage and your heaviest landing page, since one page rarely tells the whole story. Start with the mobile tab, because that is where weight and scripts hurt the most.

Then look at the three Core Web Vitals and their "good" thresholds:

Largest Contentful Paint (LCP): the main content appears within 2.5 seconds.
Interaction to Next Paint (INP): the page responds to input within 200 milliseconds.
Cumulative Layout Shift (CLS): layout movement stays at 0.1 or lower.

Do not chase a perfect Lighthouse score. It moves between runs, so test each page a few times and compare typical results. If your site has enough traffic to show field data, trust that over the simulated test, because it reflects what real visitors experienced.

Stop doing the work Framer already does

Designers often spend time compressing images by hand out of habit. Framer automatically optimizes most images, so you do not need to resize them or convert them to WebP yourself. Upload regular images as they are and set the resolution to Auto. For SVGs, Framer recommends creating a frame and dropping the image inside it.

While you are here, open Menu → Site Settings → Versions. Your latest version should show "Optimized". If it shows "Optimization Error", something on the site needs review, and that is worth solving before you tune anything else.

Clean up your fonts

Fonts are a small job with a visible payoff, because they affect how quickly your headline becomes readable. Work through this list:

Prefer Google Fonts when the brand allows it. They load faster because only the characters a page needs are downloaded.
Stay between Light and Extra Bold. Within that range, Framer's font-display: swap setting keeps text visible while the font loads.
Re-upload old custom fonts. Anything added before November 2023 should be uploaded again so it converts to the smaller WOFF2 format.
Remove what you do not use. Fewer families and weights also make the design more consistent.

Rethink how you use video

Video is usually the largest thing on a page, and it comes with a catch: Framer serves uploaded videos at their original resolution. A large file you upload for a big desktop hero is the same file a visitor gets on a phone with a weak connection.

A simple rule covers most cases. If people are meant to watch the video with sound, such as a product demo or a testimonial, use YouTube or Vimeo from the Insert menu. Those players adjust quality to the network and screen size. If the video is ambient, keep it short and compress it before you upload it.

Also avoid autoplay where you can, because it uses bandwidth other elements need during loading. When you do want motion in the background, make the video muted and looped with no controls. Framer lazy-loads that setup and plays it only when it is visible.

Put your scripts on a budget

Scripts are where sites quietly get worse over time. Someone adds a heatmap tool for a two-week test, and it is still there a year later. Open Project settings → Custom code and each page's Page settings → Custom code, then list every script along with who uses it and why. Anything without an owner is a candidate for removal.

For the scripts that stay:

Load them only where they are needed. A newsletter script used on one page belongs in that page's settings, not in the site-wide code.
Use defer by default. Otherwise, place script tags at the end of the body.
Use async only when a script must load as fast as possible.
Never leave out both on an external script. Inline scripts and module scripts are already handled, so they do not need this.

Test embeds on a duplicate site

Third-party embeds such as HubSpot forms and Spline 3D scenes can slow a site down. Framer lazy-loads them, but they still add code. It is hard to judge the cost by looking at the page, so measure it: duplicate the site, remove the embeds from the copy, publish it, and run the same PageSpeed tests.

That gives you a number to take into the decision. If a form embed costs a lot, ask whether a native Framer form would do the job. If a 3D scene is decorative, ask whether a still image would communicate the same thing. Sometimes the embed earns its place, and then you can keep it knowing what it costs.

Go easy on effects that hurt scrolling

Not all slowness shows up in load time. A page can score well and still feel rough when you scroll, and heavy visual effects are a common reason. Framer's guidance here is specific:

Use Appear effects on key elements at the top of the page, since they load before JavaScript.
Avoid Scroll Animation effects on those same elements.
Use shadows and blurs sparingly, and keep blur values below 10.

Check the published site on a real mid-range phone. A speed score will not tell you whether scrolling feels smooth, but your thumb will.

The order we would fix things in

If you only have one session, this sequence tends to give you the most return for the least risk:

Save baseline PageSpeed results for your two most important pages.
Check that the latest version shows "Optimized" in Site Settings.
Remove unused scripts and move page-specific ones out of the site-wide code.
Replace large uploaded videos with YouTube or Vimeo where that fits, and turn off autoplay where you can.
Test each embed's cost on a duplicate site.
Tidy up fonts and re-upload old custom files.
Reduce blurs and shadows, and move scroll effects away from the top of the page.
Publish, test again, and compare against your baseline.

Change one group of things at a time when you can. If the numbers move, you will know why.

Speed work rarely stays finished. New sections, campaign scripts and embeds add up, especially once a client starts editing the site. Re-run the same tests after any major update, and agree with whoever manages the site that each new script needs an owner and a reason.

A fast Framer site is mostly the result of restraint. Let Framer handle images, be selective about video and embeds, and treat every script as something that has to justify its cost. Then measure again, so your decisions come from your own pages and not from guesswork.