GTMetrix score from A to D after insert Elfsight code

[user552]

I am new here. After install the Google Reviews code on my webpage it slows down. GT Metrix goes from A to D.

Is this normal?

[Max]

Hello @user552! We are happy to see you at Elfsight Community! Welcome !

I am very sorry that our widget causes issues to you!

However, we’ll be happy to check things for you. Could you please provide me with a direct link to the website where your widget is installed?

[user552]

You can find it here: Test - Solexverhuur Woudenberg

[Hugh]

@user552

After install the Google Reviews code on my webpage it slows down. GT Metrix goes from A to D.

This has been reported before. The Elfsight staff may have a new answer but the last one was you can lazy load your widget(s).

Google Pagespeed score issues

Thanks for the information provided, Kyle! Unfortunately, I need to tell you that there’s no possibility to reduce the unused JavaScript size, I’m really sorry about it. The thing is that the majority of our widgets, including Google Reviews widget, have hidden functionality that is not used all the time but activated when needed. For example, the Google Reviews widget uses cache and updates once every 48 hours. Between the update period, the part of the code used for it is considered unused by…

[Max]

@user552 I need to inform you that @Hugh is absolutely right!

Our widgets are actually full-powered apps. They allow doing lots of things, and of course, they will take some of the site’s resources, though we’re keeping it to a minimum.

However, there is a workaround to improve website’s performance. For this, you can reinstall your widget by using some kind of lazy loading that allows to load the widget only when you scroll to it.

Please note, that you need to place your widget to the bottom of the page, otherwise lazy loading won’t work.

Here is your installation code for Google Reviews widget:

<div id="widgetContainer"></div>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<script>
function inViewport(element){
const bb = element.getBoundingClientRect();
return !(bb.top > innerHeight || bb.bottom < 0);
}

let widgetVisible = false;
const widgetContainer = document.querySelector('#widgetContainer');

document.addEventListener('scroll', event => {
if (inViewport( widgetContainer ) && !widgetVisible){
widgetVisible = true;
const widget = document.createElement('div');
widget.className = "elfsight-app-WIDGET_ID";
widgetContainer.append(widget);
}
});
</script>

Please replace WIDGET_ID in the code above with the ID of your own widget and add this code to your website backend right to the place where you’d like to display the widget.

[Neil1 (Neil)]

Excellent!!

[Charlie]

Hi @Max

My questions, following your solution is why can’t we just download the https://apps.elfsight.com/p/platform.js and host that directly on our server or our cloud distrbutor; CloudFlare, Fastly, Azure, Amazon, etc.

Also, several of these companies will pre-host open source JS files to make serving faster for free, could that be an option for ES?

Maybe at some point, ES can dynamically create the JS files to only have the code required for the clients, or at a minimum break the JS file into three files, and group the features on the User UI side; Minimum features, Feature Set A, Feature Set B. Each one progressively larger but clear offers select benefits. This could be done from ES and actually help clients while reducing server load on ES servers.

[Charlie]

Further to my comment and just a quick scan of the platform.js there is a fair amount of code that is not required for the clients side. The client isn’t editing their Widget on their server or website, they are performing this on the ES server/website and thus this code should be a completely different file and hosted on ES server, not to be served with the client JS file. This would save some KB, which is all we, the clients are saying and asking… PLEASE REDUCE THE JS FILES! (this can be done and verified)

[ivanenko (Vladimir Ivanenko)]

HI @Charlie,

First of all I’d like to agree on the fact that some of our widgets are really heavy. And yeah, we’re working on reducing their bundle size. For instance, recently we’ve implemented dynamic pages loading for QR Code widget configuration and now we’re going to employ the same approach across all our apps. It’s not exactly what you’re asking for, yet it’s an important step for us towards providing you with a better experience. First we conduct experiments on ourselves and once it does the job and does it good, we’ll ship it to you.

Well, actually you can download platform.js and host it yourself, however it’s discouraged because we may change something in the widget’s initialization flow and stale version of platform could potentially lead to bugs. By the way the platform.js itself hosted on Cloudflare CDN and its size is about 17kb which is not too much, isn’t it? The main cause of the problem is widgets bundle size and as I mentioned above we’re striving to reduce it.

Thank you. Let me know if you want to know more or have anything to discuss regarding our service in technical perspective

[Charlie]

Thanks for the reply.

I hear you and reducing the overall bundle size and highly recommend it, especially when the reviews on FB groups are “Love the options but hate the GTM score (or something of the likes)” This is one of the reason people will start leaving as their customers complain, dev investigate see it’s ES is the cause.

[ivanenko (Vladimir Ivanenko)]

Hi @Charlie,

Thank you for sharing your feedback with us. I’m sure we could put it to a good use and address your concerns in line with the expectations.

For now, I have a little update from the team.

Firstly, we’ve managed to shrink some of our widgets footprint, including the whole Review family. For instance, the All-In-One Reviews bundle size total reduction is about 40%.

Also, we’re ready to introduce to you the lazy-loading feature. It’s not enabled out of the box yet, since there are plenty of questions to answer before we can embrace it as default behaviour.

To turn it on, please add the “data-elfsight-app-lazy” attribute to a <div> element in your installation code.

For example, here’s how the code looks like initially:

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9d3beb9e-4c72-4bd1-8ed6-c192fc9e56c7"></div>

And here’s how it should look like with the attribute added:

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9d3beb9e-4c72-4bd1-8ed6-c192fc9e56c7" data-elfsight-app-lazy></div>

That’s it. Now, your widget is not being loaded immediately, so the page speed performance shouldn’t be affected.

I must note that we expect it to work only if a widget is not in the initial viewport (e.g. users have to scroll down at least for a little bit before they reach the widget).

Please, let me know if it works well for you.