Shopify PageSpeed Boost: Tackling Oversized Thumbnails in Dawn Theme

Hey everyone! I've been diving into the Shopify community forums again, and a recent discussion really caught my eye. It's about a persistent pain point for many store owners: PageSpeed Insights warnings, specifically the dreaded "image larger than needed" message. This time, the focus was on product thumbnails within the popular Dawn theme, and the thread offered some really interesting, albeit conflicting, insights.

The PageSpeed Thumbnail Conundrum

The conversation kicked off with a user, @WetandDry, highlighting a potential bug in Dawn v15.5.0. They noticed that on mobile, even though product thumbnails were displaying four-per-row, the theme's code in snippets/product-media-gallery.liquid seemed to be calculating their size as if there were only three per row. This mismatch, they argued, led to the browser requesting a much larger image (around 533px) for a slot that only needed about 301px, causing those PageSpeed warnings.

Beyond the layout calculation, @WetandDry also pointed out that the image_tag calls for these thumbnails were requesting a maximum width of 416px, which they felt was unnecessarily large for thumbnail slots.

The Initial Fix: A Community Consensus?

Right out of the gate, @CodingFifty jumped in, agreeing with the assessment and providing specific code snippets for a fix. @Mustafa_Ali also chimed in, confirming the issue and validating the proposed solution. It looked like a pretty straightforward fix:

1. Adjust the thumbnail calculation: Change the divisor in the sizes attribute from /3 to /4 for mobile.
2. Reduce maximum requested width: Bring down the image_url: width from 416 to 320.
3. Trim the widths array: Remove the oversized 416 entry.

Here's what the suggested changes looked like:

Code Changes Proposed:

In snippets/product-media-gallery.liquid:

1. Update the calc value:

calc((100vw - 8rem) / 4)

instead of:

calc((100vw - 8rem) / 3)

2. Reduce the maximum requested width:

image_url: width: 320

3. Trim the widths array:

widths: '54, 74, 104, 162, 208, 320'

These changes aim to ensure the browser requests image sizes that are much closer to the actual dimensions needed for mobile thumbnails, thus preventing unnecessary downloads of larger files.

Hold On: A Twist in the Tale!

Just when it seemed like a clear-cut case, @Vlad_Gerasimchuk and @lumine introduced some crucial nuances. They both pulled the stock Dawn v15.5.0 source code and found something different: the mobile grid for thumbnails, specifically within the @media screen and (max-width: 749px) rule in assets/section-main-product.css, actually *is* set to three-across (width: calc(33% - 0.6rem);). This means the calc((100vw - 8rem) / 3) in the Liquid file would be correct for a stock Dawn theme!

They argued that changing the divisor to /4 would actually make the requested image size *too small* for a 3-across layout. Furthermore, they clarified that the 416px width and its presence in the widths array are likely there to serve larger desktop layouts, where a single thumbnail slot can indeed require a bigger rendition when the grid goes to 4, 5, or even 6 columns.

The mysterious 533px dimension that triggered the PageSpeed warning was also questioned. @Vlad_Gerasimchuk and @lumine suggested it might be coming from:

• A custom CSS change on the store that widened the thumbnail slots.
• A different image altogether, not the thumbnail strip.
• Device pixel ratio scaling (e.g., a 2x retina display pulling a larger source for a smaller slot).

What This Means for YOUR Store

So, what's the takeaway from this fascinating discussion? It highlights the importance of understanding your *specific* store's setup. While a bug might exist in some modified versions of Dawn, a clean, stock installation might behave differently.

Your Action Plan: Verify Before You Modify!

Before you jump into editing your theme code, here's what I'd recommend:

1. Inspect Your Mobile Thumbnails: Open your Shopify store on a mobile device or use your browser's developer tools to simulate a mobile viewport (usually under 750px width). Carefully inspect the product thumbnails. How many are actually showing per row? Is it 3 or 4?

2. Check Your CSS: While still in developer tools, look at the CSS applied to your thumbnail list items (e.g., .thumbnail-list__item.slider__slide). Check the width property within mobile media queries (like @media screen and (max-width: 749px)). Does it say calc(33% - 0.6rem) (3-across) or something closer to calc(25% - Xrem) (4-across)?

3. Identify the Oversized Image: If PageSpeed Insights is flagging a 533px image, copy its URL and check what width= parameter it's requesting. Is it truly a thumbnail, or perhaps the main product image being loaded at a larger size?

4. Backup Your Theme: ALWAYS, and I mean ALWAYS, duplicate your live theme before making any code changes. This is your safety net!

If You Confirm the 4-Across Bug on Your Store:

If your investigation confirms that your mobile thumbnails are indeed displaying 4-per-row while the Liquid code is using the /3 divisor, then the proposed fix is likely applicable to your store. Here's how to implement it:

1. From your Shopify admin, go to Online Store > Themes.

2. Find your Dawn theme (or a duplicate you're working on), click Actions > Edit code.

3. Navigate to snippets/product-media-gallery.liquid.

4. Locate the sizes capture block. Find the line containing calc((100vw - 8rem) / 3) for the mobile fallback and change it to:

   calc((100vw - 8rem) / 4)
   

5. Find the two instances of image_url: width: 416 within the thumbnail

   and change them to:

   image_url: width: 320
   

   • Locate the two instances of widths: '54, 74, 104, 162, 208, 324, 416' and modify them to:

     widths: '54, 74, 104, 162, 208, 320'
     

   • Save your changes.

   • Thoroughly Test: Check your product pages on various mobile devices and viewport sizes. Make sure the thumbnails still look good and are not being undersized. Run PageSpeed Insights again to see if the warning has been resolved.

This discussion really underscores how complex theme optimization can be, especially with custom CSS or app integrations potentially altering default layouts. If you confirm a genuine bug in a stock Dawn theme, remember that the official place to report it is the Dawn GitHub Issues page. That's where theme developers can truly address it for everyone. By staying engaged with the community and carefully testing changes, we can all contribute to a faster, better Shopify experience!