# Collection page speed: grids, pagination, and the cost of showing everything Source: https://storefrontspeedjournal.com/blog/2026-10-20-collection-page-speed-shopify.html Reviewed October 20, 2026 Collection pages carry a store's browsing traffic and its heaviest image loads. How grid size, infinite scroll, filtering, and hover effects tax speed, and the settings that keep browsing fast. ## Why collections are quietly your heaviest pages A product page carries one product's worth of media. A collection page carries dozens: every tile is an image, many themes load a second hover image per tile, and filtering and sorting scripts ride along. Multiply by the fact that collections are the main browsing surface for most stores, and the collection template is frequently the largest speed liability per session, simply because it is visited so often with so much on it. The costs hide in defaults. Themes ship with generous products per page counts because it demos well. Hover swap images double the image requests in the grid. Filter systems that render every product and hide most of them ship the whole catalog's weight to every visitor, including the ninety percent of products the shopper will never see. ## Products per page: the simplest dial you own Fewer products per page means fewer images competing for the first screenful and a faster initial render. The first row or two of tiles is what the shopper waits for; tiles thirty deep can arrive lazily as they scroll. If your theme paginates, a moderate page size with clean lazy loading below the fold beats an everything grid on both speed and scannability. Infinite scroll deserves suspicion. It removes the pagination click, and it can also remove the shopper's sense of place while loading page after page of images into a session that only needed twelve products. Load more buttons are the honest compromise: the shopper opts into more weight, the browser is not ambushed by it, and the footer, with your policies and newsletter, remains reachable, which infinite scroll famously prevents. ## Hover images, badges, and tile furniture The second image on hover is a beloved merchandising trick and a straight doubling of grid image requests on desktop. If your analytics cannot show it earning its keep in click through or conversion, it is a strong candidate for removal, and it is invisible on mobile anyway, where most of your traffic browses. The same audit applies to every badge, swatch row, and quick view payload riding inside each tile. Image sizing is the other quiet multiplier. Collection tiles are small; serving them product page sized files scaled down by the browser wastes most of every download. Check that your theme requests the small image sizes for grid contexts. This single mismatch, giant files in tiny tiles, is one of the most common and most fixable collection speed findings. ## Filters and sorting without the weight Filtering is where collections get their scripts. Server side filtering, where choosing a filter requests the matching set, keeps page weight proportional to what is shown. Client side systems that load all products and filter in the browser front load the entire catalog into the first visit. Know which kind your theme or app runs; the network panel tells you in one visit, by the size of the data arriving before you touch a filter. None of this argues for bare collections. Filters, sorting, and rich tiles are how people shop. The argument is for proportionality: weight that matches the shopper's actual intent at each moment, loaded as they scroll, click, and filter, instead of the whole store's inventory arriving uninvited with the first page. Proportional pages feel instant because, to the visitor, they nearly are. ## Related reading If this topic is useful, these earlier guides go deeper on connected questions: [Shopify font loading, layout shift, and the invisible tax](https://storefrontspeedjournal.com/blog/2026-10-19-shopify-font-loading-layout-shift.md), [Removing Shopify apps cleanly: the speed audit after uninstall](https://storefrontspeedjournal.com/blog/2026-10-19-removing-shopify-apps-cleanly-speed-audit.md), and [Lazy loading images below the fold on Shopify, without breaking the hero](https://storefrontspeedjournal.com/blog/2026-10-18-shopify-lazy-loading-below-fold-images.md). ## Frequently asked questions ### How many products per page is the fast choice? Enough to browse comfortably, not the whole collection: commonly somewhere between twelve and twenty four, with lazy loading doing the work below the fold. The right number for your store is the one where the first screen renders fast and shoppers reach filters and sorting without wading. Test your largest collection on a mid range phone to judge honestly. ### Is infinite scroll bad for speed? It front loads less than an everything grid but keeps adding weight as the shopper scrolls, and it breaks access to the footer and any sense of position. A load more button achieves the same browsing with consent and control. If you keep infinite scroll, ensure images load lazily and the session does not accumulate hundreds of tiles. ### Do hover second images really cost that much? They roughly double image requests in the grid on desktop, where each tile quietly fetches its alternate view. On mobile they do nothing at all. Unless your data shows the hover view driving clicks or sales, removing it is one of the highest return, lowest risk speed changes on a collection page. ### Should filters load all products at once? Prefer systems that request filtered results from the server when a filter is chosen, keeping the initial page proportional to what is displayed. Loading the whole catalog into the page to filter locally makes the first visit carry products most shoppers will never see. Check your network panel: a huge data payload before any filtering is the tell.