Framer vs Custom Website: When React Is Overkill for Your Marketing Site
By Rome Thorndike
Two Ways to Build a Website
Framer lets designers build websites visually and publishes them as React applications. A custom website is hand-coded in HTML, CSS, and optionally JavaScript. Both produce a website. The difference is what gets shipped to the browser.
Framer ships a React application: runtime, components, hydration code, framework CSS. A custom static site ships HTML, CSS, and minimal JavaScript. The difference in payload is 200-400KB of framework overhead that Framer adds and a custom site does not.
For a web application (a dashboard, a SaaS product, a social platform), React makes sense. For a marketing website (homepage, about, services, contact, blog), React is overhead with no benefit.
Performance: The Numbers
We compared typical Framer marketing sites against custom static sites of similar complexity:
| Metric | Framer (avg) | Custom Static (avg) |
|---|---|---|
| Mobile PageSpeed | 58 | 96 |
| LCP | 3.2s | 0.8s |
| Total Blocking Time | 350ms | 15ms |
| CLS | 0.12 | 0.01 |
| Total page weight | 1.4MB | 150KB |
| JavaScript shipped | 400-600KB | 5-15KB |
The 38-point PageSpeed gap is the difference between failing and passing Google's Core Web Vitals thresholds. Framer sites typically fail LCP and TBT on mobile. Static sites pass all three metrics comfortably.
The JavaScript difference is the most telling: Framer ships 400-600KB of JavaScript for a page that needs 5-15KB. That is 30-40x more JavaScript than necessary. On mobile, every KB of JavaScript costs parse time, compile time, and execution time.
What React Does on Your Marketing Page
When a visitor loads a Framer page, here is what React does:
- Server sends HTML. The initial HTML is server-rendered. This is fast. But it is not interactive yet.
- React runtime loads. The browser downloads 40-50KB (gzipped) of React framework code.
- Hydration begins. React walks through the entire DOM, attaches event listeners, and reconciles the server-rendered HTML with the client-side React tree. This means React re-processes every element on the page.
- Components initialize. Framer's component library initializes animations, responsive behaviors, and interaction handlers.
- Page becomes interactive. Only after steps 2-4 complete can the user interact with the page. Total time: 200-500ms on desktop, 500-1,500ms on mobile.
On a static HTML page, step 1 happens and the page is done. It is interactive immediately. There is no hydration because there is no framework to hydrate. There are no components to initialize because there are no components. Click events work because they are native HTML, not React synthetic events.
Hydration is the silent tax. It costs nothing when the page loads on a fast laptop with a fast connection. It costs 500-1,500ms on a mobile phone on a 4G connection. Google's PageSpeed test simulates exactly that scenario.
Cost Comparison
| Framer | Custom Static | |
|---|---|---|
| Build cost (designer/developer) | $3,000-10,000 | $3,000-6,000 |
| Monthly hosting | $10-30/site | $0 |
| Annual hosting | $120-360 | $0 |
| 3-year hosting total | $360-1,080 | $0 |
| Code ownership | No (platform-locked) | Yes (full ownership) |
| Export capability | No usable export | N/A (you already own the files) |
| Mobile PageSpeed | 50-70 | 90-99 |
Build costs are comparable. The cost difference is in hosting (Framer charges monthly, static is free) and ownership (Framer locks you in, static gives you everything).
Over 3 years, a Framer site costs $360-1,080 more in hosting alone. Factor in the performance disadvantage and the lock-in risk, and the total cost of ownership for Framer is significantly higher.
When Framer Wins
Framer is the right tool when:
- Designers need to ship without developers. If your workflow is designer-builds, designer-publishes, and no developer is involved, Framer is genuinely faster to build. The Figma-like interface is unmatched for designer-led teams.
- You are prototyping rapidly. If you need to test 10 landing page variants in a week, Framer's speed-to-publish is valuable. Performance matters less when the page is a 2-week experiment.
- Interactions are the product. If your site IS the portfolio and the interactions demonstrate your design capabilities, Framer's animation engine justifies the overhead.
For everything else (business websites, service pages, content sites, anything that needs to rank in search), custom static HTML is faster, cheaper, and gives you ownership.
Making the Decision
Ask two questions:
- Does your site need to rank in organic search? If yes, static HTML gives you a 30-40 point PageSpeed advantage. In competitive search categories, that is the difference between page 1 and page 2.
- Do you want to pay monthly for hosting forever? If no, static HTML on GitHub Pages or Cloudflare Pages costs $0. Framer charges $10-30/month indefinitely.
If both answers point to static, the choice is clear. New builds start at $3,000. Audit your current site or get a quote. See all pricing options.
Frequently Asked Questions
Is Framer faster to build than custom code?
For designers working without developers, yes. Framer's visual editor is faster for initial builds. But the ongoing costs (hosting, lock-in, performance limitations) make custom static HTML cheaper over time. Build speed vs long-term total cost is the core trade-off.
Can Framer sites rank on Google?
Yes, Framer sites can rank. But they compete with a PageSpeed disadvantage. Mobile scores of 50-70 mean failing Core Web Vitals thresholds. In competitive niches where other factors are equal, faster sites outrank slower ones. The ranking ceiling is lower on Framer than on static HTML.
Is React bad for websites?
React is excellent for web applications (dashboards, SaaS products, interactive tools). It is overkill for marketing websites. The runtime, hydration, and component overhead add 200-400KB of JavaScript to pages that need 5-15KB. The right tool depends on what you are building.
What is hydration and why does it slow my site?
Hydration is the process where React re-processes server-rendered HTML on the client side to attach event listeners and make the page interactive. On a marketing page with minimal interactivity, hydration adds 200-500ms of JavaScript execution time for little benefit. Static HTML is interactive immediately without hydration.
Ready to Fill Your Next Event?
We build the page, set up the pixels, and run the ads. You run the event.