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.
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 ?