Can you recommend the proper method and syntax for preloading the primary product image for Flex?
Much thanks in advance to the community hero who can help us with this,
PS Here is an example of the preload we attempted, but it did not preload the primary product image so that Flex could utilize the preload for LCP
It looks like you are lazyloading images which is good practice and your website feels fast to me.
Trying to pre-load an image at 2000x/1200x is wasteful. Apart from the huge image file this will produce, this won't match with the image you are lazyloading. I don't think you'll be able to preload an image like this, as you'd need to know which device size you're loading on. You'll end up pre-loading an image that will never get used, then lazyloading the proper one.
The point/value of lazyloading is to defer loading images until a later stage, by preloading them you'll break this and ultimately reduce your load speed.
I agree that incorporating the image size into the preload is part of the task. I'd offer a gentle nudge to what you wrote about 2000x file sizes. Again, we're doing this strictly to assist mobile. That means file size will be restricted to images 600x and under. So worse case scenario we preload a 600x and 200x.
The lazyload you're reading is actually just the name of the flex class
We understand from Flex that they actually aren't lazyloading these key product page images which are clearly above the fold (and so shouldn't be lazyloaded).
We appreciate your comments as it reflects a thoughtful process. If you have a preloading solution that would work with Flex, we'd welcome it.
Let us know and thanks,