概述

网站的图片的编码不够高效，会导致加载速度过慢。

解决方案

对于动画图片，请考虑使用 video 元素（而不是 GIF）以实现更好的压缩效果。

• 始终将 GIF 转换为 PNG 格式，除非原始图片是动画图片或非常小（不足几百字节）。

• 对于 GIF 和 PNG，如果所有像素都是不透明的，请移除 Alpha 通道。

例如，您可以使用 convert 库通过如下命令优化 GIF 和 PNG 图片（括号内的参数是可选的）：

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

cuppa.png（1763 字节）

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png（856 字节）

JPEG 是一种有损格式。压缩过程会去除此类图片的外观细节，但压缩宽高比可能会是 GIF 或 PNG 的 10 倍。

• 如果图片质量较高，请将其降至 85。当图片质量大于 85 时，图片会迅速变大，但外观上的改善却微乎其微。

• 将色度采样率降至 4:2:0，因为人类视觉系统对亮度（与颜色相较而言）更敏感。

• 对超过 10k 字节的图片使用渐进式格式。渐进式 JPEG 通常可为大型图片实现更高的压缩宽高比（与基准 JPEG 相较而言），并具有渐进式呈现图片的优势。

• 如果图片是黑白的，请使用灰度色彩空间。

例如，您可以使用 convert 库通过如下命令优化 JPEG 图片（括号内的参数是可选的）：

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

puzzle.jpg（13501 字节）

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg（4599 字节）

优化 JavaScript #

• 使用 PRPL 模式实现即时加载

• 通过代码拆分减少 JavaScript 负载

• 删除未使用的代码

• 缩小和压缩网络有效负载

• Serve modern code to modern browsers for faster page loads

• 发布、传输和安装现代 JavaScript 以实现更快的应用程序

• CommonJS 如何让您的捆绑包变得更大

优化 CSS #

• 延迟加载非关键 CSS

• Minify CSS

• 提取关键 CSS (Critical CSS)

• 使用媒体查询优化 CSS 背景图像

专家服务

shopify用户可进入我们的网站诊断检测结果页面，点击“专家服务”，

限时1元购买我们的专家服务，获取技术专家的1对1配置服务！