Reducing impact of widgets on mobile site speed

Ask the Community General Questions
1

  • Issue description: Hi there, I’ve just launched a new e-commerce business and am trying to navigate very poor mobile page speed currently. I think (or rather AI has told me) that part of the problem is the google review widgets I have on the page (amongst other things). I feel the power of reviews is super important so I do not want to remove them but just wondering if anyone has any pointers on ways to optimise the review widgets to minimise page speed impact? Any insight here would be super helpful. Thanks,

  • Link to the page with the widget in question: Kaizen Kidz

3 Likes
3

Greetings and welcome to the Community, @user28355 :waving_hand:

The only possible improvement here is to reinstall the Google Reviews badge using a lazy loading method. Please note that with this approach:

  • The widget will only appear after the first interaction with the site (like a scroll or a slight mouse movement).

  • It won’t be indexed by search engines.

To implement this, simply replace your current widget code with the following one that contains data-elfsight-app-lazy="first-activity" attribute:

<script src="https://static.elfsight.com/platform/platform.js" async></script> 
<div class="elfsight-app-WIDGET-ID" data-elfsight-app-lazy="first-activity"></div>

Note: Do not forget to replace WIDGET-ID with the ID of your widget


This should help improve your PageSpeed score. Please try it out and let me know if it helped :slightly_smiling_face:

2 Likes
4

Is this different from the standard install code that has “data-elfsight-app-lazy” as part of the div class? I thought that is what this div class did.

2 Likes
5

Hi @Hugh :waving_hand:

It differs a bit. Here is how the standard installation code looks:

<!-- Elfsight Timeline | Untitled Timeline -->
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-WIDGET-ID" data-elfsight-app-lazy></div>

In this case, we’ve assigned the "first-activity" value to the data-elfsight-app-lazy attribute.

<script src="https://static.elfsight.com/platform/platform.js" async></script> 
<div class="elfsight-app-WIDGET-ID" data-elfsight-app-lazy="first-activity"></div>

This workaround helps improve the performance score if the widget with the Embed layout is installed in the initial viewport :slightly_smiling_face:

2 Likes
6

I see. So to be sure I understand, as long as the widget is not in the initial viewport it will work the same to use the standard installation code.

How about a form that slides out from the side with the “contact us” button floating in the bottom right? Would that benefit from using the “first activity” code? How about the translator button in the top right corner? Like to speed up our sites if at all possible without losing functionality.

2 Likes
7

Yep, you’re absolutely right!

As for the floating widgets, you just need to place their installation codes lower. For example, if it’s added to the header, you should move it lower (in the body or footer) :slightly_smiling_face:

1 Like
8

So to be clear (just want to make sure I have this right), as long as a widget is not in the initial window when loading, there is no advantage to using anything but “data-elfsight-app-lazy”?

2 Likes
9

Not quite!

The thing is that placing the widget in the initial viewport prevents the lazy loading feature from working properly, as the widget loads immediately when someone opens the page.

Thus, if the widget isn’t placed in the initial viewport, the lazy loading feature will work great. In case, it’s in the initial viewport, you can follow the workarounds suggested above to improve the page speed score:

  • floating widget in the initial viewport - move the code lower on the page

  • embed widget in the initial viewport - assign "first-activity" value to the data-elfsight-app-lazy attribute of the installation code.


Please let me know if this clarifies things or if you have any questions left :slightly_smiling_face:

1 Like
10

So with the floating “request information” button to open the contact form that slides in from the side, that button is in the initial viewport. Same with the translation button at the top? So I would need “first activity” to prevent page speed issues in these cases even though the elfsight widget code itself is lower in the code body? For example, see www.apexflamellc.com.

2 Likes
11

No, if the installation codes for the floating widgets are placed low in the body (as in your case), there’s no need to include the first activity value there or do anything additionally.

In this situation, it’s the placement of the installation code itself, not the widget’s position, that matters :slightly_smiling_face:

1 Like
12

Thanks for the patient replies.

I think we’re all set but I still find the use cases for the different widgets confusing.

3 Likes
13

No problem!

If you still have questions about another widgets, don’t hesitate to share them here. I’ll be happy to advise :wink:

1 Like