Optimizing page size for Shopify–uncomfortable truths

The uncomfortable truth in my case is that our main page currently weighs in at 3,4 MB – and this is just the HTML.

I had been trusting the developers of the theme too much – we are using a theme called “Fastor” by Roarthemes.

Unfortunately a poor design choice was made in this theme; or maybe it is default Shopify behaviour (looking for someone to blame, obviously …).

In any case, for every product all the data, including the article description is included. We have sliders, showing many different products on our page.

Thus the size multiplies.

The culprit

The code looks like this, for every product:

<script class=”product-block-json-1302097199206″ type=”text/template”>window.products.id1302097199206 = {“id”:1302097199206,”title”:”OpenDrop V2″,”handle”:”opendrop-v2″,”description“:”\u003cp\u003eThis is the OpenDrop v2, experimental platform for \u003cstrong\u003edigital microfluidics\u003c\

The entire description is included. For every single product linked on the main site. And that’s a lot. A lot of text.

This is generated like this:

{{product | json}}

and the following files of Roartheme Fastor are relevant to it:

You do not usually need the entire article description in a page which links to the article, right? It is not used in the frontend.

Unfortunately liquid, the Shopify templating engine, does not support regex.

Fixing

my current suggestion is to remove the complete line in all the above-mentioned templates (but NOT the JS files or the js.liquid files – it is not necessary there!).

This has reduced the HTML size of our front page to 1.8 MB. Still a lot. We’re going to switch to another theme, this will serve in the meantime.

Functionality has been degraded a bit – in the preview windows, you can’t look at all the pictures now. Big deal. You can still click through to the product and have a look at it.

The product pages themselves, as far as I see are not changed in any way by this.

Proceed at your own risk, though.