I recently added a Calendly booking widget to my site and noticed it’s making my pages load much slower. The performance hit is pretty noticeable.
I already tried adding the async attribute to the script tag to see if that would help:
<script type="text/javascript" src="https://calendly-assets.example/booking-widget.js" async></script>
Unfortunately this didn’t make much difference. My page speed is still slower than before. Has anyone else run into this issue? What are some other ways I can optimize how the Calendly script loads so it doesn’t drag down my site’s performance? I’m looking for practical solutions that won’t break the booking functionality.
Calendly widgets are performance killers. I’ve hit this problem tons of times.
The async attribute barely helps - Calendly still loads a bunch of background resources. Here’s what actually works:
Lazy load it. Don’t load anything until someone clicks. I wrap the Calendly embed in a placeholder div with a “Schedule Meeting” button. Script only loads when they click.
Move the script right before your closing body tag. Works better than async.
Switch from inline embed to popup version. Way fewer initial resources.
I also preconnect to Calendly’s domains:
<link rel="preconnect" href="https://calendly.com">
<link rel="preconnect" href="https://assets.calendly.com">
Lazy loading gave me the biggest boost. Went from 3 second delay to zero impact on page load.
Use a simple click event listener, or get fancy with an intersection observer.
yeah, calendly’s terrible for this. had same problem last month. switch to the popup modal instead of inline embed - way fewer resources loaded upfront. also double-check you’re not loading multiple calendly scripts by accident. i didn’t realize mine was loading twice on some pages and it made everything crawl.