Dealing with Shopify page bloat

Today I've been trying to help a friend speed up their ecommerce store.

This has led to the most visceral example of the website obesity epidemic I've encountered in quite some time. Huge amounts of bloat are loaded via many of the Shopify apps that haven't uninstalled cleanly and tracking it down has been quite a task. Shopify itself is quite fast if you set everything up in a sensible way and in many regards the developer experience with Shopify is a good one. The apps on the other hand are a very mixed experience, some are great and some are terrible.

The page I was dealing with was itself fairly basic, but the various scripts that were getting loaded in the background were anything but basic. Annoyingly a bunch of these scripts aren't even used, but they are consuming a lot of page load time and making the site experience considerably worse especially on mobile.

Removing some of these was fairly simple, but removing the facebook tracking code has proven to be far more annoying. Because the store isn't using facebook ads I thought I'd do the sensible thing and just remove that code. Getting rid of the facebook pixel tracking code was fairly easy. But requests were still going out to connect.facebook.net, and some time in the past this call really slowed down.

At first I thought I'd just look through the site theme code and do a quick search for connect.facebook.net and start removing code that loads it. I found some scripts loading facebook assets from an app template which I removed and I thought that would likely be the end of it. However something else was still loading scripts from this domain and it wasn't anything in the theme code.

I thought I'd be able to search for an answer as I'd assumed this would be a fairly simple question that someone else had likely encountered before. Upon searching I was reminded of how degraded the search experience has become in the modern web, and not just because search engines had got worse, searching for anything around ecommerce is unpleasant. With ecommerce you immediately feel the impact of an enormous mountain of highly SEO-ed sites with little to no value to wade through that are targeting selling solutions to people without talking about how to solve anything. You'd go page after page of search results just seeing this vast vista of a wasteland of pages that had nothing of value. Worse still those pages would do everything possible to signal they had value aside from actually creating any value, this makes for an excruciatingly annoying experience to try to navigate.

I've spent far longer than I'd like trying to figure out how to remove this.

At first I thought it was created in the header, so I attempted a crude filter there:

{% capture h_content %}
  {{ content_for_header }}
{% endcapture %}
{{ h_content
    | remove: "https:\/\/connect.facebook.net\/en_US\/fbevents.js"
}}

But no luck there, showing the script was coming from somewhere else. After digging around a bit I found that there's an app called Yotpo that loads the facebook script:

(Yotpo), Yotpo.Libraries = Yotpo.Libraries || {}, Yotpo.Libraries.FacebookAds = function() {
      function e(e) {
         window.fbq && t() || (! function(e, t, i, o, n, r, s) {
            e.fbq || (n = e.fbq = function() {
               n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            }, e._fbq || (e._fbq = n), n.push = n, n.loaded = !0, n.version = "2.0", n.queue = [], r = t.createElement(i), r.async = !0, r.src = o, s = t.getElementsByTagName(i)[0], s.parentNode.insertBefore(r, s))
         }(window, document, "script", "//connect.facebook.net/en_US/fbevents.js"), fbq("init", e), fbq.yotpoInited = !0)
      }

This is highly annoying because the newer facebook scripts for some reason have degraded performance.

Ultimately I think this is part of the newest phase of the website obesity crisis, pages are loading in scripts that in turn load in other scripts. You can get bloat automatically created now in your dependencies without a line of your code changing. This is a massive annoyance on many levels, but unfortunately one that's getting more common as time goes on.