@Preben_Frenning did you figure out a good way to this yet?
I am looking for some examples of how to properly prefetch or preload items in a Shopify theme.
Something like loading product images on product pages on hover from a link on a collection page. Or prefetching collection page items from a link on the nav.
If your on the product page, you can access the product object for that product.
So product.media.first will get you the first media element, in your case an image.
Then you use the same image dimensions as you do on the product page, so that the resulting url will match what you use on the product page.
As for dynamically getting the first image of the carousel in the homepage, I have no idea besides writing a tool to find the image and dynamically inject a preload into your theme.
I haven't had much time to look more into it unfortunately, but I am also looking to solve something similar. Ideally, also prefetching the cart page after adding a product to the cart with AJAX as well.
I did try Instantpage a little bit, but never had time to configure it properly to work well with Shopify. But I'm gonna try some manual prefetching next time I am working on performance. It felt great, and a lot faster, but had a negative impact on our CR, most likely because something interfered.
The preloading of the first image is mainly to improve the perceived speed and rendering, with the purpose of getting a better CLS and LCP.
@DariusWS DariusWS solution is the way to go but make sure about a few things:
You need to preload exactly the image displayed, product.media.first will return the first product image. You want to preload the featured_image or selected_or_first_available_variant image. This depends on your setup. Also, make sure that your img_url filter matches.
Preload exactly the same image displayed in your product gallery, otherwise, you can do more harm than good.