Shopify Collection Page Speed: Fix Slow Grids

TL;DR: Collection pages are where Shopify shoppers decide what to buy, and they are often the heaviest pages on the store. Dozens of product images, filter scripts, swatches, quick-add buttons, and review widgets all load at once. This guide covers how to improve Shopify collection page speed: prioritize the first row of images, lazy load the rest, trim per-card JavaScript, stabilize layout, and cache at the edge. Fix these and you protect LCP, INP, and revenue.

In this article

• Why Shopify Collection Page Speed Suffers
• Prioritize the Right Images for LCP
• Cut JavaScript and Make Filters Instant
• Stabilize the Grid to Prevent Layout Shift
• Use Edge Delivery and Smarter Navigation
• A Collection Page Speed Checklist
• Frequently Asked Questions

Why Shopify Collection Page Speed Suffers

If you want better Shopify collection page speed, start by understanding why these templates struggle. A product page shows one hero image and a handful of thumbnails. A collection page can show 24, 36, or 48 product cards, and each card often carries a primary image, a hover image, color swatches, a price, a badge, a rating, and a quick-add button. Multiply the weight of one card by the grid size and the total adds up quickly.

Collection pages also sit in the middle of the buying journey. Shoppers arrive from paid ads, email, and organic search, then browse, filter, and sort before picking a product. A slow grid does not just hurt a speed score; it interrupts the exact moment when intent is highest. Our own analysis of Shopify speed and conversion data shows how small delays compound into measurable revenue loss.

The usual culprits on a collection template are consistent across stores:

• Too many full-size images requested at once, with no priority signal.
• Hover images and swatch images downloaded before anyone interacts.
• Filter and sort scripts that rebuild the grid on the main thread.
• App widgets (reviews, wishlists, badges) injected into every card.
• Late-loading elements that push the grid around and cause layout shift.

Measure First: Field Data by Template

Before changing anything, find out how your collection pages perform for real visitors. Lab tools are useful for debugging, but field data decides what Google sees and what customers feel. If you are unsure about the difference, read our breakdown of lab data vs field data.

Segment your results by template. Many stores report a single blended Core Web Vitals score, which hides the fact that the homepage is fast while collection pages fail. In Chrome UX Report or your RUM tool, compare collection URLs against product and home pages. Google's published thresholds for a "good" experience are LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1, measured at the 75th percentile.

Also split by device. Collection grids behave very differently on a mid-range phone than on a desktop monitor. Mobile usually has the slowest LCP because the browser must download and decode images on a constrained CPU and network. Start there.

Prioritize the Right Images for LCP

On most collection pages, the Largest Contentful Paint element is an image in the first row of the grid or a collection banner. The goal is simple: make the browser fetch that one element as early as possible, and make everything else wait.

Give the first row a high priority

Add fetchpriority="high" (see web.dev on LCP) to the banner image or the first one or two product images, and make sure those images are not lazy loaded. Lazy loading an above-the-fold image is one of the most common causes of a poor LCP score. Our guide on Shopify LCP image optimization walks through the full pattern.

Lazy load everything below the fold

Cards beyond the first visible row should use loading="lazy" and decoding="async". This keeps the initial request queue short so critical resources are not competing with 40 product photos.

Serve responsive, right-sized images

Use Shopify's image URL filter with a srcset and a correct sizes attribute so a phone never downloads a 2000 pixel wide image for a 180 pixel wide card. Set explicit width and height on every image so the browser can reserve space. Following Shopify's theme performance guidance, note that Shopify's CDN serves modern formats like WebP and AVIF automatically when the browser supports them, so focus your effort on dimensions and priority rather than manual conversion.

Defer hover images

A secondary hover image doubles the image weight of every card. Load it only on the first pointer interaction, or skip it entirely on touch devices where hover does not exist. This single change often removes a large share of image bytes from a mobile collection page.

Cut JavaScript and Make Filters Instant

Trim the scripts running on every card

Image work fixes LCP; JavaScript work fixes responsiveness. Collection pages invite heavy scripting because every card is a place to attach a feature. Each feature that runs once per card runs 24 to 48 times per page.

Audit what actually executes. Open the Performance panel in Chrome DevTools, record a page load, and look for long tasks over 50 milliseconds. Common offenders are review star widgets that fetch data per product, wishlist hearts that bind listeners individually, and badge scripts that read prices from the DOM.

Practical fixes include:

• Replace per-card app widgets with a single batched request or server-rendered markup.
• Use event delegation: one listener on the grid instead of one per card.
• Load quick-add and quick-view code on first interaction, not on page load.
• Remove apps that no longer earn their weight. Our look at third-party apps and page speed shows how quickly small scripts accumulate.

Long tasks matter because they block the main thread. When a shopper taps a filter and the page freezes for 400 milliseconds, that is an Interaction to Next Paint problem. Google's guidance on Interaction to Next Paint explains how to find and break up the offending work.

Make filtering and sorting feel instant

Filters are the most interactive part of a collection page and the most likely to fail INP. Shopify's Storefront Filtering can update the grid by fetching a fresh section from the server and swapping the markup. Done well, this is fast. Done poorly, it triggers a full re-render of every card and re-runs all of your per-card scripts.

A few habits keep filtering quick:

• Update only the product grid and the active filter state, not the whole page.
• Show immediate visual feedback (a pressed state or skeleton) before the response arrives so the interaction feels acknowledged.
• Debounce price sliders so you are not firing a request on every pixel of movement.
• Re-initialize scripts only on the newly inserted cards.

Keep pagination sensible too. Infinite scroll can feel smooth but it grows the DOM without limit, which slows every later interaction. A "load more" button with a reasonable page size, or classic pagination, usually performs better and is easier for search crawlers to follow.

Stabilize the Grid to Prevent Layout Shift

Nothing frustrates a shopper like tapping a product just as the grid jumps. Collection pages are prone to layout shift because content arrives in stages: images, ratings, badges, and promo banners all load at different times.

To keep CLS under 0.1, reserve space for everything that loads late:

• Set width and height or an aspect-ratio on every product image.
• Give rating stars and badge slots a fixed height so they do not push the title down.
• Reserve space for announcement bars, promo tiles, and sticky filter bars.
• Avoid inserting banners above the grid after the first paint.

Web fonts can also cause shifts. Preload the fonts used in product titles and prices, and use a metric-compatible fallback. For the full method, see our guide to Shopify font optimization.

Use Edge Delivery and Smarter Navigation

Once the page itself is lean, the next gain comes from how quickly it reaches the shopper. Collection pages are largely the same for most visitors, which makes them excellent candidates for caching close to the user. Faster Time to First Byte gives every later metric a head start, because the browser can begin discovering images sooner.

Navigation speed matters just as much. Shoppers move from a collection to a product page, then back again. Two techniques make that loop feel instant:

• Back/forward cache. When eligible, going back to the collection restores the page exactly as it was, including scroll position and applied filters. See our post on Shopify bfcache for what blocks eligibility.
• Prefetching and prerendering. The Speculation Rules API lets the browser load a likely next page before the click, so product pages open immediately. Use conservative rules so you do not waste bandwidth.

Edge-based optimization platforms apply many of these improvements without theme rewrites: smarter image delivery, script deferral, and caching at the CDN layer. That is the approach Nostra takes for enterprise Shopify brands, so engineering teams can focus on features while the infrastructure handles delivery.

A Collection Page Speed Checklist

Use this order of operations. It puts the biggest wins first and keeps changes testable.

1. Pull field data for collection URLs by device and note which vital fails.
2. Identify the LCP element on mobile and give it fetchpriority="high" without lazy loading.
3. Lazy load all images below the first row and add explicit dimensions.
4. Serve responsive srcset and sizes values matched to the real card width.
5. Defer hover images and swatch images until interaction.
6. Record a performance trace and remove or batch per-card scripts.
7. Make filters update only the grid and give instant visual feedback.
8. Reserve space for ratings, badges, banners, and sticky bars.
9. Confirm bfcache eligibility and add conservative prefetching.
10. Re-measure after two to four weeks of field data and compare against your baseline.

Change one thing at a time where you can, and annotate your analytics so you can tie improvements to specific releases. Keep in mind that bots can distort speed and conversion reporting, so segment out non-human traffic before judging results. Our guide on bot traffic in A/B tests explains why.

Frequently Asked Questions

What is a good load time for a Shopify collection page?

Aim for an LCP under 2.5 seconds at the 75th percentile on mobile, which is Google's threshold for a good experience. Collection pages usually need more work than product pages to reach it because of image volume, so treat mobile field data as your main target.

How many products should I show per page on a Shopify collection?

There is no single right number, but fewer cards means less to download and less DOM to manage. Many stores do well with 24 products and a clear "load more" or pagination control. Test your own page size against engagement and field data rather than copying a default.

Should I lazy load the first product images on a collection page?

No. Images in the first visible row, and any collection banner, should load eagerly and ideally carry a high fetch priority. Lazy load only the cards below the fold, since lazy loading the LCP element delays it.

Why does my Shopify collection page feel slow when filtering?

Usually the filter response triggers a heavy re-render and re-runs scripts on every card, which creates long tasks and a poor INP score. Update only the grid, re-initialize scripts on new cards, and show immediate visual feedback so the interaction feels responsive.

Do collection pages affect SEO as well as conversions?

Yes. Collection pages often rank for high-value category searches, and Core Web Vitals are part of Google's page experience signals. A faster, more stable grid supports both rankings and the shopper's path to purchase.

Turn a slow grid into revenue. Collection pages deserve the same performance attention as your homepage and checkout, because they carry the browsing intent that turns into orders. Start with measurement, fix image priority, trim per-card scripts, stabilize the layout, and let edge delivery do the heavy lifting. If you want to see how much faster your Shopify collection pages could be without a rebuild, book a demo with Nostra and we will show you what edge optimization can do for your store.