How to improve your PageSpeed 🚀

Excellent. We are going to implement this on all our sites, except things like popups and forms that are above the fold. Thanks!

2 Likes

Hi @Hugh,

You’re welcome!
I’m happy to know that you’ve decided to move forward with the lazy loading feature :star_struck:.

I would like to vote again that this become the default for all types of widgets that logically would not need to load immediately (the exceptions being things like age verification). I just realized that I have not been adding this to the install code and have had to ask my dev to go back to several sites and add it.

3 Likes

Hello @Hugh :wave:

Thanks a bunch for sharing your feedback :heart:

Agree that this option would be really useful :fire:

Could you please share your idea in our Wishlist in Elfsight Dashboard - Elfsight Community category to get a notification upon its release?

OK, done. EVERYONE READING THIS PLEASE CLICK HERE AND VOTE FOR THIS WISHLIST ITEM.

2 Likes

Hello @Max,

Does "data-elfsight-app-lazy" attribute work with the new snippet?

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID"  data-elfsight-app-lazy></div>

Thank you,
Chamal.

1 Like

Hi @Chamal!

Yes, it should work. This is the installation code of the widget from a new dashboard, that’s why it differs a bit from the code we used in our post.

However, it should work fine :slightly_smiling_face:

This is a really useful update to improve the performance of sites, but!

In addition to this, try to put the line

<script src="bla-bla" data-use-service-core defer></script>

before

</body>

And leave the line

<div class="elfsight-app-WIDGET_ID"  data-elfsight-app-lazy></div>

In place in the html markup :man_mage:

Please tell us what you know about this and what it does!

1 Like

Hi @Designinja!

Could you please describe your use case in more detail? A link to the webpage where the widget is installed would be highly appreciated :pray:

Hi @Max! Sure

NOTE: In my example instead of “bla-bla” address of js array, I just don’t like scrollbars, you know :man_shrugging:

Essence of method is in position of string with script before closing body tag. This will delay start of script and speed up loading. Moreover, if there are several widgets on site, one request to js array is enough.

The site I admin has three different elfsight widgets and one string of script at the bottom. It works great and loads fast.

I’m still not sure what this is and how it works. Could you explain in more detail?

Now I understand what wrong
Nevermind on attribute
I just copied the line from the last post in the topic, sorry :upside_down_face:

Hi @Hugh :wave:

This attribute is a part of the installation code of the new dashboard widget. Here is how it looks:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-WIDGET_ID"  data-elfsight-app-lazy></div>

I see. Thought it was something he dreamed up out of nowhere :slight_smile:

Is there any reason to update all our widgets to the new installation code?

Hi @Designinja :wave:

I’d like to say that the defer attribute has already been added to the script, and that should be enough to delay the script from running until the page is loaded. So, you don’t have to add the first line of the script before </body>.

As for the situation when you have several widgets on your website, your workaround can improve the loading speed just by 1-2 msec.

If any questions come up, please don’t hesitate to ask away. We’ll be happy to advise!

@Hugh At the moment, we are transferring all our users to a new dashboard, so you don’t have to do anything on your side.

I need to say that it’s a pretty complicated process and it can take some time.

Please do not worry, we’ll keep our customers updated about all the changes :slightly_smiling_face:

So the old code will work fine even after all the dashboard changes?

1 Like

Please do not worry, everything will be working fine :wink: