How to reduce page loading time

On every page containing an Elfsight widget, add the following code within the <head> </head> section of the page:

<link rel="preload" href="https://elfsightcdn.com/platform.js" as="script" crossorigin>

If your widget URL (the “https://…” part) is different from what’s shown above, use it instead. There are two pre-requisites to ensure accurate ‘before’ and ‘after’ timing:

  1. Add a load timer extension to your browser. The browser extension adds a small icon after your address bar that shows the time the page took to fully load, expressed as a decimal fraction. For Chrome, use “Page load time”; for Firefox, use “Page Load Timer” — other browsers probably have something similar, and they are all free.
  2. To ensure a like-for-like comparison when testing, clear your browser cache before loading the page without the preload directive, and again before loading the page with preload.

This tip should work for any widget type. It reduced my page load time from 1.26 seconds to an average .73 seconds, a 53% improvement! YMMV but I believe you’ll see an improvement, even on WordPress pages.

5 Likes

@helga if this works, is there a reason it would not be a standard part of the installation code?

1 Like

@Hugh, not a bad idea. It would just entail adding this one line to the code block, with instructions to add it into the head section.

Hey there, @Bob_Wilson :waving_hand:

This is an excellent solution, and it works very well. Thank you so much for sharing it with the Community :heart:

@Hugh, thank you for the thoughtful question as well. The reason we do not use this approach by default is that the <link> tag must be added inside the page’s <head>. As a result, the installation would need to be split into two separate code snippets:

For the <head>:

<link rel="preload" href="https://elfsightcdn.com/platform.js" as="script" crossorigin>

For the widget:

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-a40557e5-31da-4bce-a310-b22f27050be2" data-elfsight-app-lazy></div>

This introduces an additional step and may make the installation process less convenient for many users. For that reason, we continue to use the simplest version of the installation code.

It is also worth noting that adding link preload directly in the platform or next to the widget wouldn’t bring much benefit. By the time the browser encounters the <link> tag, the script download would already be underway, so the speed improvement would be minimal.

1 Like