How to improve your PageSpeed 🚀

Hi @David11,

Please, let me disagree on that. I mean, why is your question dumb? I believe it’s definitely not.
The rationale behind not having lazy loading by default is avoiding a breaking change. There are a several scenarios in which a widget is expected to appear as soon as it can. For instance, it’s a vital property of our Age Verification and Cookie Consent widgets. I understand that making a customer to perform manual changes in a code is a barely user-friendly way. We’re considering other options to achieve the same functionality without putting that burden on anyone but us.

2 Likes

Thanks @ivanenko - I feel the best option would be to have a ‘Copy code without Lazy Load’ and a ‘Copy code with Lazy Load’ or something similar. Copying the Lazy Load code in each time isn’t optimal but kudos for implementing it!

3 Likes

Sounds good for me. We’ll take it into account, thank you!

2 Likes

Obviously this method will work on apps that are loading below the fold, such as the facebook feed and instagram feed and testimonials slider. But will it harm the functionality of the form builder? We use forms that slide out with the button in the bottom right. Will putting lazy load on these prevent them from working correctly or with the proper timing?

image

A second question. Someone above stated that the pagespeed was improved only very marginally (IE not very much at all) when using the lazy load method. Have you (Elfsight Devs) tested this and shown that in fact it is a pretty substantial improvement?

I ask because as it stands, without a doubt the elfsight javascripts take the most time of all the items on our pages:

Hi @Hugh,

Thank you for your questions.
Lazy loading feature will work as expected if an installation code (a widget container div, to be precise) is not in an initial view. Therefore, in you case it will do the job if you add the code, for example, to a page footer. Widget will start loading once a user commits a first activity (move a mouse, scroll, tap a screen, whatever…) or a widget container div appears in a view (it could be disabled if needed).

I prepared an example for you to evaluate the lazy-loading feature and decide whether it’s worth trying or not. All the pages below are identical, except a widget installed on.

There is no widget on the first one, and as we can see PageSpeed reports 81 points for performance on mobile.

The next page has a widget with a default loading behavior and… Its performance metric is quite frustrating.

Finally, we got to the page with a lazy widget. Its performance seems unspoiled.

Please, note that values may vary and we still may lose a few points even with a lazy loading, but not that much.

Hope it makes sense. In case you have more questions or need any assistance, I’m here to help!

3 Likes

Thank you for this. You Rock!

In the case of a form that slides out (a “pane” form), does the Contact Us button on the screen = a container div view?

1 Like

Hi @Hugh,

Thanks, I’m glad to be of service to you. :v:
To answer your question let’s look at an typical installation code:

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-b43d1ab1-eb33-48a8-b8b4-154a1bdf7730"></div>

The widget container div is on the second line. It has nothing to do with the widget itself. it’s just a “target” that helps us detecting a proper position in a page to embed the widget. The “Contact Us” button is a part of the widget, so it will appear after widget is loaded. As for widgets that stick to a window rather than appear somewhere in a document an actual widget container div position doesn’t make much difference. But when it takes to lazy-loading it’s better to put it to the bottom. :ok_hand:

1 Like

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?