How can I improve page load speed on Webflow when embedding Calendly, as it is causing significant slowdowns and affecting animations?
TL;DR
- Use Calendly as a click-to-load pop-up or external link instead of inline embed to reduce initial page load impact.
- Defer and conditionally load Calendly scripts only when needed, and consider loading them dynamically within modals triggered by user interaction.
Embedding Calendly directly into a Webflow site can significantly impact page load speed and delay animations due to its heavy script load. To improve performance while still providing booking functionality, you can optimize how Calendly is used.
1. Use a Click-to-Load Pop-Up Instead of Embedding
- Avoid the inline embed, which loads Calendly's scripts and content immediately with the page.
- Instead, use a Calendly pop-up widget or pop-up text that delays loading until clicked.
- In Webflow, you can do this by adding a button or link and triggering Calendly via its pop-up JavaScript (e.g., using the link
https://calendly.com/your-linkwith data attributes or a script via custom code in the Footer).
2. Defer Calendly Scripts
- Calendly injects scripts that run on page load, which can block rendering.
- You can defer Calendly’s script by placing it inside your Footer Custom Code and adding the
deferattribute. - Example: Add your Calendly script with
deferin the Page Settings → Footer Code section to delay running until after the DOM is parsed.
3. Lazy Load or Use Conditional Loading
- Set Calendly scripts to load only on pages where it’s absolutely needed, instead of sitewide.
- Avoid placing Calendly code in Site Settings → Custom Code, unless it’s needed on every page.
4. Use Trigger Modals with Webflow Interactions
- Design a Webflow modal containing the Calendly inline embed, but load the Calendly code only when users open the modal.
- You can use a class-based trigger and then dynamically inject the Calendly
<div>with JavaScript when opened. - This avoids the browser downloading Calendly assets until the user requests them.
5. Replace Embed with External Link (Best for Performance)
- Instead of embedding Calendly, offer a clear call-to-action button that opens Calendly in a new tab (target="_blank").
- This completely removes Calendly from your site’s payload and isolates any third-party delays.
Summary
To improve loading speed on Webflow when using Calendly, avoid inline embeds, use click-to-load pop-ups, defer or conditionally load scripts, and where possible, link to Calendly externally. These approaches keep your Webflow animations smooth while still providing scheduling features.