How to embed a Typeform in your website without slowing down your page

If you want to collect info from visitors—feedback, leads, sign-ups—Typeform is a slick option. But the second you embed anything from a third-party, your site’s performance is at risk. Slow load times cost you visitors, conversions, and sanity. If you’re a developer, marketer, or just someone who cares about not annoying users, this guide’s for you.

Let’s break down exactly how to embed a Typeform without turning your site into molasses.

Step 1: Understand Why Embeds Slow Things Down

Before you copy-paste any code, let’s get real about what embedding a Typeform actually does:

  • Typeform’s embed code loads JavaScript and CSS from their servers.
  • It can block rendering, especially if scripts aren’t loaded efficiently.
  • If Typeform’s servers are slow, your page feels it.
  • Tracking scripts may piggyback along, adding even more weight.

Bottom line: Out-of-the-box embeds are rarely optimized for speed. But most docs gloss over this.

Step 2: Pick Your Embed Method (And Know the Trade-offs)

Typeform gives you a few ways to embed forms:

1. The Standard Embed Code

  • How it works: You paste their <script> and a div where you want the form.
  • Pros: Dead simple.
  • Cons: Loads all the Typeform assets up front, even if the form is below the fold.

2. The Popup (Modal or Slide-in)

  • How it works: Visitors click a button or link, then the form pops up over your page.
  • Pros: Main page loads first; form assets load only when needed.
  • Cons: Adds an extra step for users. Won’t work for forms that need to be visible right away.

3. The Inline Embed (iFrame only)

  • How it works: You embed just the form as an <iframe> without their full script.
  • Pros: Isolated from your page. Can defer loading.
  • Cons: Loses some features (like tracking or logic jumps outside the form).

Honest take: If you care about speed, favor popups or lazy-loaded iframes. The standard embed is easiest, but often the slowest.

Step 3: Use Popups or Lazy Load Your Embed (Actual Speed Gains)

Here’s where you make the real difference.

Option A: Use the Popup Embed

This is the fastest for your main page. The form only loads when the user asks for it.

How to do it:

  1. Go to your Typeform dashboard, choose your form, and select "Share."
  2. Pick "Popup" (modal or slider).
  3. Copy the embed code.

It’ll look something like this:

html

Pro tip: Move the <script> loading embed.js to just before </body>, or load it only when the button is clicked (see below for how).

Even Better: Load Script Only on Demand

Instead of loading embed.js with the page, you can load it only when the user clicks the button:

html

Why bother? Your page stays light until someone actually wants to fill out the form.

Option B: Lazy-load an Inline Embed (for Always-Visible Forms)

If you have to show the form on page load, use an iframe and lazy-load it.

Here’s a basic pattern:

html

  • The form only loads when the user clicks "Show Form."
  • You can also trigger this on scroll, or when the form comes into view (using Intersection Observer).

Why not just use the embed script? Because their script loads code you probably don’t need, and it can block rendering.

Option C: Lazy-load with Intersection Observer (Advanced)

Want to get fancy? Auto-load the form only when it’s about to come into view:

html

  • This loads nothing until someone scrolls down to the form.
  • Works well for forms far down the page.

Step 4: Avoid the Usual Performance Traps

Even if you lazy-load, there are a few other pitfalls:

  • Don’t load multiple Typeforms per page unless you absolutely need them. Each adds overhead.
  • Don’t stack tracking scripts (Google Analytics, Hotjar, etc.) inside the Typeform if you’re already tracking on your site. Double-counting is real.
  • Watch out for Cumulative Layout Shift (CLS): Always set a min-height for your form container so your layout doesn’t jump when the form loads.

Step 5: Test—Don’t Trust the Docs

Docs and marketing pages love to say “fast,” but always check for yourself:

Pro tip: Test with and without the form loaded. The difference can be eye-opening.

Step 6: If You Need More—Go Headless or Native

If you need pixel-perfect control or want even less bloat:

  • Headless approach: Use Typeform’s APIs to build your own form UI, then push data to Typeform. It’s a project, but you get total control.
  • Native forms: If you just need a simple contact form, consider building it yourself or with a library. No third-party scripts = maximum speed.

Honest take: For most, popups or lazy-loaded iframes are enough. Don’t over-engineer unless you have a real reason.

Quick Recap & Real-World Advice

  • Embedding Typeform the “easy” way is rarely the fast way.
  • Use popups or lazy-load your embeds. Don’t load code until you have to.
  • Test your actual site speed. Don’t take their word for it.
  • Skip fancy tricks unless you need them—simple is fast.

The web’s already slow enough. Keep your forms lightweight, and tweak as you go. It’s easier than undoing a slow site later.