How to lazy loading Elfsight Widgets
This lazy load feature provided by Elfsight can help you improve the Google Page Speed Score of the page where the widget is installed.
By default, the widget is loaded straight away on page load, along with all other page assets. With the new method, widget will be loaded only when a visitor interacts with the page’s content or scrolls down to the place where the widget is installed.
What are the advantages of lazy loading?
Improved Page Speed: Lazy loading can significantly enhance the Google Page Speed Score of the webpage where the Elfsight widget is installed.
Enhanced User Experience: With lazy loading, the widget loads only when a visitor interacts with the page's content, ensuring a smoother and faster user experience.
Bandwidth Savings: Lazy loading prevents unnecessary loading of the widget, saving bandwidth and potentially reducing costs for website owners.
What are the disadvantages of lazy loading?
User Experience Impact: If users scroll quickly through the page, they might experience delays as the widget loads, potentially affecting their experience.
Limitations on Application Types: Lazy loading might not be suitable for all types of widgets. Applications like Age verification, Popup, Annoucement Bar, which need to be displayed above the fold, cannot benefit from lazy loading.
How to do it?
To turn it on, please add the “data-elfsight-app-lazy” attribute to the <div> element in your installation code.
For example, here’s how your installation code will look:
<script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-90102ac6-b36b-4ec8-a576-7a8953305dc7"></div>
Note that some of your widget has the new installation code with the script src like “https://static.elfsight.com/platform/platform.js“, this tip still works.
Here is what the code looks like after adding the attribute
<script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-90102ac6-b36b-4ec8-a576-7a8953305dc7" data-elfsight-app-lazy></div>
You widget is now lazy loading enabled! Let’s place it on the page where you want the widget to run, you can test the PageSpeed of your page to see the different.
How many lazy modes?
If you insert the “data-elfsight-app-lazy” attribute without specific value, then a widget will be loaded either once it's in the viewport or after user's first activity.
first-activity
— Enable this mode by setting “data-elfsight-app-lazy=first-activity“
— In this mode a widget will be loaded once a user commits first activity (moves mouse, scrolls page, etc.); appearing in the viewport is ignored.
The widget is loaded once the first activity is happened, in this case is a mouse move
in-viewport
— Enable this mode by setting “data-elfsight-app-lazy=in-viewport“
— widget will be loaded once it's in the viewport; users activity is ignored.
The widget is loaded once it is scrolled into view port
enabled
— We can explicit assign it as “data-elfsight-app-lazy=enabled“, or just add the attribute without value “data-elfsight-app-lazy”
— Widget will be loaded either once it's in the viewport or after user's first activity, whichever event fire first will trigger the widget load
disabled
— This is default mode of Elfsight widget, you can simply copy the installation code and paste it directly to your page, or you can assign any value which is not “first-activity“, “in-viewport“ or “enabled” to the “data-elfsight-app-lazy”. For example “data-elfsight-app-lazy=default”
— This will disable lazy loading of the widget and load it along with other page’s assets.
Which applications can be enabled with lazy
You can enable this feature on all widgets, except the special ones that need to be display above the fold such as: Age verification, Popup, Annoucement Bar
If you are new to Elfsight, feel free to check out this Catalog page to browse Elfsight Widget templates and adding them to your site for free (up to 200 views per month).
