谷歌:电子商务网站图片优化的6个建议

一张图片胜过千言万语。

创建一个吸引人的电子商务网站需要使用诱人的照片,但这些图片在网站上出现的方式对于创造一个出色的用户体验至关重要。在近期的电子商务要点(Ecommerce Essentials),谷歌的Alan Kent分享了为电子商务网站优化图片的六个技巧。

谷歌:电子商务网站图片优化的6个建议

谷歌的视频超过14分钟,这里是一个更容易理解的摘要,你可以在3分钟内看完。

1. 消除图像累积布局移动(CLS)

CLS指的是页面上的内容在加载过程中从一个地方视觉上移动,或转移到另一个地方的情况。

虽然这个问题并不完全是由图像引起的,但如果使用不当,它们也会造成这个问题。

2. 正确确定你的图片大小

为你的图片选择正确的宽度和高度,因为较大的文件需要更长的时间来下载。

由于访问你的网站的屏幕尺寸和分辨率的范围,正确确定图像的大小可能很复杂。

如果浏览器自行裁剪图片,下载的尺寸最终会比需要的要长,这只会拖累事情。

检测尺寸不正确的图像的一个简单方法是通过使用PageSpeed Insights报告中Opportunities下的正确尺寸的图像部分。

一旦你发现图片的大小超过需要,你就可以用响应式图片等解决方案来解决这个问题。

3. 使用最佳的图像文件格式

考虑一下你的图片的文件格式,比如是否使用PNG、JPEG或webP文件。

文件格式会影响文件大小,所以选择正确的文件格式需要仔细考虑。

每种格式都有优点和缺点需要权衡。例如,JPEG和webP的文件大小往往较小,尽管较小的大小是以牺牲图像质量为代价的。

然而,图像质量的下降可能不会被购物者注意到,而速度的好处可能是巨大的。

要检测你的网站是否可以从使用不同的图像格式中受益,请查看PageSpeed Insights报告中的 “以下一代格式服务图像 “部分。该报告列出了可以转换为更有效的文件格式的图像。

4. 适当地压缩图像

对你的图像使用正确的质量系数,以有效地编码它们,同时保留所需的图像质量。

PageSpeed Insights报告中的 “高效编码图像 “部分可用于确定哪些图像是压缩优化的良好候选者。该报告还显示了潜在的文件大小节省。

要找到一个你满意的质量因素,在几个使用不同质量值的图像上使用你选择的图像转换工具,并比较前后的情况。

谷歌推荐网站Squoosh.app作为比较有无压缩的图像的一个简单方法。

5. 浏览器中的图像缓存

告诉浏览器它可以安全地缓存多长时间的图像。

当你返回图片时,你可以返回一个带有缓存指导的HTTP响应头,比如建议浏览器缓存多长时间的图片。

同样,你可以使用PageSpeed Insights报告来检测你的网站上是否正确设置了HTTP响应缓存头。

使用有效的缓存策略为静态资产提供服务的部分,可以确定可能从缓存改进中受益的图像。

为了解决你网站上的问题,看看你是否有平台或网络服务器的设置可以改变,以调整你网站上图像的缓存寿命。

如果你不经常改变图像,那么你可以设置一个较长的缓存寿命。

6. 正确安排您的图片下载顺序

作为一个更高级的提示,谷歌建议正确安排网页资源的下载顺序。

建议采用以下的下载顺序:

  • 页面顶部的主要图像(hero image)
  • 折叠(fold)上方的其他图片
  • 折叠下方的图片
  • 网页上的其他图片可以延迟加载(lazy load)

要检测你的网站是否有效地加载图像,你可以参考PageSpeed Insights报告。在报告的defer offscreen images部分,你会看到一个可以在其他图片之后加载的图片列表。

如果对上述任何提示的更多细节感兴趣,可以观看谷歌的完整视频。

原创文章,作者:华再,如若转载,请注明出处:https://www.zhiwaimao.com/google-image-optimization-tips/

(0)
上一篇 2022年5月17日
下一篇 2022年5月19日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注