Your Framer site loads like it's on dial-up
You compressed the images. You uploaded WebP. Lighthouse still hates you.
Good news: the problem is almost never the thing people tell you to fix.
I audit Framer sites every week. The same five things come up every time, and none of them are image sizes.
The blur problem
Blur values above 10 kill performance. Most designers don't know this because it looks fine on their M-series Mac. Open the same site on a client's 2019 Intel laptop or a mid-range Android and it stutters like a slideshow.
Glassmorphism heroes are the worst offender. A blur of 40 on a 1600px wide frame with anything animating behind it will drop a 60fps animation to 24fps on mid-range hardware.
The fix is ugly but it works. Wrap the blurred element in a frame, export it as a PNG at 2x or 3x, drop it back in. You keep the look. You lose the frame drops.
Rule of thumb: if a blur value needs to go above 10, it's not a blur anymore, it's an image. Treat it like one.
Appear vs Scroll animations in the fold
Appear effects load before JavaScript. Scroll Animation effects don't.
If you're using Scroll Animations for anything above the fold, your LCP tanks. The browser has to download, parse, and execute JavaScript before your hero text shows up. That's 800ms to 1.2s of your visitor staring at blank space on a 3G connection.
The rule:
Appear effects for anything in the first viewport
Scroll Animation for everything below the fold
I've done this swap on client sites and watched LCP drop from 3.1s to 1.6s with zero other changes. Free performance.
Third-party scripts are quietly destroying your site
HubSpot form. Intercom widget. Spline embed. Google Tag Manager. Hotjar. Every one of them adds weight. A site with four of these loading on every page is carrying 800KB of JavaScript before your own content shows up.
The fix isn't ripping them out. It's loading them where they belong.
Site Settings → Code is for scripts that need to run on every page. Analytics, GTM, cookie banners. That's it.
Page Settings → Code (on each individual page) is for scripts that only one page needs. A HubSpot form on /contact. A Calendly embed on /book. A Stripe script on /pricing.
Most Framer sites I audit have everything dumped into Site Settings. The HubSpot script is loading on the homepage, the blog, the 404, the about page. It's only used on one page. That's 200KB of wasted weight on every single page load.
Then there's the script type:
async loads in parallel, executes as soon as it arrives. Use this for scripts that need to run fast.
defer loads in parallel, waits for the page to finish parsing before executing. Use this for scripts that aren't urgent.
Neither blocks the page while it loads. Never use this. It will tank your LCP.
Framer's built-in script embed gives you the placement (end of <head> or end of <body>). Put non-critical scripts at the end of <body>. Put scripts that need to modify the head (structured data, meta tags) at the end of <head>.
Quick audit: open Site Settings → Code right now. For each custom script, ask: "Does every page need this?" If no, move it to the page that actually uses it. I've seen this one change drop LCP by 600ms.
Videos are not optimized by Framer
This one catches everyone. Framer fetches your video. It doesn't optimize it. A 50MB hero video is a 50MB hero video.
You have three options.
Option 1: YouTube or Vimeo embed. They adapt quality to network speed and screen size. Mobile user on 4G gets a 480p version. Desktop on fiber gets 1080p. You do nothing. Downside: the player is theirs, the branding is theirs, and mobile autoplay is limited.
Option 2: Bunny.net. This is what I use when a client needs high quality video without the YouTube look. Upload to Bunny Stream, get a clean embed URL, drop it into Framer. Bunny transcodes the video into multiple resolutions automatically and serves the right one based on the viewer's connection and screen. You keep full control of the player, no third-party branding, and the CDN is fast everywhere. Works out of the box with Framer's video component or a standard HTML5 video tag in an embed. For a 4K hero video or a product demo that needs to look sharp, this is the right call.
Option 3: self-host directly in Framer. Under 5MB. Muted. Looped. No controls. No autoplay on mobile. Any of those missing and you're shipping a 20MB file to someone on a train tunnel connection. Only do this for short decorative loops.
A client had a 1-minute hero video at 42MB self-hosted. Moved it to Bunny. LCP went from 4.2s to 1.8s. Same video. Higher quality on desktop. Zero design changes.
Rule: short decorative loop under 5MB, self-host. Anything longer or higher quality, Bunny. Anything where you don't care about the player, Vimeo or YouTube.
The code component crash nobody explains
Open your published site. You see "We detected a problem in one of your code components/overrides." Your dev tools show nothing useful. You stare at the override you wrote in ChatGPT last week.
It's almost always one thing. A useEffect returning something that isn't a function.
Broken:
useEffect(() => counterRef.current++, [someState])
The arrow function with no curly braces returns the result of the expression. In this case, a number. React expects either nothing or a cleanup function. It gets a number. It crashes.
Fixed:
useEffect(() => {
counterRef.current++
}, [someState])Curly braces. Now the function returns undefined, which is what React wants.
If your component pulls from window, document, or navigator, wrap those calls in a useEffect too. Framer server-side renders your pages and those APIs don't exist on the server. Access them on mount, not during render.
The 10-minute audit
Go do this right now.
Open Menu → Site Settings → Versions. Is the latest version marked Optimized? If not, republish.
Search your canvas for any blur above 10. Export as PNG. Replace.
Check your hero section. Is anything using Scroll Animation? Swap to Appear.
Audit Site Settings → Code. Any script that only one page needs? Move it to Page Settings.
Check every self-hosted video. Over 5MB? Move to Bunny or Vimeo.
Five checks. Ten minutes. Usually worth 20-30 Lighthouse points.
When none of this works
Most "Framer is slow" takes are wrong. Framer isn't slow. Sites get built slow.
If you've done everything above and your site is still dragging, the problem is deeper. Usually architecture. Too many CMS collection queries on one page. Overrides fighting each other. Custom fonts loading before Framer's own CSS. That's the stuff you can't fix in ten minutes.
That's what I do.
Work with me →
New to Framer? Get 3 months free on the Pro plan when you sign up yearly with my referral link: framer.link/framerexpert