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

Technical Q&A
1

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?

2

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

3

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