谷歌 PageSpeed Insights 给我的 Shopify 商店的移动评分是 23 分（满分 100 分）。二十三分。 “差”的门槛是 49 分。

我知道我的网站加载速度慢，客户也提到过。但我直到看到这个数字才意识到情况有多糟。根据 PageSpeed 的说法，最大的罪魁祸首是什么？图像。特别是在我的集合页面上，47 张产品图像同时加载，每张都是 2500×2500 的 JPEG 全高清图像。

页面总重量：38MB。在移动连接上，这需要 12 秒的加载时间。大多数客户在 3 秒后就会离开。

问题

我遵循了使用高分辨率产品图像（2500×2500 以符合亚马逊规范）的建议。但我在所有地方都提供了这些相同的全分辨率图像——集合页面、搜索结果、主页精选产品。每个缩略图都是一个被挤压到 300px 容器中的 2500px 图像。

这就像送了一个冰箱而客户只点了一只午餐盒。

解决方案 1：懒加载（立即影响）

懒加载意味着折叠以下的图像在用户滚动到它们之前不会加载。浏览器不是一次性加载所有 47 张图像，而是先加载 6-8 张可见的图像，然后等待其他图像的加载。

在 Shopify 上，这对大多数现代主题都是内置的。检查你的主题设置 → 性能 → “懒加载图像”。如果没有这个选项，你可以通过在你的 <img> 标签上添加一行属性来实现：loading="lazy"。

结果： 页面加载时间从 12 秒降低到 4.5 秒。PageSpeed 的评分从 23 提升到 51。仅仅通过懒加载，没有进行图像质量的改变。

我不再在所有地方提供一张 2500px 的图像，而是创建了多种尺寸：

如果你的主题使用 srcset 属性，Shopify 会自动处理此问题。大多数现代主题都支持。如果你的主题不支持，这值得升级或手动添加标记。

结果： 集合页面重量从 38MB 降到 3.2MB。减少了 92%。

JPEG 可以，但 WebP 更好。在视觉质量相同的情况下，文件大小减少 25-35%。

我使用批处理转换器将所有产品图像转换为 WebP。Shopify 自动将 WebP 提供给支持的浏览器（现在所有现代浏览器都支持），但你需要上传 WebP 版本。

结果： 在响应式尺寸调整的基础上，文件大小再减少 30%。集合页面现在小于 2.5MB。

懒加载对于折叠以下的图像很好，但你不想懒加载那些立即可见的图像。这些图像应该尽可能快地加载。

我在集合页面的前 4 张产品图像和产品页面的主要产品图像上添加了 fetchpriority="high"。这告诉浏览器优先加载这些图像而不是其他资源。

结果： 最大内容绘制（LCP）——衡量主要内容何时变得可见的核心网页指标——从 4.2 秒降到 1.8 秒。

跳出率的改善是最有意义的商业指标。离开的人少了 = 买的人多了。

高分辨率图像与快速加载并不是互相排斥的。 你可以拥有 2500px 的图像进行放大，同时又能实现快速的页面加载。关键是在合适的上下文中提供合适的大小。

图像优化是最高 ROI 的性能修复。 我花了几周优化 JavaScript 包和 CSS 交付。图像修复只花了一个下午，影响却是三倍。

核心网页指标会影响搜索排名。 在我的 PageSpeed 分数改善后，接下来一个月我的自然流量增长了大约 15%。谷歌会奖励快速的网站。

对于图像处理管道，我使用 pic1.ai 来去除背景，然后按多种尺寸导出。从一开始就拥有干净、正确尺寸的图像，使得优化比事后改造过大的图像要容易得多。