Re: Load Third Party Application after Page has load! Debut Theme,

Berkan1 · ‎09-12-2021

Hello!

Im am working with Googles Lighthouse Tool to improve our Speed Score.

Right now it looks like this for the mobile version:

The specific goal is here to load the third party applications which we dont need to load fast, to load after the page has loaded all its other elements.

Obviously it makes a difference if i remove the third application <script> Tag:

I know, the speed score varies much on a daily basis, but the difference is clearly visible.

I tried solving it with a setTimeout in our theme.liquid file, right before </head> :

But unfortunately, the script js still blocks the main thread.

Solutions with "async" and "defer" don't seem to make a difference.

<script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=SQWH"></script>
<script defer src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=SQWH"></script>

I hope someone has an idea on this! 🙂

Thanks in advance.

vmstukalov · ‎09-14-2022

Hello,

Try to move script immediately after <body>.

Alternatively you can try load script this way:

<script>
    (function (d) {
        var xhr = new XMLHttpRequest(),
            s = d.createElement("script"),
            f = d.head.firstChild;
        s.type = "text/javascript";
        s.setAttribute("id", "klavio");
        f.parentNode.insertBefore(s, f);
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                d.getElementById("klavio").innerHTML = this.responseText;
            }
        };
        xhr.open("GET", "https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=SQWH", true);
        xhr.send();
    })(document);
</script>

Is it helpful? Like and Accept please.
Gaze — order analytics App for your store. Help me get first reviews for my application. Try and rate my App please.
✯✯✯✯✯

Re: Load Third Party Application after Page has load! Debut Theme,

Load Third Party Application after Page has load! Debut Theme,

Community Blog Articles