How to make a widget load faster
Elfsight widgets are designed to be highly optimized, ensuring minimal impact on your website’s loading speed. However, there are certain cases where performance can be affected. If your widget seems to be loading slowly, follow these steps to troubleshoot and improve its speed.
In this article
Check the file sizes in your widget
Large files can slow down the loading of widgets that include manually uploaded media. This applies to widgets such as Audio Player, Portfolio, and PDF Embed.
| Media Type | Recommended Size |
|---|---|
| Images | Under 1MB |
| Audio files | Under 5MB |
| PDF files | Under 25MB (Google Doc Viewer can’t display previews for larger files) |
If your files are too large or there are too many of them, reduce their size and re-upload them to the widget.
Test your connection
We deliver data from different locations around the world. Sometimes, slow widget loading may be due to your internet connection or location. To troubleshoot this, try the following:
- Test the widget’s speed with and without a VPN or proxy.
- Switch between Wi-Fi and mobile data.
If these tests show a noticeable difference in speed, the issue is likely with your connection or region, and it shouldn't affect other users.
Update older widget code
Widgets installed after October 7, 2024, use the async attribute for faster loading. Widgets installed before this date may still use the defer attribute, which delays loading until the rest of the page content has fully loaded. While defer improves overall performance, it can cause delays if the widget is one of the first things visitors see.
To speed up loading, you can easily update the installation code:
- 1
-
Find the widget installation code on your website. Replace
deferwithasyncand removedata-use-service-core. Here's an example of the original code:<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script> <div class="elfsight-app-7e006c54-fd6b-40d8-a506-4201fa910630" data-elfsight-app-lazy></div>
The code after adjustments:
<script src="https://static.elfsight.com/platform/platform.js" async></script> <div class="elfsight-app-7e006c54-fd6b-40d8-a506-4201fa910630" data-elfsight-app-lazy></div>
- 2
-
Move the first line of code to the
<head>section of your website to ensure it loads as soon as possible. Leave the second line (the widget container) where you originally placed it on the page.
These changes ensure the widget loads faster, especially if it's one of the first elements your visitors see when they land on your website.
Need more help?
If you've followed these steps and the issue persists, please don’t hesitate to contact our Support Team. We’re here to help you further optimize your widget’s performance and ensure it runs smoothly on your website. 🙌