Back to all posts

Why Your Shopify Theme Is Running Full Product Page Logic on Collection Pages and Slowing Down the One Page That Drives the Most Traffic

Shopify Theme Performance CRO Technical Audit Collection Pages

The Page That Gets the Most Traffic Is Usually the Slowest

When we audit Shopify stores doing $2M to $20M, collection pages are almost always the highest-traffic page type on the site. They pull in organic traffic, paid traffic, and returning visitors who know what category they want but haven't picked a product yet. They are the filter between a visitor and a product page.

And in store after store, collection pages are loading 60 to 80 percent of the JavaScript and rendering logic that was written for product pages.

This is not a theoretical problem. We open Chrome DevTools on a collection page, run a network trace, and watch the browser download app scripts for review carousels, sticky add-to-cart bars, bundle pickers, upsell widgets, and variant selection logic. None of those elements exist on a collection page. They have no job to do there. But they are loading anyway, adding 400ms to 1.2 seconds of unnecessary execution time to every collection page load.

The cause is almost never intentional. It is a structural problem in how most Shopify themes handle script loading by default.

How This Happens in Practice

Shopify themes use a global layout file, typically theme.liquid, that wraps every page on the store. App blocks and scripts that get added through the theme editor or injected via <script> tags in that layout file execute on every page, regardless of context.

When a developer adds a sticky add-to-cart app, they drop the script into theme.liquid because that is the path of least resistance. When a review app gets installed, its JavaScript loads on the layout level so the developer does not have to think about where reviews appear. When a bundle app gets configured, the initialization script runs globally so it is ready by the time a product page loads.

The problem is that collection pages are also wrapped by theme.liquid. So every one of those scripts initializes, checks the DOM for elements that do not exist on a collection page, finds nothing, and either throws a silent error or simply sits in memory doing nothing.

We have seen stores where a collection page loads 22 separate JavaScript files, and only 6 of them are used by anything that renders on that page. The other 16 are product page concerns loading on a page that has no products in the individual product sense, only cards in a grid.

What the Performance Impact Actually Looks Like

The browser does not know which scripts are relevant to the current page context. It parses and executes everything it is told to load. That means every unnecessary script is stealing thread time from the scripts that actually build and render the collection page.

On a mid-tier Android device on a 4G connection, which is a realistic representation of a large portion of DTC mobile traffic, this execution overhead often pushes Total Blocking Time above 300ms and Largest Contentful Paint past 3.5 seconds for collection pages that should be loading in under 2.

We use Google PageSpeed Insights and WebPageTest to measure this, looking specifically at the main thread activity waterfall. When you see a long chain of JavaScript tasks executing before the page becomes interactive, and those tasks have names tied to apps that only function on product pages, you are looking at this exact problem.

Lighthouse will flag it as "Reduce unused JavaScript" but it does not tell you why those scripts are there or which pages they belong on. That diagnosis requires someone who knows the theme architecture and can cross-reference the script sources against the app list in the Shopify admin.

How to Fix It Without Breaking Your Product Pages

The fix is conditional script loading. Scripts that only serve a function on product pages should only load on product pages. Shopify's template system makes this possible.

In Liquid, you can scope script loading to specific template types using the template object. A script block wrapped in &#123;% if template == 'product' %&#125; will only execute on product pages. The same pattern works for collection-specific scripts, cart scripts, and blog scripts.

For app scripts injected through app embeds in the theme editor, the solution is slightly different. Some apps give you control over which page templates include the embed block. If your sticky cart app has an embed toggle in the theme editor, check which templates it is enabled on. Many installs leave it enabled across all templates because the installer never restricted it during setup.

For scripts injected directly into theme.liquid via code edits, usually from older app installs or custom feature additions, someone needs to audit each script tag, identify which page type it serves, and wrap it in the appropriate template condition. This is typically a one to two hour task for a developer who knows Liquid, but it is rarely done because no one flags it as a problem until performance becomes painful enough to investigate.

One practical starting point is to open your collection page in an incognito browser window, open the network tab in DevTools, filter by JS files, and look at which scripts are loading. Then cross-reference those script sources against your app list. Any app that only appears on product pages is a candidate for conditional loading.

The Downstream Effect on Conversion That Most Teams Miss

Slower collection pages do not just lower PageSpeed scores. They increase bounce rate on the pages where most paid traffic lands. When you are sending Meta and Google traffic to a collection page and that page takes 3.8 seconds to become interactive on mobile, a meaningful portion of those visitors leave before the grid even renders.

We have seen stores where fixing collection page script bloat reduced mobile bounce rate by 12 to 18 percentage points on paid traffic landing pages. That improvement flows directly into conversion rate because more visitors are staying long enough to click a product.

The work is technical, but the result shows up in your ad account efficiency. Your cost per conversion drops without changing a single ad or bid strategy, simply because the page the ad sends traffic to is no longer losing visitors in the first seconds of the load.

If your collection pages feel slow compared to your product pages, this is usually why. The irony is that product pages carry more scripts and heavier media, but they often feel faster because the scripts on them are at least doing something.

If you want a full picture of where your theme is losing performance and where that performance loss is costing you conversion, that is exactly what we look at in our conversion audit. We trace script execution, map it to page templates, and tell you specifically what to fix and in what order.