如何在 Shopify 中延迟屏幕外图像？

Question

根据 Google PageSpeed Insights，延迟离屏图像加载页面需要 10 秒以上。我想知道如何在编码部分处理/修复这个问题。我认为它可以通过使用媒体查询来完成，但是如何？

我已经压缩了图像并调整了图像尺寸。

我的页面速度是移动设备的 10/100 和桌面设备的 65/100。

“https://withambience.com/collections/all-time-favorites/products/royalwinterleggings”

谢谢

Answer 1

我建议延迟加载您的图片。这是一个使用lazysizes 库的quick tutorial。这是来自 shopify 团队的更通用的optimization article。祝你好运。