Loading tutorials…
Loading tutorials…
Framer ships fast HTML out of the box. Then a marketing team adds images, animations, fonts, and pixels — and the mobile PageSpeed score collapses. This is the diagnostic sequence specialists run when a Framer site loses speed.
Who this is forFramer site owners watching mobile PageSpeed drop below 70 (or LCP slipping past 2.5s). If Google Search Console is flagging 'poor' Core Web Vitals or you're losing mobile conversions to slow loading, this is the playbook.
What you'll need
Step 1
Run pagespeed.web.dev on the slowest page. Record all four Core Web Vitals. Identify which is the limiting factor.
Open pagespeed.web.dev. Test the homepage (or the slowest page if you know it).
Record: Performance score (mobile), LCP, CLS, INP, TBT.
Targets: Performance 75+, LCP under 2.5s, CLS under 0.1, INP under 200ms.
Identify the worst-performing metric. Fix that one first. Don't scattershot — speed work compounds when you target the actual bottleneck.
Also note the "Opportunities" and "Diagnostics" sections — PageSpeed tells you which images, scripts, or fonts are the biggest costs.
Step 2
Images are the #1 cause of slow Framer sites. Audit the asset library and re-compress everything.
In Framer, open Assets panel. Sort by file size descending.
Anything over 500KB should be re-compressed or replaced. Hero images: under 300KB. Section images: under 200KB. Icons/decorative: under 50KB.
Use Squoosh.app (free, browser-based) or TinyPNG to compress. Convert to WebP when possible — typically 30-50% smaller than JPEG at equivalent quality.
For each image, check that the rendered size on the page matches the source size. Uploading a 4000x3000 image to display at 800x600 wastes 80% of the bytes.
After re-upload, re-run PageSpeed. LCP typically drops 30-60% from image optimization alone.
Step 3
Cumulative Layout Shift happens when images/videos load without reserved space. Set width/height on every media element.
Click each image/video on the page → right panel → confirm width and height are set in pixels (not "Hug" or "Fill" without explicit values).
For responsive images, use width: 100% with an explicit aspect-ratio (e.g., 16:9, 4:3). Framer's "Aspect Ratio" setting handles this.
For Lottie animations and embedded videos, wrap in a container with explicit dimensions.
Fonts can also cause CLS — see step 5.
Re-run PageSpeed. CLS should drop below 0.1.
Step 4
Framer lazy-loads images by default, but verify in DevTools. Force lazy-loading on any image that loads eagerly when it shouldn't.
Open Chrome DevTools → Network tab → filter by Img. Refresh the page.
Every image below-the-fold should load AFTER the page renders, not on initial load.
If an image loads eagerly when it shouldn't: in Framer, click the image → right panel → look for "Loading" property → set to "Lazy."
Background images set via CSS don't lazy-load by default. If a background image is below the fold, consider replacing with a foreground img or setting up Intersection Observer.
Step 5
Each font weight is a separate download. Loading 5 weights of one font adds 200-500KB. Use font-display: swap to avoid FOIT.
Audit fonts used: Project settings → Fonts. How many weights are loaded?
Limit to 2-3 weights per font family. Regular (400), Bold (700), and optionally Medium (500) covers 95% of cases.
For custom fonts uploaded to Framer, use WOFF2 format (smallest file size). Subset to Latin only if you don't need extended characters.
Set font-display: swap so text renders in fallback font immediately, then swaps when custom font loads. Avoids FOIT (Flash of Invisible Text).
In Framer, font-display is set automatically — verify by viewing source for "font-display:swap" in CSS.
Step 6
Each pixel (GA4, Meta, LinkedIn, Hotjar) adds 50-200KB. Audit which are needed; remove unused.
Project settings → Custom Code. List every pixel/script in Head start.
For each, ask: do I actively use this data? If you have LinkedIn Pixel but no LinkedIn ads campaign, remove it.
Use Google Tag Manager to load pixels conditionally — only fire ad pixels on conversion pages, only fire Hotjar on a sample of traffic.
Move non-critical scripts to Body end (loaded after page renders) instead of Head start. GA4 should stay in Head start; chat widgets can move to Body end.
After cleanup, re-run PageSpeed. TBT (Total Blocking Time) typically drops 30-50% from script reduction.
Step 7
Heavy animations (scroll-linked, parallax, large Lotties) cost frame time. Disable on mobile or replace with lighter versions.
Identify each animation: hover, page-load, scroll-linked. Scroll-linked are the most expensive.
For each scroll-linked animation, ask: does it add real value? If not, remove.
For animations you keep, use prefers-reduced-motion media query to disable for users with motion sensitivity (Framer handles this automatically for native motion).
Replace large Lottie animations with static SVG + CSS transition where possible. A static logo with a hover scale is 95% of the visual impact at 1% of the cost.
Re-run PageSpeed. INP (Interaction to Next Paint) typically improves the most after animation cleanup.
Common mistakes
Uncompressed hero images
What goes wrong: 4MB hero image. Mobile LCP hits 5-7 seconds. PageSpeed score under 40. Google demotes the page in mobile-first ranking. 40-60% bounce rate from slow loading.
How to avoid: Compress every hero to under 300KB. Use WebP. Set explicit dimensions in Framer to prevent CLS.
No lazy-loading below the fold
What goes wrong: All 30+ images on a long landing page load on initial render. Page weight is 8-12MB. Mobile data users on slow connections never see the page.
How to avoid: Verify Framer's default lazy-loading is on for every below-fold image. Use DevTools Network tab to confirm.
Too many font weights loaded
What goes wrong: Designer added 5 weights for visual hierarchy. Each weight is 30-80KB. Total font payload 200-400KB. Slows FCP (First Contentful Paint).
How to avoid: Limit to 2-3 weights per family. WOFF2 only. Subset to Latin.
Pixels in Head start blocking render
What goes wrong: GA4 + Meta + LinkedIn + Hotjar all in Head start, all synchronous. 200-400ms of script execution before the page can render. TBT exceeds 500ms.
How to avoid: Use Google Tag Manager. Async-load pixels. Move non-critical scripts to Body end.
Scroll-linked animations on long pages
What goes wrong: Every section parallaxes on scroll. Browser recalculates styles on every scroll event. Mobile feels janky. INP spikes to 400ms+.
How to avoid: Limit scroll-linked animations to 1-2 per page (above the fold). Use Appear (one-shot) animations for below-the-fold elements.
CLS from late-loading widgets
What goes wrong: Cookie banner, chat widget, or A/B test variant injects 1-2 seconds after page load and pushes content down. CLS shoots to 0.3+. User loses their place.
How to avoid: Reserve space for late-loading widgets via fixed-dimension containers. Or render server-side. Test CLS in PageSpeed Insights "Diagnostic" section.
Recap
Done — what's next
How to set up a Framer site end-to-end
Read the next tutorial
Hand it off
Core Web Vitals are a constant battle as the site adds pages, images, and pixels. A specialist who audits quarterly and fixes regressions typically runs $200-400/mo for ongoing optimization — usually pays for itself in conversion rate alone.
See specialist rates
Target: Performance score 75+, LCP under 2.5s, CLS under 0.1, INP under 200ms. Excellent: Performance 90+, LCP under 1.8s. Below 50 on Performance means Google demotes the page in mobile-first ranking.
Framer's hosting is uniform across plans — same CDN, same SSL, same performance. The difference between plans is features (CMS items, pages, team seats), not speed. If you need faster, the gains come from your content optimization, not Framer's tier.
No — Framer manages its own hosting. You cannot route through Cloudflare or another CDN. If you absolutely need that level of control, you'd need to migrate off Framer (to Webflow, Next.js, or similar).
Three possibilities: (1) image is large in dimensions even if small in file size — render-size mismatch; (2) image is loaded by a Code Component, which delays it; (3) network is the bottleneck on test (PageSpeed simulates slow 4G — sometimes inconsistent). Run the test 3 times, take the median.
Mobile CPU is 4-10x slower than desktop. Mobile network is throttled in the test (slow 4G). Every animation, large image, and script is amplified. Focus on: image compression, animation reduction, font weight cleanup. Each adds ~10 points to mobile score.
Framer
Framer feels like Figma until you hit publish — then it suddenly behaves like a real CMS. This walks the path from empty project to a live custom domain, including the breakpoint and domain-connect steps that trip up most first-time builders.
Framer
Framer is famous for animations — and just as famous for the sites that go from 90 PageSpeed score to 30 after a marketing team gets enthusiastic with motion. This walks the animation patterns that look great AND keep your site fast.
Framer
Framer doesn't have a native GA4 field — every install goes through Custom Code. Half of DIY Framer GA4 installs end up double-counting from the .framer.app staging subdomain or missing form-submit events entirely. This walks the full install.
Framer
Framer is gorgeous and accessible — until you hit the wall where every change costs you a day. This is the honest framework: when the time cost of DIY exceeds the cost of hiring, and how to tell which side you're on.
Webflow
Webflow doesn't have a native GA4 field anymore — every install goes through Custom Code. Most DIY setups end up double-counting from the webflow.io staging subdomain or missing events from form submits. This walks the install + the filters that fix both.