Will a size chart app slow down your Shopify store?

A size chart app slows your store in two ways: by making the browser fetch the chart from the app's own servers on every product page, and by loading large scripts before anyone opens the guide. Neither is needed. A chart is a small table that can be written into the page with the rest of the product, and the code that opens it can be small and load late.

Here is what to watch for, how Ruban Size handles each one, and how to check any app on your own store.

What makes an app slow a product page

A request to the app's servers on every product page

When the charts live on the app's servers, the browser has to ask for them after the page arrives. That's one more connection to one more server, on every product page, before the link can show. If that server is slow, the link appears late. If it's down, there's no chart.

Scripts loaded up front

A large script has to be downloaded, read and run by the browser, and mid-range phones do that slowly. A size chart app that loads its whole code, size finder included, on every product page makes every shopper pay for a feature a few of them use.

Things that move after the page appears

A link or a button inserted late can push the Add to cart button down just as a shopper goes to tap it. Google's Core Web Vitals measure this as layout shift, and it's as annoying as it is measurable.

Images loaded before anyone asks

Chart images, how to measure illustrations and videos downloaded with the page cost bandwidth on every visit, opened or not.

Leftovers from old apps

Older apps sometimes edited theme files directly, and that code can stay after the app is gone. Apps built on Shopify's theme app extensions, with app embeds and app blocks, don't edit your theme's code.

How Ruban Size keeps out of the way

The theme writes the chart

Your charts are stored in your store, as Shopify metaobjects and metafields. When a product page is requested, the Ruban Size theme extension reads them in Liquid, and Shopify writes the chart into the page's HTML with the rest of the product. Nothing is fetched from Ruban Size's servers when a product page opens. If those servers were down, your product pages would still show their charts. How the data is laid out is in size charts and Shopify metafields.

A small script, the rest on demand

Two small scripts come with the product page, served by Shopify with your theme's assets: each is under 10 KB, and together they come to under 9 KB once compressed. Much of the rest loads only when it's needed:

• Find my size loads when a shopper asks for it.
• Rules for rings, shoes, belts, bracelets, hats, helmets, gloves and dogs load only on charts of those types. A T-shirt page never downloads the ring rules.
• The floating button and the reminder load only if you turn them on.
• Videos load when a shopper clicks them, and product photos in the guide (off by default) load when the guide opens.

The design page shows the layouts this applies to, and the fit by product type page lists the product types.

In the shopper's browser, not on a server

Find my size runs in the shopper's browser. Their measurements stay on their device and are never sent, so there's no round trip to wait for when they ask for a size. The Find my size page explains how it works.

Counters that don't wait

The statistics are anonymous daily counters, with no cookie. They're sent in the background, with the browser's beacon, which doesn't hold up the page.

Placed by the theme

With the app block, the link is written where you put it in the theme editor. With the app embed, it's placed next to the size option on its own, on 25 of the 26 themes most used by stores with size charts (checked on the themes of 1,121 stores). Both are theme app extensions, so nothing is pasted into your theme's code. The steps are in adding a size chart to Dawn and Horizon.

What to check with any app

You don't have to take an app's word for it, ours included. A few checks on your own store tell you what it really does:

1. Measure before you install. Run PageSpeed Insights or Lighthouse on a product page, on mobile, a few times: scores move from one run to the next, so compare the middle ones.
2. Install, set up one chart, and measure the same page again. Same tool, same page, same number of runs.
3. Look at the network. In Chrome, open DevTools, go to the Network tab and reload the product page. Filter by the app's name or domain: how many requests, to which servers, and how large?
4. Open the guide. Requests that start when a shopper opens the guide or asks for a size are fine: the shopper asked. Requests on every page load, before anyone clicks, are the ones to question.
5. Watch it load on a phone. Does the link pop in late and push the Add to cart button down?
6. Check after you uninstall. If you remove an app that edited your theme files, search your theme's code for its name and remove what it left. Apps built on theme app extensions leave no code in your theme files to clean up.

For the long run, Shopify's web performance report in your admin shows how your store loads for real visitors over time. It's a better judge of a change than a single lab test.

When speed and features pull apart

Some things are worth loading: a size finder that can save an exchange, a how to measure figure, a video of the fit. The question is when. Load them when a shopper asks, and the shoppers who never open the guide pay nothing for them. That's the rule Ruban Size is built on, and a fair test for any app you compare. The size chart editor shows everything a chart can hold under that rule.

Questions

Do Shopify apps slow down a store?

Some do. An app slows a page when it loads large scripts on every visit, calls its own servers before showing anything, or inserts content that moves the page. An app that renders through the theme from your store's data and loads its code on demand costs very little.

How can I tell if an app is slowing down my Shopify store?

Measure a product page with PageSpeed Insights or Lighthouse before and after installing it, a few runs each. Then check the Network tab of your browser's developer tools for the app's requests on page load, and their size.

Does Ruban Size call its servers when a product page loads?

Not to show the chart: it is stored in your store and written into the page by your theme, so nothing is fetched from Ruban Size's servers. The only thing sent is an anonymous counter, in the background, through your store's own domain. The two scripts come to under 9 KB compressed, and Find my size loads when a shopper asks.

Do app embeds slow down a Shopify theme?

An app embed is a way to add an app to your theme without editing its code; its effect on speed depends on what the app loads through it. Check the requests and script sizes it adds, as with any app.