How to improve your PageSpeed 🚀

[Max]

Hey everyone

We had a very beneficial conversation in this topic and, as a result, we’ve implemented a new feature!

Shout out to @user552 @Charlie and @Hugh for the great ideas and participation in the development of our company!

Without further ado, let’s delve into details!

New lazy loading feature

This feature will help you significantly improve Google Page Speed Score of the page where the widget is installed.

You can think: “What is the difference between the new and the old one?”

This new method makes the widget load only when a visitor interacts with the page’s content or scrolls down to the place where the widget is installed. Thereby, the widget is not loaded straight away, so the page speed performance shouldn’t be affected.

Note: The code will work correctly if it is not installed in the initial viewport, i.e. users have to scroll down at least for a little bit before they reach the widget.

When you assure that the code is installed in the right place, you can start creating code for lazy loading.

How to do it?

Just add the “data-elfsight-app-lazy ” attribute to the <div> element of your installation code.

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

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-86c61122-896c-43d7-a080-5709c75753f7"></div>

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

<script src=“https://static.elfsight.com/platform/platform.js” data-use-service-core defer></script>
<div class=“elfsight-app-86c61122-896c-43d7-a080-5709c75753f7" data-elfsight-app-lazy></div>

Your code is ready! Now you should add this code to your website and the PageSpeed score will become much better.

Guys, feel free to share your thoughts ask any questions about this feature in the comments below

---

Upd: we’ve revised the codes in the post and made them compatible with our new dashboard.

[Alexander]

This is great! Thank you!

[Helga]

Have you already tried this option, @Alexander? Does it work as expected?

[Alexander]

It seems to reduce the load time slightly from the first observations. I ran a speed load time test on a page before and after the snippet, and the page did load a few hundredths of a second faster after implementing the attribute. I’m also running a site-wide audit.

[Helga]

@Alexander, thanks a lot for the feedback! I hope you still will reap benefits of this implementation, but we’re always here if any help needed

[ClickAlgo (Paul)]

@Max

data-elfsight-app-lazy

Thanks for this, my platform uses Tinyeditor and will not allow attributes without quotations, its adds the following:

data-elfsight-app-lazy=""

If I use this or:

data-elfsight-app-lazy="data-elfsight-app-lazy"

Will it still work?

[ivanenko (Vladimir Ivanenko)]

Hi @ClickAlgo,

Sure, it will work the same way.

[ClickAlgo (Paul)]

@ClickAlgo

data-elfsight-app-lazy=“”

ok, please confirm this one is ok?

data-elfsight-app-lazy=“”

[ivanenko (Vladimir Ivanenko)]

It should work. However, I’m afraid Tinyeditor could potentially remove empty attributes for some reason. So, to be 100% sure, I suggest using some dummy value (actual value makes no difference). I’d say data-elfsight-app-lazy="enabled" looks good. Would you check it out, please?

[ClickAlgo (Paul)]

Hi, Ivanenko,

If I enter just data-elfsight-app-lazy, Tinyeditor changes it to data-elfsight-app-lazy=""

I think it will be ok, here is the web page source.

[ivanenko (Vladimir Ivanenko)]

Perfect! Hope you’re enjoying this new feature

[David11 (David)]

Perhaps a dumb question, but why is this not set as default in embed codes?

[ivanenko (Vladimir Ivanenko)]

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.

[David11 (David)]

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!

[ivanenko (Vladimir Ivanenko)]

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

[Hugh]

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?

[Hugh]

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:

[ivanenko (Vladimir Ivanenko)]

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.

Repair service

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

(Widget with a default loading behavior) Repair service

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

(Widget with a lazy loading) Repair service

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!

[Hugh]

@ivanenko

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).

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?

[ivanenko (Vladimir Ivanenko)]

Hi @Hugh,

Thanks, I’m glad to be of service to you.
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.