The problem is that your theme loads JS code from other shops -- here is your snippet formatted -- it uses files from 3 shops and they are not controlled by you. critical-resources.js and globo1.js are already unavailable.
<script src="//cdn.shopify.com/s/files/1/0690/1995/9522/files/critical-resources.js?v=1709233602" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0245/4798/3420/files/function.js?v=1708198499" type="text/javascript"></script>
<script src="https://alpha3861.myshopify.com/cdn/shop/t/2/assets/asyncLoadLayout.js?v=18266486570239050671709265354"></script>
<script src="https://alpha3861.myshopify.com/cdn/shop/t/2/assets/loadLayouts.js"></script>
<script src="//cdn.shopify.com/s/files/1/0245/4798/3420/files/pre-loader.js?v=1708198499" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0690/1995/9522/files/globo1.js?v=1709233602" type="text/javascript"></script>
...
<script src="//cdn.shopify.com/s/files/1/0245/4798/3420/files/optimizer.js?v=1708470329" type="text/javascript"></script>
Here is the de-obfuscated content of pre-loader.js:
document.open();
if (navigator.platform == "Linux x86_64") {
document.write(
'\n\n\n\u003clink rel="preload" fetchpriority="high" as="image" href="https://cdn.shopify.com/s/files/1/0633/1672/1913/files/purple-geometric-Youtube-Thumbnail.webp?v=1693802353" type="image/webp"\u003e \n\u003cimg alt="nav_icon" style="pointer-events: none; position: absolute; top: 0; left: 0; width: 96vw; height: 96vh; max-width: 99vw; max-height: 99vh; z-index: -99999; opacity: 0.2; " src="https://cdn.shopify.com/s/files/1/0633/1672/1913/files/purple-geometric-Youtube-Thumbnail.webp?v=1693802353"\u003e\n'
);
}
document.close();
This is obvious check against Google PageSpeed site.
If Google PageSpeed checks your site it replaces content with single image (again, hosted not in your store).
If I am not mistaken, you can be penalised by Google for this.
Function.js checks for new <script> tags added and modifies them to delay loading for iframes, apps, tracking pixels, shopify pay codes:
const observer = new MutationObserver(e=>{
e.forEach(({addedNodes: e})=>{
e.forEach(e=>{
1 === e.nodeType && "SCRIPT" === e.tagName && (e.innerHTML.includes("asyncLoad") && (e.innerHTML = e.innerHTML.replace("if(window.attachEvent)", "document.addEventListener('asyncLazyLoad',function(event){asyncLoad();});if(window.attachEvent)").replaceAll(", asyncLoad", ", function(){}")),
e.innerHTML.includes("PreviewBarInjector") && (e.innerHTML = e.innerHTML.replace("DOMContentLoaded", "asyncLazyLoad")),
(e.className == 'analytics') && (e.type = 'text/lazyload'),
(e.src.includes("assets/storefront/features") || e.src.includes("assets/shopify_pay") || e.src.includes("connect.facebook.net")) && (e.setAttribute("data-src", e.src),
e.removeAttribute("src")))
}
)
}
)
}
);
observer.observe(document.documentElement, {
childList: !0,
subtree: !0
})
It works together with optimizer.js, which tracks user actions and fires an event to actually run scripts "paused" by function.js.
var script_loaded = !1;
function loadJSscripts() {
if (!script_loaded) {
observer.disconnect(),
(script_loaded = !0),
document.querySelectorAll("iframe.lazy").forEach((t) => {
(datasrc=t.dataset.src), null != datasrc && (t.src=datasrc);
});
var t = document.getElementsByTagName("script");
for (i = 0; i < t.length; i++)
if (
(null !== t[i].getAttribute("data-src") &&
(t[i].setAttribute("src", t[i].getAttribute("data-src")),
delete t[i].dataset.src),
"text/lazyload" == t[i].getAttribute("type"))
) {
for (
var e = document.createElement("script"), a = 0;
a < t[i].attributes.length;
a++
) {
var n = t[i].attributes[a];
e.setAttribute(n.name, n.value);
}
(e.type = "text/javascript"),
(e.innerHTML = t[i].innerHTML),
t[i].parentNode.removeChild(t[i]),
t[i].parentNode.insertBefore(e, t[i]);
}
var r = document.getElementsByTagName("link");
for (i = 0; i < r.length; i++)
null !== r[i].getAttribute("data-href") &&
(r[i].setAttribute("href", r[i].getAttribute("data-href")),
delete r[i].dataset.href);
document.dispatchEvent(new CustomEvent("asyncLazyLoad"));
}
}
var activityEvents = [
"mousedown",
"mousemove",
"keydown",
"scroll",
"touchstart",
"click",
"keypress",
"touchmove"
];
activityEvents.forEach(function (t) {
window.addEventListener(t, loadJSscripts, !1);
}),
window.addEventListener
? window.addEventListener("load", function () {}, !1)
: window.attachEvent
? window.attachEvent("onload", function () {})
: (window.onload = (t) => {});
This is a legitimate technique and I use similar approach myself, except it must be applied on a one-by-one basis, otherwise it may affect your site functionality.
loadLayouts.js adds a bit of CSS for Google PageSpeed site:
document.open();
if (navigator.platform == "Linux x86_64") {
document.write(
"\n\n\n \u003cstyle\u003e\n @media only screen and (max-width: 600px) {\n #mobile{\n display: block !important;\n }\n }\n @media only screen and (min-width: 600px) {\n #desktop{\n display: block !important;\n }\n }\n \u003c/style\u003e"
);
}
document.close();
Here is the CSS -- nothing criminal -- why was it obfuscated?
<style>
@media only screen and (max-width: 600px) {
#mobile{
display: block !important;
}
}
@media only screen and (min-width: 600px) {
#desktop{
display: block !important;
}
}
</style>
finally, AsyncLoadLayout.js also adds some CSS to hide those "delayed" assets:
document.open();
if (navigator.platform == "Linux x86_64") {
document.write(
"\n\n\n \u003cstyle\u003e\n .asyncLoad{\n display: none !important;\n }\n \u003c/style\u003e\n\n "
);
}
document.close();
<style>
.asyncLoad{
display: none !important;
}
</style>
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.I can be reached via e-mail
tairli@yahoo.com
