Have I been scammed by fake performance experts?

johstrom
Excursionist
19 0 2

 

Hi everyone! I hope someone can shed some light on this... 

 

 

We experienced some bad scores on PageSpeed etc and I contacted a Shopify "expert" on Fiverr with great ratings. 

 

The overall performance went up big time. But still the Core Web Vitals for long term statistics showed bad CLS, though every page I tested showed individual good results. 

 

When I investigated further I found this blog post from Shopify: Don’t get scammed by fake performance experts and apps – Performance @ Shopify

 

And I followed their suggestion trying the Lighthouse test in Chrome and got different results there. And I also noted their suggested "Fullscreen transparent text"-hack. I have noted such an artificial element earlier and also now. 

 

I checked the files they suggested to check and in snippets/meta-tags.liquid I found this line of code:

 

 

 

<link rel="preload" href="//cdn.shopify.com/s/files/1/0690/1995/9522/files/critical-resources.js?v=1709233602" as="script"><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>{%if template contains 'index' %}<script src="//cdn.shopify.com/s/files/1/0690/1995/9522/files/globo1.js?v=1709233602" type="text/javascript"></script>{%else%}<script src="//cdn.shopify.com/s/files/1/0603/7530/2276/t/1/assets/globos_checkout_mobile.js" type="text/javascript"></script>{%endif%}

 

 

 

This line isn't in the latest version of the theme (Craft), so I suppose this line has been injected by the "expert". 

 

If I remove this line - then I got an awful PageSpeed rating once again. And if I insert the line, I got the good ratings... 

 

So, have I been scammed by a fake performance expert? 

 

Something that seems strange is the use of what feels like legit files on cdn.shopify.com..? Didn't find anything by googling the filenames...

 

Please advise and give me some insights. 

 

With kind regards,

 - Johan.

Replies 10 (10)

tim
Shopify Expert
3466 280 1286

This code by itself is not enough to judge 100%, but looking at the files used in this code snippet it's very highly possible.

If you provide the storefront password, it'd be easier to be sure.

Is alpha3861.myshopify.com your address?

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
johstrom
Excursionist
19 0 2

No, our adress is bok.hstrom.se and our myshopify.com-address isn't alpha3861. The site is live and hasn't a storefront password. So you are welcome to check it out at https://bok.hstrom.se. Looking forward hearing from you. 

 

With kind regards,

 - Johan.

tim
Shopify Expert
3466 280 1286

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
tim
Shopify Expert
3466 280 1286

Several things I do not like about this modification:

  1. Code is not in your store, not under your control. Can disappear or be replaced by something harmful?
  2. Code is inserted in a hidden place -- bet they didn't tell you where the code is (and it's inside the 'meta-tags' snippet -- not the place  one would expect to find the speed improvement code).
  3. Code serves different content (modifies content) based on visitors browser. It's not recommended by Google and potentially may lead to penalisation. Also, while this may help with CLS metric, it may badly affect LCP and FCP.

I'd probably recommend to roll-back to a theme as it was before optimization.

 

Updated: the hack with image looks very similar to one discussed at https://community.shopify.com/c/site-speed/shopify-expert-added-largest-contentful-paint-image-place... 

Looks like Google still recognizes this image for LCP, but it does not help much?

Screenshot 2024-05-16 at 7.11.31 pm.png

 

 

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
johstrom
Excursionist
19 0 2

Hi,

thanks for your effort explaining this to me! What is your recommendation - should I just remove this line of code entirely from the snippets/meta-tags.liquid

 

You seem to be right in regards to the Google penalty - since the "optimization" my Search Console show me that the impressions and clicks has gone down by 50%... 

 

I checked the ratings with and without this line of code in PageSpeed and got these results:

 

With code:
https://pagespeed.web.dev/analysis/https-bok-hstrom-se-products-21823243/uxl5xzehyn?form_factor=mobi...

Without code:
https://pagespeed.web.dev/analysis/https-bok-hstrom-se-products-21823243/7r2enfevoe?form_factor=mobi...

 

With kind regards,

 - Johan.

tim
Shopify Expert
3466 280 1286

Desktop is even better with original theme, but on mobile original theme loses because "Total blocking time" is better on modified  because a lot of JS code is not run until user interaction. And this is also a reason for "Cumulative Layout Shift" as many elements are added by JS (like chat icon) and, importantly, the product image is not loaded because modification makes it "super-lazy".

 

Yes, you can probably just remove this code and this line is placed above footer code:

<script src="//cdn.shopify.com/s/files/1/0245/4798/3420/files/optimizer.js?v=1708470329" type="text/javascript"></script>

Can't be 100% there are no other mods, that's why I suggested to re-publish the theme version you had before optimization.

 

The problem with this kind of optimisation is that they trick the PageSpeed site, but actual data used by Google for SERP comes from the end-users actual experiences submitted by millions of Chromes deployed around.

All CLS and TBT suppressed by this trick will re-surface as soon as these customers will start interacting with the site.

 

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
johstrom
Excursionist
19 0 2

Thanks! Ok, I have now removed the code in meta-tags.liquid and instead inserted your line of code before the footer in theme.liquid, correct?

 

In the live site it now looks like this:

johstrom_0-1715860025725.png

Good?

 

Right now I have 67 in Performance rating on Pagespeed for an individual product: https://pagespeed.web.dev/analysis/https-bok-hstrom-se-products-21823243/ic12bstpe2?form_factor=mobi...

 

With kind regards,

 - Johan.

tim
Shopify Expert
3466 280 1286

No, sorry, I meant "remove this line as well, but it's separate from the others, you need to find it".

Since it's left without its mates, it's now raining with JS errors in the console

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
johstrom
Excursionist
19 0 2

Ok! I found it in footer.liquid:

<script src="//cdn.shopify.com/s/files/1/0245/4798/3420/files/optimizer.js?v=1708470329" type="text/javascript"></script>

 

I have now removed it. Does it look good from your point of view?

 

I really appreciate you helping me out with this!

 

With kind regards,

 - Johan.

tim
Shopify Expert
3466 280 1286

Pretty much.

If I were working on optimization, I'd implement main image preload -- will help with both LCP and FCP and then look into TTFB which is Ok on your pagespeed reports, but not that great in my browser and TTFB is basically the basis of everything else.

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