Is it possible to preload a product's main image?

Technical Q&A
,

Topic summary

Question: How to preload the main product image across multiple product pages without hardcoding specific image URLs.

Solution Provided: Add a Liquid snippet to the <head> section of theme.liquid:

{% if template == 'product' %}
<link rel="preload" as="image" href="{{ product.featured_image | img_url: '1024x1024' }}">
{% endif %}

This dynamically preloads each product’s featured image. The image size parameter (1024x1024) should match what’s actually used in the store.

Follow-up Issue: After implementation in theme.liquid, performance scores (Debug Bear and PSI) showed minimal improvement. The original poster is now asking whether the snippet can be placed in product.liquid despite the absence of a <head> section there.

Status: Awaiting clarification on alternative placement options and troubleshooting the lack of performance improvement.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I know how to preload the Hero Image on my home page, by putting a snippet of code into my Theme.Liquid, which includes the actual href of my image (because it is one image in one place, the home page).

HOWEVER - what snippet can I put in my Theme.Liquid that will ask it to preload the main image on EACH product page? Or would I put it into a different code file?

Obviously I can’t put in a specific and actual href (image name, etc) because there are a couple hundred products.

Is there some sort of generic snippet that will ask it to just choose the first image in a product and preload it?

thank you in advance!

Sincerely, Katie

2

Yes, you can preload the main product image dynamically by adding this snippet to your theme.liquid file inside the section:

{% if template == ‘product’ %}

{% endif %}

This will automatically pull the featured image of each product and preload it. Adjust the image size (1024x1024) based on what’s used in your store for optimization.

Alternatively, if your theme uses main-product.liquid or product-template.liquid, you can add the preload link inside those files to keep it specific to product pages

3

Hi Promer-Alena,

thanks for your time! I added this to my theme.liquid because there isn’t a in the other two liquid files.

But my Debug Bear and PSI scores stayed almost the same.

I am wondering if it is okay to add it at the top of the product.liquid even if there is no ?