Why Collection Pages Are the Slowest Pages on Shopify
If you've ever tested your Shopify store in Google PageSpeed Insights, you've probably noticed a pattern: your homepage scores okay, product pages are decent, but collection pages score terribly.
This isn't a bug — it's the nature of collection pages. While a product page displays 1-5 images and some text, a collection page has to render:
12-48 product images — each one an HTTP request, each one rendering and decoding in the browser
Product card metadata — titles, prices, variants, badges, reviews — multiplied by every product on the page
Filter and sort JavaScript — often 50-200KB of JavaScript that loads and executes before the page is interactive
Pagination logic — whether it's numbered pages, "Load More" buttons, or infinite scroll
Collection banner images — many themes show large hero banners at the top of collection pages
The math is simple: a product page with 3 images totals maybe 300KB of image data. A collection page showing 24 products with unoptimized images can easily hit 3-5MB of image data alone. Add JavaScript, CSS, fonts, and tracking scripts, and you're looking at 5-8MB total page weight.
On a mobile phone with a 4G connection, that translates to a 6-12 second load time. Google considers anything above 2.5 seconds a poor Largest Contentful Paint (LCP) experience.
📊 The Revenue Impact
Collection pages are often the highest-traffic pages on your store — they're where shoppers browse, compare, and decide what to buy. A slow collection page means lost conversions. Research shows each additional second of load time reduces mobile conversion rates by up to 20%. If your collection page takes 6 seconds instead of 3, you could be losing 40-60% of potential mobile sales.
The 6 Biggest Collection Page Speed Killers
Not all performance issues are equal. Here are the specific problems that hurt collection pages the most, ranked by impact:
1. Unoptimized Product Images (Biggest Impact)
This is the #1 speed killer on collection pages, responsible for 60-80% of the total page weight in most stores. Common issues:
- • Oversized images — uploading 4000×4000px product photos that display at 300×300px on collection cards
- • No lazy loading — all 24+ images download immediately, even those below the fold that the visitor hasn't scrolled to
- • Wrong format — serving JPEG/PNG when WebP or AVIF would be 30-50% smaller
- • No srcset — serving the same large image to mobile and desktop instead of device-appropriate sizes
2. Render-Blocking Filter JavaScript
Collection filter and sort functionality — whether native Shopify OS 2.0 filters or third-party apps like Boost Product Filter — often loads 50-200KB of JavaScript that blocks page rendering. The visitor can't see products until this JavaScript finishes downloading and executing.
Popular filter apps add their own CSS and JS bundles on top of your theme's assets. Some inject inline scripts in the <head> that must execute before any content renders. Learn more about this in our guide on fixing render-blocking resources on Shopify.
3. Too Many Products Per Page
Some store owners set their collections to show 48, 72, or even 100 products per page thinking it helps the shopping experience. In reality, it multiplies every performance problem — more images, more DOM elements, more memory usage, more layout calculations.
4. Collection Banner Images
Many themes display a large hero/banner image at the top of collection pages. This image is often the LCP element — the largest visible content when the page loads. If it's not properly sized and preloaded, it delays the entire perceived load time.
5. Third-Party App Scripts
Third-party scripts from review apps, loyalty programs, chat widgets, and analytics tools load on every page — including collection pages. On a product page, 500ms of third-party script overhead is noticeable. On a collection page that's already heavy, it pushes you past the tipping point.
6. Hover Effects and Image Swaps
A popular design pattern is showing a secondary product image on hover. This means loading two images per product card instead of one — doubling the image payload for a feature most mobile users never see (no hover on touchscreens).
The Easy Fix: Let Thunder Optimize Your Collection Pages
Manually optimizing collection pages requires editing Liquid theme code, configuring image srcsets, deferring scripts, and testing across devices. One mistake can break your collection layout.
Thunder Page Speed Optimizer handles all of this automatically with a single install:
- ✦ Smart image lazy loading — only loads images as visitors scroll to them, saving 60-80% of initial image downloads
- ✦ Automatic image optimization — serves WebP/AVIF at the correct size for each device
- ✦ Defers filter & sort JavaScript — so products render instantly while scripts load in the background
- ✦ Critical CSS inlining — the first row of products appears immediately, no waiting for full CSS
- ✦ Preloads LCP images — identifies your collection banner/first product image and prioritizes it
- ✦ Third-party script management — delays non-essential scripts until after the page is interactive
Most stores see a 27+ point improvement in their PageSpeed score within minutes of installing Thunder. Collection pages often see the biggest gains because they have the most room for optimization.
Install Thunder — Free Trial →Prefer to do it yourself? The sections below cover manual optimization techniques — or see our complete speed optimization guide for a full walkthrough. Fair warning: each fix requires editing Liquid theme code, and mistakes can break your collection layout or cause images to not display. Make sure to duplicate your theme before making changes.
Fix: Hero Banner Image Eager Loading in theme.liquid
One of the most common Shopify collection page speed issues is how the hero banner image loads. Many themes — including Dawn, Refresh, and other OS 2.0 themes — set the collection banner to loading="lazy" by default. This is wrong for the hero banner because it's usually the Largest Contentful Paint (LCP) element — the biggest visible content when the page first loads.
When the hero banner is lazy-loaded, the browser deliberately delays downloading it until the user scrolls near it. But the banner is already visible in the viewport — so the browser waits unnecessarily, tanking your LCP score.
The Fix: Set Hero Banners to Eager Loading
Find your collection hero/banner section in your theme files. In most OS 2.0 themes, this is in sections/main-collection-banner.liquid or similar. Look for the <img> tag that renders the collection banner and change (or add) these attributes:
<!-- ❌ Wrong: lazy loading the hero banner -->
<img
src="{{ section.settings.image | image_url: width: 1600 }}"
loading="lazy"
alt="{{ section.settings.image.alt }}">
<!-- ✅ Correct: eager loading with high fetch priority -->
<img
src="{{ section.settings.image | image_url: width: 1600 }}"
loading="eager"
fetchpriority="high"
width="{{ section.settings.image.width }}"
height="{{ section.settings.image.height }}"
alt="{{ section.settings.image.alt }}">For Dawn/OS 2.0 Themes Specifically
In Dawn-based themes, the collection banner is often rendered via the image_tag or image_url filter in sections/main-collection-banner.liquid. You may also need to add a <link rel="preload"> tag in your theme.liquid head to tell the browser to start downloading the banner image even before it encounters the <img> tag:
<!-- Add to theme.liquid <head> for collection pages -->
{% if template.name == 'collection' and collection.image %}
<link rel="preload" as="image"
href="{{ collection.image | image_url: width: 1600 }}"
fetchpriority="high">
{% endif %}Impact: Fixing hero banner eager loading alone can improve LCP by 0.5–2 seconds — often the difference between a "poor" and "good" Core Web Vitals rating. For more on LCP optimization, see our LCP optimization guide.
⚡ Thunder handles this automatically: Thunder detects your LCP image (whether it's a collection banner, hero section, or first product image) and ensures it loads with eager priority while lazy-loading everything else. No theme code changes needed.
Manual Fix #1: Optimize Collection Images
The single highest-impact change you can make is fixing how product images load on collection pages.
Add Native Lazy Loading
Find your collection product card template (usually snippets/card-product.liquid or similar) and add loading="lazy" to product images. But here's the catch — you should NOT lazy-load the first row of visible products, as that delays LCP.
In your collection loop:
{% for product in collection.products %}
{% if forloop.index <= 4 %}
<img src="{{ product.featured_image | image_url: width: 400 }}"
loading="eager"
fetchpriority="{% if forloop.first %}high{% else %}auto{% endif %}"
width="400" height="400"
alt="{{ product.featured_image.alt | escape }}">
{% else %}
<img src="{{ product.featured_image | image_url: width: 400 }}"
loading="lazy"
width="400" height="400"
alt="{{ product.featured_image.alt | escape }}">
{% endif %}
{% endfor %}Use Responsive Image Sizes
Instead of serving one large image to all devices, use the srcset attribute with Shopify's image_url filter:
<img
src="{{ product.featured_image | image_url: width: 400 }}"
srcset="
{{ product.featured_image | image_url: width: 200 }} 200w,
{{ product.featured_image | image_url: width: 400 }} 400w,
{{ product.featured_image | image_url: width: 600 }} 600w"
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
loading="lazy"
width="400" height="400"
alt="{{ product.featured_image.alt | escape }}">Set Explicit Dimensions
Always include width and height attributes on your images. Without them, the browser can't calculate layout until the image loads, causing Cumulative Layout Shift (CLS) — your products jump around as images load in. See our Core Web Vitals guide for more on CLS.
⚠️ Common mistake: Adding loading="lazy" to ALL images including above-the-fold ones. This actually hurts LCP because the browser deprioritizes lazy images. The first 2-4 product images (the visible row) should always use loading="eager".
Manual Fix #2: Reduce Products Per Page
This is the simplest manual fix but often overlooked. In your theme settings (or in the collection template), adjust the number of products displayed per page.
48+
Products per page
Very slow, especially mobile
24-36
Products per page
Acceptable with optimization
16-24
Products per page
Optimal for speed + UX
In Shopify Online Store 2.0 themes, you can usually change this in Customize → Collection page → Product grid → Products per page. For vintage themes, you'll need to edit the collection template's Liquid paginate tag:
{% paginate collection.products by 20 %}
<!-- product grid -->
{% endpaginate %}Keep in mind: reducing products per page means more pagination. Make sure your pagination is accessible and user-friendly, with clear page numbers and next/previous buttons.
Manual Fix #3: Optimize Filters and Sorting
Filter and sort functionality is essential for collection usability — but it's also a major source of JavaScript bloat. Here's how to optimize it:
Use Shopify's Native Storefront Filtering
If you're on a Shopify Online Store 2.0 theme, use Shopify's built-in storefront filtering instead of third-party filter apps. Native filtering is server-side, meaning it doesn't require heavy client-side JavaScript. The page reloads with filtered results rather than filtering on the client.
To enable: go to Shopify Admin → Online Store → Navigation → Collection and search filters. Add the filters you want (price, availability, product type, vendor, etc.).
Defer Filter JavaScript
If you must use a third-party filter app for advanced features, make sure its scripts are deferred. Look for a <script> tag in your theme that loads the filter app's JS and add the defer attribute:
<!-- Before (render-blocking) -->
<script src="https://filter-app.com/bundle.js"></script>
<!-- After (deferred) -->
<script src="https://filter-app.com/bundle.js" defer></script>Note: Deferring third-party scripts can sometimes break their functionality. Always test after making changes. This is another area where Thunder shines — it intelligently defers scripts while ensuring they still work correctly.
Manual Fix #4: Implement Smart Pagination
How you handle pagination affects both speed and user experience. Here are the three approaches, ranked by performance:
✓ Best: Traditional Numbered Pagination
Each page is a separate server-rendered page. Clean, fast initial loads. Best for SEO as each page gets its own URL. The default on most Shopify themes.
○ Good: "Load More" Button
Fetches the next batch of products via AJAX without a full page reload. Good UX, but requires JavaScript and can accumulate DOM nodes if users click it many times.
✗ Risky: Infinite Scroll
Automatically loads more products as the user scrolls. Can cause memory issues, layout shifts, and makes it impossible to reach the footer. Harder to implement correctly.
If you use infinite scroll or "Load More," ensure your implementation uses the Intersection Observer API (not scroll event listeners, which tank performance) and includes proper <noscript> fallback pagination for SEO crawlers.
Manual Fix #5: Critical CSS for Collections
The browser can't render any content until it downloads and parses your full CSS file. On Shopify, theme CSS files are typically 100-300KB. Critical CSS inlining solves this by putting the CSS needed for the above-the-fold content directly in the HTML.
For collection pages, the critical CSS includes styles for:
- • The header/navigation
- • Collection banner image (if present)
- • The first row of product cards (grid layout, image sizing, text styling)
- • Filter sidebar layout (if visible above the fold)
Generating critical CSS manually is tedious — you need to identify which CSS rules apply to above-the-fold elements, extract them, inline them in a <style> tag in the <head>, and then asynchronously load the full stylesheet. Tools like Critical by Addy Osmani can help automate this, but integrating them into a Shopify theme build process is non-trivial.
This is complex to get right. Extract too little CSS and your above-the-fold content looks broken for a moment (flash of unstyled content). Extract too much and you bloat your HTML with inline styles. Thunder handles critical CSS extraction and inlining automatically — and updates it whenever your theme changes.
How to Measure Collection Page Speed
Don't guess — measure. You can test your collection page speed in seconds with our free tool, or use the options below. But test the right URLs. Most people test their homepage and call it done. For collection page speed, you need to test:
Your largest collection — the one with the most products, as it has the heaviest page
A collection with banner image — banner images are often the LCP element
A filtered collection URL — e.g., /collections/all?filter.v.color=Blue to check filter performance
Use these tools for testing (learn more in our performance monitoring guide):
- • Google PageSpeed Insights — tests mobile and desktop, shows Core Web Vitals
- • GTmetrix — detailed waterfall charts showing exactly what's slow
- • Chrome DevTools (Network tab) — filter by images to see total image payload
- • WebPageTest — filmstrip view to see when products become visible
Key metrics to watch: LCP (should be under 2.5s), CLS (under 0.1), and Total Blocking Time (under 200ms). For collection pages, also track total page weight — aim for under 2MB total with images optimized.
Thunder vs. Manual Collection Page Optimization
| ⚡ Thunder | Manual Optimization | |
|---|---|---|
| Setup time | 60 seconds | 8-20 hours of theme editing |
| Image optimization | Automatic (lazy load + srcset + format) | Manual Liquid code changes |
| Script deferral | Intelligent, won't break apps | Trial and error per script |
| Critical CSS | Auto-generated and updated | Complex build process needed |
| Risk of breaking layout | None | High |
| Theme update safe | Yes | Must redo after updates |
Frequently Asked Questions
Why are Shopify collection pages slower than product pages?
Collection pages display multiple product images at once — typically 12-48 on a single page. Each image triggers a separate HTTP request, and if images aren't optimized, they can add megabytes of data. Product pages usually show 1-5 images plus text, making them inherently lighter. Collection pages also load filter/sort JavaScript and pagination logic that product pages don't need.
How many products per page is optimal for speed?
For the best balance of speed and usability, display 16-24 products per page. Showing fewer than 12 frustrates shoppers who have to paginate constantly. Showing more than 36 causes significant performance degradation, especially on mobile devices with limited memory and slower processors. Thunder Page Speed Optimizer helps by lazy-loading images below the fold regardless of how many products you show.
Does infinite scroll hurt collection page speed?
Infinite scroll itself doesn't hurt initial page load speed — in fact, it can improve it by only loading the first batch of products. However, poorly implemented infinite scroll can cause memory leaks, layout shifts (CLS issues), and increasingly sluggish scrolling as more products load. The key is proper implementation with intersection observer APIs and DOM recycling for very large collections.
Should I disable collection filters to improve speed?
No — removing filters hurts the shopping experience and conversion rates. Instead, optimize how filters work. The main speed issue is filter JavaScript that loads upfront even before users interact with it. Thunder defers this JavaScript so it loads only when needed. If you're doing manual optimization, look for filter apps that use progressive enhancement rather than loading everything on page load.
How do I fix hero banner image eager loading in Shopify theme.liquid?
Find your collection banner section (usually sections/main-collection-banner.liquid) and change the hero image from loading='lazy' to loading='eager' with fetchpriority='high'. Then add a preload link in your theme.liquid head: use a conditional check for collection pages and add <link rel='preload' as='image'> pointing to the collection image URL. This tells the browser to prioritize the banner image, improving LCP by 0.5–2 seconds. Thunder Page Speed Optimizer handles this detection and prioritization automatically.
Thunder Page Speed Optimizer applies several collection-specific optimizations: it lazy-loads all product images below the first visible row, defers filter and sort JavaScript until user interaction, optimizes product card images to serve the correct size for each device, inlines critical CSS so the first row of products renders instantly, and preconnects to Shopify's CDN for faster image delivery.