Last week a merchant of mine pinged me at 1am on a Tuesday. Her Lighthouse score had dropped from 78 to 34 in a week. I walked her through her issues quickly and after about 10 minutes we found the culprit: a combined listings app with swatches that loaded swatches from an external CDN. This app was blocking the main thread on almost every collection page causing her LCP to jump from 2.1s to 4.9s and conversion to drop. She was not happy.
Shopify combined listings page speed is the 900 lb gorilla in the room that nobody wants to discuss. Google is now using Core Web Vitals as a ranking factor for websites, and the last thing you want is for customers to leave your site quicker than they arrive due to a page that takes a few seconds to load. The worst part is most of these apps follow a similar render path that are guaranteed to tank your LCP, add extra jumps / layout shifts, and increase time to first input. Not all apps are created equal, but there are enough that exist and are downloaded daily that if you care about your store’s performance you should probably be aware of them.
This post will cover real Core Web Vitals impact of combined listings, what metrics you should pay attention to, how Rubik Combined Listings keeps performance high and how to use PageSpeed Insights to track regressions before your customers even notice.
In this post
- Why combined listings speed matters
- LCP impact
- CLS impact
- INP impact
- How Rubik stays fast
- How to measure
- FAQ
- Related reading
Why combined listings speed matters
Combined listings are displayed on the 2 highest value pages of the shop, the collection page and the individual product page. This is where the buying happens. Optimising the rendering of these pages is not about saving a few hundred milliseconds for the sake of it – it’s about making money. On the collection page, the 100ms or so saved is perhaps minor. On the product page, it is significant – 200ms is cash.
Google measures three things on real user devices and uses them in search ranking: Largest Contentful Paint (how fast is the biggest visible element loading). Cumulative Layout Shift (how much is jumping around on the screen). Interaction to Next Paint (how fast does the page react to your interactions). These listings apps seem to hit on all three factors and sometimes fail on all three factors.
LCP impact (Largest Contentful Paint)
LCP = product image/hero for a Shopify store. Combined listings apps can push LCP further down the page in two ways: by first blocking the main thread with a large JS bundle and then also injecting render-blocking CSS from an external CDN.
Some apps actually load swatch color data from their own server. That means every time a collection page is rendered for a customer, their browser makes an additional fetch call to serve up that data. Even if the swatches themselves are below the LCP element in the DOM, the main thread work needed to render them can cause delay in rendering whatever is at LCP. Thus, “my LCP got worse when I installed a combined product listings app” is a real comment in the guide.
CLS impact (Cumulative Layout Shift)
CLS is our boogeyman today. It is a relatively rare but destructive bug, especially for production sites and not immediately apparent during local development. By nature, swatches load after the rest of the collection grid and will push product cards or the add to cart button downwards manually, usually at a bad time like right as a customer is trying to add an item to their cart.
Fix: Allocate initial space for swatch container. The application knows the height of the swatch container (32px) so it should render a 32px high placeholder before rendering out the swatches. Skipping this breaks the ship CLS score which is 0.25 or worse, “Poor”.
INP impact (Interaction to Next Paint)
INPReplaced FID in March 2024. Worst-case click responsiveness throughout the session. Swatch clicks are where it’s hot – every click contains JS, and if the JS is heavy (parsing JSON, manipulating the DOM, re-rendering sections of the page) then INP will suffer.
Target: under 200ms for “Good”, under 500ms for “Needs Improvement”, any above is “Poor”. Most swatch clicks should be under 100ms.
How Rubik Combined Listings stays fast
Three architectural choices. That is the whole story.
- Metafield-based loading. Group data lives as product metafields inside Shopify itself. The theme reads it from the Liquid object during server-side render. No fetch calls. No round trip.
- No external API calls. Rubik never phones home during page render. Zero third-party requests on your critical path. Your TTFB stays yours.
- Shadow DOM encapsulation. Swatch styles live in an isolated shadow tree. They cannot leak into your theme’s CSS and cannot cause layout shift in your product cards.
The result of all these techniques is that Rubik adds no external blocking requests, reserves out layout space for swatches before they load, and your swatch click handlers are still under the 200ms INP budget for most setups.
How to measure combined listings speed
Three tools. Use all three. They tell you different things.
| Tool | What it tells you | When to use |
|---|---|---|
| PageSpeed Insights | Field data (real users) + lab scores | Before and after install |
| Lighthouse (Chrome DevTools) | Lab throttled metrics, detailed waterfall | Debugging a specific regression |
| Chrome Web Vitals extension | Live INP as you click around | Interactive debugging of swatch clicks |
Important – Workflow to measure performance impact: first run PageSpeed Insights on collection page as you have now, record the scores. Then install any combined listings app, then after 24 hours re-run PageSpeed Insights and compare the scores. If the performance score drops by 5 or more points consider to look for alternative but a drop of 10 points or more should mean you uninstall the extension and look for another alternative.
– Read full image optimisation, font optimisation, and theme bloat optimisation strategy on Shopify page speed optimisation guide on Craftshift. This article is a part of a larger series on Shopify page speed optimisation. Also, read: variant image rendering speed on product pages.
See the live demo store, watch the tutorial video, or read the getting started guide.
Frequently asked questions
Does installing a combined listings app hurt my Shopify Core Web Vitals?
for example on some apps this will decrease their LCP/INP because of the network call on every page load, but for the Rubik app it doesn’t because the app reads the Shopify metafield on the server-side render so there is no extra network call.
How does Rubik Combined Listings load its swatch data?
Rubik stores group data as metafields on the master product. The theme then parses these metafields out inline during the Liquid render. No additional data is fetched at runtime. Swatches are rendered as part of the initial HTML.
What is a “Good” INP score for a product page with swatches?
Under 200ms = Good, 200-500ms = Needs Improvement, 500ms+ = Poor. A decent swatch click handler should be under 100ms to interact with it.
Will combined listings cause layout shift on my collection page?
This app injects swatches AFTER the page has rendered without padding out space. Rubik renders the swatch container on the server with a fixed height so nothing moves around once swatches render.
How do I test combined listings speed before committing?
Run PageSpeed Insights on collection page, install app on dev theme then run PageSpeed Insights on same page. Measure changes in Performance Score, LCP, CLS, INP. Aim for a 5 point drop but no more than 10 point drop.
Does Rubik use the shadow DOM?
Yes. Swatch markup is contained within a shadow root (a.b-c) which prevents Swatch’s control’s CSS from conflicting with your theme’s CSS, and prevents any potentially ugliness inducing layout shift to surrounding content.
Can combined listings speed actually affect my Google ranking?
core web vitals are now a confirmed ranking signal for Google. When building a combined listings app for your site, make sure you avoid pushing LCP above 2.5s as well as increasing INP above 200ms – as this will place your collection and product pages under ranking pressure. You can read more in the Search Central docs.
