Proper method and syntax for preloading the primary product image for Flex?

Background:

  1. We were using Shopify Supply Theme and for the product page (primary image) had a very similar LCP Core Web Value score between Desktop and Mobile. 
  2. We haven't changed our images (which are auto compacted), yet we see that in Flex Theme the very same primary product images are very slow to load on Mobile and very fast to load on Desktop.
  3. We tested this in an out of the box Flex Them with ZERO modifications and apps and see the same issue.  So it is specific to the Flex Theme itself out of the box.
  4. We tried to format a preload on the Flex Product Page primary image (as we had done in Supply theme), but they way Flex calls the primary product image, we're unsure how to code the preload for Flex.

Question:

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,

Dan

www.TheGameSteward.com

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

sample preload.png

 

 

0 Likes
iDoThemes
Explorer
72 15 31

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.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor

Theme Developer -- Drop me a line
0 Likes

Hi iDoTheme,

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 classflex class.png

 

 

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,

Dan

0 Likes