Page Load Time Issues with Meetings

SOLVE
RebeccaCwick
Member

We are having some issues with page load time. Can we turn off some settings/tracking to help speed up our page load? We need to optimize for page loading speed when our HubSpot services are being used?

We have noticed that the demo button we use on our site using this JS code ….

<div class="meetings-iframe-container" data-src="https://app.hubspot.com/meetings/starchaptermeetings/starchapterdemo?embed=true"></div>

<script async="" src="https://fullstory.com/s/fs.js" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>

</div>

…. is causing a large change in our site performance. We would like to know if you have a recommended method whereby, we can load this script after the page loads (deferred loading) so that it will not impact the user experience? We have considered using a load event and then loading your script, but we don't want to break the script based on how it works on your end and would like your guidance.

 

Most of what I got came from the Google Dev tools "lighthouse" (in the inspector) and tools.pingdom.com. However, those tools will not help you all. What we did with those tools is compare our site load speed with and without hubspot on our site and That was the big difference. Page size, load time, additional references, and time to interact all increased significantly when hubspot code was on our site.

The question we really need answered is "can we load your stuff after the page loads or will that break your stuff".”

0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Recognized Expert | Partner

Thanks @dennisedson 

 

Hey @RebeccaCwick 

You can defer the scripts using the "defer" property:

<div class="meetings-iframe-container" data-src="https://app.hubspot.com/meetings/starchaptermeetings/starchapterdemo?embed=true"></div>

  <script src="https://fullstory.com/s/fs.js" crossorigin="anonymous" defer></script>

  <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js" defer></script>

</div>

But this won't speed up the page, it will just prevent that script's loading from blocking the rendering of the page.

 

An important question to ask is why are you trying to speed up the page load?

Is it because Google says it's slow?

Or is it because the scripts are blocking the rendering of the page, aka making the pages unusable on first paint?

 

This comes up quite often here on the forum. Poke around a little and see what others have found:

- See what @stefen and @Jsum had to say here

View solution in original post

3 Replies 3
dennisedson
Community Manager

Hello @RebeccaCwick 

Thank you for the question!

Going to invite a few people to this conversation!

@Kevin-C , @Anton , do you guys have thoughts on this?

 

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner

Thanks @dennisedson 

 

Hey @RebeccaCwick 

You can defer the scripts using the "defer" property:

<div class="meetings-iframe-container" data-src="https://app.hubspot.com/meetings/starchaptermeetings/starchapterdemo?embed=true"></div>

  <script src="https://fullstory.com/s/fs.js" crossorigin="anonymous" defer></script>

  <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js" defer></script>

</div>

But this won't speed up the page, it will just prevent that script's loading from blocking the rendering of the page.

 

An important question to ask is why are you trying to speed up the page load?

Is it because Google says it's slow?

Or is it because the scripts are blocking the rendering of the page, aka making the pages unusable on first paint?

 

This comes up quite often here on the forum. Poke around a little and see what others have found:

- See what @stefen and @Jsum had to say here

View solution in original post

piersg
Key Advisor

Just chipping in here with something I've done that could be applied here. I achieved a ~90+ on desktop and ~50 on mobile in Google PageSpeed. Basically the idea is to delay scripts until a user action like scrolling.

 

For example I used the below for Intercom via GTM on our site: it forces intercom to wait 1 second after the page is scrolled to load, and SEO bots/crawlers don't scroll the page so it won't load for them.

var scriptOnScroll = function() {
  setTimeout(function() {
    // script goes here
  }, 1000);
};

window.addEventListener("scroll", scriptOnScroll, {once: true});

 

In the case above you could remove the src from the script element and then add it in after a set time after scroll or load e.g.

<script type="text/javascript" src="" defer id="meetingsScript"></script>
var scriptOnScroll = function() {
  setTimeout(function() {
    var meetScript = document.getElementById('meetingsScript');
    meetScript.setAttribute('src','https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js');
  }, 1000);
};

window.addEventListener("scroll", scriptOnScroll, {once: true});