Behind the Product Page — How did we load faster?

Behind the Product Page — How did we load faster?

TL;DR: We rebuilt our Shopify product page from scratch — without relying on apps. Eleven of fifteen apps came out, load time dropped from 17 seconds to 1.4, the JavaScript the browser has to download went from about 180 KB to 12, and the pages now pass every Core Web Vitals check. The rebuild took three weeks of evenings and weekends, no developer hired.

A note from our workshop on why we tore down the old product page and built it back by hand.

Our product page used to take seventeen seconds to load.

Most visitors never saw it. They arrived, waited, and left — and we had no way to tell them that the tea they were looking for was grown on a specific hillside by a specific farmer, because the page itself never finished arriving.

Today it loads in 1.4 seconds. This is the story of how we got there, and why we think it matters for a small shop like ours.

Bar chart showing page load time falling from 17 seconds to 1.4 seconds
Bar chart showing page load time falling from 17 seconds to 1.4 seconds

The problem with "easy"

Shopify makes it easy to add features. You install an app, flip a switch, and suddenly your page has reviews, or a size chart, or a countdown timer, or a live-chat bubble. Each one promises a small improvement.

We had fifteen of them. Each one added a little JavaScript to every page — a script that had to download, parse, and run before anything else could happen. The page you were trying to read had to wait in line behind fifteen features, most of which you'd never use.

When we audited what was actually loading on a product page, we found twenty-three JavaScript files and four font files all trying to load at once. The browser didn't know which to prioritize, so it prioritized none of them well.

Diagram showing fifteen app scripts queueing in line before the product page can load
Diagram showing fifteen app scripts queueing in line before the product page can load

Tearing it down

We took a weekend and uninstalled eleven of the fifteen apps. Reviews we kept. A few others we kept. The rest we replaced with plain HTML and CSS — the same two languages that have been quietly powering the web since long before "apps" existed.

A few things surprised us.

First, most of what the apps were doing was already possible in the theme. A countdown timer is a few lines of JavaScript. A size chart is a table. An FAQ is a list with a bit of styling. The apps were charging us monthly fees — and slowing our site down — to do things we could do ourselves in an afternoon.

Uninstalling a Shopify app does not always remove its code. Some of the scripts we deleted kept running for weeks afterward, orphaned and invisible, slowing everything down from inside our own theme files.

We found one that had been running for three months after we uninstalled the app that put it there.

Note: If you've recently removed apps from your store, check your theme's `theme.liquid` and section files for leftover script tags. Search for the app's name or known script URLs. You may be carrying weight you no longer use.

Third, our theme itself was part of the problem. We'd bought a popular premium theme — beautiful demos, lots of features — and every one of those features loaded on every page, whether we used it or not.

The questions a product page has to answer

Once we'd cleared the clutter, we started from a different place: not what features should the page have, but what questions does a shopper have, and in what order?

A customer looking at a tin of Lakadong turmeric is really asking six things:

  1. Is this what I think it is?
  2. Is it good?
  3. Who grew it, and can I trust them?
  4. How do I use it?
  5. Is it safe?
  6. How do I buy it?

Everything else is noise. We rebuilt the page to answer those six questions, in that order, and nothing else.

Phone-shaped diagram showing the six sections of the rebuilt product page, each labelled with the question it answers
Phone-shaped diagram showing the six sections of the rebuilt product page, each labelled with the question it answers

No popups. No countdown timers. No "17 people are viewing this right now." Just the answers to the questions you came with.

The part that's boring but mattered

Underneath all of this, there's a piece of plumbing called metafields — Shopify's way of attaching structured information to a product. We'd never used them before. Once we did, the whole site got simpler.

Instead of writing a product page for Lakadong, and another for our Himalayan Black tea, and another for saffron, we wrote one product page — and each product fills in its own curcumin percentage, its own farmer, its own lab numbers. Adding a new product used to take us four hours. Now it takes twenty minutes.

This is the kind of invisible work that doesn't show up in marketing copy but changes everything about how a small team can operate. We are three people. We cannot afford to reinvent a product page every time we launch something.

What it cost, what it returned

The rebuild took about three weeks of work, spread over a couple of months. We didn't pay anyone. We just read the Shopify documentation carefully, wrote the code ourselves, and tested on real phones.

Pro Tip: Don't trust Chrome's "Slow 3G" throttling. It is meaningfully faster than an actual slow connection on a real phone. Test on a real device, ideally one that is a few years old, on a connection you don't control.
Results panel showing four numbers: 17s to 1.4s page load, 180KB to 12KB of JavaScript, passing Core Web Vitals, and better reading
Results panel showing four numbers: 17s to 1.4s page load, 180KB to 12KB of JavaScript, passing Core Web Vitals, and better reading

Why this is on our blog

You might be wondering why a shop that sells turmeric and tea is writing about web performance.

The honest answer is that we think about this work the same way we think about our sourcing: the care is the point. A jar of Lakadong turmeric from us has a name and a village and a harvest date attached to it because we don't want to hide how it was made. Our product page is the same. We made it ourselves, by hand, and we'd rather you know that than not.

If you're running a Shopify store and any of this is useful, take what helps. We learned most of it from other small shops who wrote about their own rebuilds. That's how this part of the internet is supposed to work.

Questions we get about the rebuild

Did you hire a developer?
No. We read the Shopify documentation, wrote the Liquid ourselves, and tested as we went. The whole rebuild was about three weeks of work, spread across a couple of months of evenings and weekends.
Which apps did you keep?
Reviews, and a small handful of others that did things we genuinely couldn't replicate in plain code. The test was simple: does this app pay for itself in revenue, or are we paying it to slow our site down?
Will deleting apps break my theme?
Sometimes. Apps inject code into theme files when you install them, and that code does not always get removed when you uninstall. After deleting an app, search your theme files for the app's name or script URLs and remove any leftovers by hand. Always work from a duplicate of your live theme.
Is custom Liquid really faster than apps?
Yes, but the bigger win is control. Apps load their full feature set on every page; custom code only does what you ask it to. The speed gain is a side effect of doing less.
Do you share the code?
Not yet. The Liquid is tangled up with our specific metafield schema and brand assumptions. If we ever clean it up into something portable, we'll write a follow-up.

Experience the Difference

Sourced directly from family farms. Pure, authentic, and full of story.

Shop Our Collection
Arun

Arun

I'm Arun. My family farmed for generations. Now I build the systems that let you know exactly where your tea and spices come from and who grew them. I code. I hike. I believe the best products come from places where people care enough to do the work right.