How can I use the native loading 'lazy' attribute in my code?

Topic summary

Using Shopify, the goal is to replace a lazysizes setup with the native loading attribute for images. Recommended approach: add loading=“lazy” directly on tags; use loading=“eager” for the LCP (Largest Contentful Paint) image to improve performance.

After switching to loading=“eager”, the collection images on the homepage appear blurry. The user requested guidance to restore clarity.

Actions taken:

  • Helper requested the site URL and received: https://flowbins.co.za/.
  • Advised to use the loading attribute (not a CSS class) on the tag.
  • Proposed continuing via email for a detailed review; the user sent a private message. Feedback was promised within 24 hours.

Notes:

  • LCP image = the largest visible element that heavily influences page speed metrics.
  • The attached screenshots are illustrative but not essential to the issue.

Status: Unresolved. The helper will review the site and follow up privately; the blurry image issue remains open.

Summarized with AI on January 14. AI used: gpt-5.

thank you, I have send you a private msg.