Online store performance and site speed optimization
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.
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>
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024