Slow Pagespeed with calendly: Defer or asynchron loading for scripts

Design help Custom code
1

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!

Screenshot-2021-08-28-at-20.56.12
Screenshot-2021-08-28-at-20.56.122000×770 81.1 KB

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

1 Like
2

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

3

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

4

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.

5

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
6

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

7

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.

8

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
9

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.

10

Hey, I’d love to know more about the code above!

55 to 77 sounds amazing, but I don’t recognise the code you’ve posted or where it would go. It doesn’t seem similar to anything in the Calendly embed code so I’m not sure what to do with it. If I add it (just as you’ve posted it) to the ‘before body’ area, it’s just grey, and Webflow doesn’t seem to know what to do with it.

Is there some kind of wrapper that it should be putting it in, that people who know how to code would just take for granted? Or does it actually go somewhere else (i.e. not the page custom code editor, and not the embed object code editor).