FROM CACHE - en_header

How to get LCP < 2.5s on Mobile Product Page (Debut theme)

mfcss
Explorer
57 6 21

We're trying to achieve LCP < 2.5 on PageSpeed for our product pages. However, while we're in the range of 2.7-3.0s, we struggle to get the last steps added.

 

One recommended step we've encountered has been to preload the product image - but we're unsure if this is already done by default in the Debut theme via `lazypreload` from `lazysizes` - and if not, how we'd achieve it for responsive images within Liquid. Any suggestions on this?

 

In addition, we have a number of add-ins like Infinite Options, which we'd like to "defer" loading off. We've tried to do this via putting the loading into our footer and using "defer", but these scripts seem to still load before the LCP is reached. Any suggestions on how to generally handle this kind of challenge?

Replies 2 (2)
Cedcommerce
Shopify Expert
280 32 47

Hello @mfcss ,

Hope you are doing well!!

 

We read your concern regarding achieving LCP<2.5 on Page Speed for the product pages. We recommend you to do the following steps:- 

 

  • Apply the “Lazy load” in the Script file and CSS file.
  • Resolve all the opportunities shown in Google Insights.


As “Defer” loads the script from the backend and we cannot tag “defer” in every script, that’s why you are facing such issues. 

 

Let me know if you face any issues in resolving this, we will help you out. For further concern, you can connect on Whats app via this link:- https://chat.whatsapp.com/EFgRCPfCmDjHoZBNcINTEJ

 

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
hasanarmstrong
Excursionist
23 5 4

Hi @mfcss,

 

Preloading is not done by the lazy sizes library. To preload product images, i'd suggest using preload attribute  https://shopify.dev/api/liquid/filters/html-filters#performance within the image_tag.

 

Regarding your second query, i cannot give a helpful answer without seeing how your infinite options functionality is setup.

 

Best,

 

Hasan

Front-end developer who helps Shopify merchants with their website/s.
https://hasanarmstrong.com