Streaming live at 10am (PST)

Slow Pagespeed with calendly: Defer or asynchron loading for scripts

Hi guys,
I used calendly for my popup (click on the yellow primary button).

Unfortunately the script gets executed with the first rendering of the page, so the loading takes more time.

I tried async and defer attributes and also tried to show the embedded html after the page has been loaded through interactions. Nothing changed.

Any idea how to properly load the script after the page has been fully loaded?

Thanks!


Here is my site Read-Only: LINK
And my live site

Hi @creatspot, thanks for the post, I would put the code in the Footer instead of the head.

Shared with CloudApp

I hope this helps, remember to publish the site after code change update for changes to show live.

Side note, if you want to show a nice little loader screen while other content loads, I recommend a Pre-loader.

.cyberdave

Hi Dave, thanks for your message. This code is not the calendly code which is slowing down the page – That’s inside the embedded html. I also placed the calendly link in the before body tag but it’s not changing anything speed-wise.

The embed code can be found here:

Screenshot 2021-08-29 at 20.24.46

Hi @creatspot, thanks and you got me :slight_smile: I was seeing those document load statements in that first code and my eyeballs were tricking me :slight_smile:

I took a look and there is a script in that html embed that only need to be loaded a single time and it can be done in the footer.

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" defer></script>

I would load this script in the Footer in the site in the before body tag:

I would try that and see if it helps.

Hi @creatspot, I was doing some additional testing on the widget.js that calendly provided. Using an Ajax function to load the script after a document.ready call seems to boost the speed on my end from a 55 score to a 77 score.

$(document).ready(function() {
    $.ajax({
        url: "https://assets.calendly.com/assets/external/widget.js",
        dataType: "script",
        cache: true
    });
});

I would try that next.

1 Like

Thanks Dave. How do we implement that code? Posting it in the /header doesn’t seem to do anything.

jQuery code is typically placed in the before body close area since there is a dependency upon jQuery which is loaded by Webflow right before that.

Hi @cyberdave thanks for taking the time to look into it. I added the ajax function, but it didn’t change much on my site.

I used the Google Tag Manager to only load the script if you accept the cookies – that way no external javascript gets loaded beforehand.

1 Like

Thanks @creatspot thanks for letting me know, the results may vary depending on the scripts used, I am glad you found a solution, that might help others as well.