如何在WordPress中使用WebP文件并减少页面加载时间
到目前为止，我们大多数人都知道，图像优化非常重要，因为它在 WordPress 网站的总加载时间中起着很大的作用。今天，我们想与你分享如何将 Google 的 WebP 文件集成到 WordPress 网站中的简便方法。一些用户看到图像文件的大小减少了 70％ 以上！
如果你不熟悉 WebP，它是Web性能团队在 Google 上创建的一种图像文件格式，旨在创建更小，更快的图像。它于 2010 年首次发布，具有有损和无损压缩方法。图像根据其使用的MIME类型从 Web 服务器传递到Web浏览器 image/webp。
WebP 为什么如此重要？根据 httparchive 的资料，截至 2016 年 8 月，图像占平均网页重量的 64％ 以上。通常，它比 CSS，JS 和 HTML 的总和还多。因此，选择健壮的图像优化方法和图像格式（例如 WebP）至关重要，这样你才能最大程度地减少页面权重。通常，页面越小，加载速度越快。由于页面速度是排名因素，因此，这不仅会使你的访问者满意，还会对 SEO 有好处。
WebP 支持
现在，尽管 WebP 非常令人兴奋，但提及浏览器支持也很重要。目前，并非所有现代浏览器都支持 WebP。根据 caniuse 的说法，Chrome 23 +，Opera 39+，所有版本的 Opera mini，Android 浏览器 4.3+ 和 Chrome for Android 当前支持 WebP。
根据 W3Schools 的数据，Chrome 在浏览器市场上的垄断地位略高于 70％。但是，不仅要将市场份额作为可靠的证明，还应查看你自己的访问者的数据并查看他们使用的浏览器，因为不同的浏览器可能会有所不同。你可能会对统计数据的偏斜感到惊讶。在 Google Analytics（分析）的“受众群体”下，你可以单击“浏览器和操作系统”，查看人们访问你的网站时正在使用的浏览器。我们拉了一个随机网站，如下所示，有 67％ 的访客来自 Chrome，另有 1％ 的访客来自 Opera。因此，这些人中有 68％ 可以查看WebP图像文件格式并从中受益！
如何在 WordPress 中使用 WebP 文件
在今天的示例中，我们将结合使用两个不同的 WordPress 插件来启动 WebP 并在 WordPress 中运行。这些由团队在 KeyCDN（全球内容交付网络（ CDN ））上创建和开发。
- [高级] Optimus 图像优化器：适用于 WordPress 的无损图像压缩插件，可将图像转换为 WebP
- [免费] WordPress 缓存启动器：缓存插件，可让你向支持的浏览器提供 WebP 服务
Optimus 图像优化器
你可以从 WordPress 信息库，optimus.io 或插件仪表板中下载 Optimus Image Optimizer。注意：如果要将图像转换为 WebP，则确实需要高级许可证。安装后，你可以在插件设置中启用“创建 WebP 文件”。
启用 WebP 后，这实际上将为转换后的所有内容创建一个附加图像。因此，如果你上载 PNG 文件或 JPG，则现在还会有 .webp 版本的图片。请记住，仍然需要 PNG / JPG，因为它们仍可用于不受支持的浏览器。Optimus 进行无损压缩，因此你的 PNG 和 JPG 也会被压缩。
WordPress 缓存启动器
因此，既然你已经拥有 WebP 图像，则需要一种方法来告诉 WordPress 将 WebP 图像提供给受支持的浏览器，并将 PNG / JPG 提供给其他浏览器。这可以通过免费的WordPress Cache Enabler插件来完成。你可以从 WordPress 存储库下载插件， 也可以从插件仪表板中安装插件。安装后，你可以在插件设置中启用“创建其他 WebP 缓存版本”。
启用该选项后，将创建页面的其他缓存 WebP 版本。
JPG 与 WebP 的比较
我们对 JPG 和 WebP 进行了比较，以显示你可以实现的差异。
| 文件名 | 原始JPG | 压缩JPG | WEBP格式 | 尺寸差异％ |
|---|---|---|---|---|
| jpg-to-webp-1.jpg | 758 KB | 685 KB | 109 KB | 86％ |
| jpg-to-webp-2.jpg | 599 KB | 529 KB | 58.8 KB | 90％ |
| jpg-to-webp-3.jpg | 960 KB | 881 KB | 200 KB | 79％ |
| jpg-to-webp-4.jpg | 862 KB | 791 KB | 146 KB | 83％ |
| jpg-to-webp-5.jpg | 960 KB | 877 KB | 71.7 KB | 93％ |
PNG 到 WebP 的比较
同样，我们还对 PNG 和 WebP 进行了比较，以显示你可以实现的差异。
| 文件名 | 原始PNG | 压缩的PNG | WebP格式 | 尺寸差异％ |
|---|---|---|---|---|
| png-to-webp-1.png | 44 KB | 34 KB | 30 KB | 32％ |
| png-to-webp-2.png | 46 KB | 35 KB | 33 KB | 28％ |
| png-to-webp-3.png | 43 KB | 31 KB | 25 KB | 42％ |
| png-to-webp-4.png | 30 KB | 24 KB | 18 KB | 40％ |
| png-to-webp-5.png | 15 KB | 11 KB | 8 KB | 47％ |
| png-to-webp-6.png | 34 KB | 24 KB | 18 KB | 47％ |
| png-to-webp-7.png | 15 KB | 13 KB | 8 KB | 47％ |
| png-to-webp-8.png | 63 KB | 47 KB | 44 KB | 30％ |
| png-to-webp-9.png | 48 KB | 36 KB | 33 KB | 31％ |
| png-to-webp-10.png | 17 KB | 14 KB | 11 KB | 35％ |
| png-to-webp-11.png | 18 KB | 13 KB | 9 KB | 50％ |
| png-to-webp-12.png | 61 KB | 45 KB | 39 KB | 36％ |
| png-to-webp-13.png | 32 KB | 25 KB | 21 KB | 35％ |
| png-to-webp-14.png | 26 KB | 21 KB | 17 KB | 35％ |
| png-to-webp-15.png | 14 KB | 12 KB | 9 KB | 36％ |
| png-to-webp-16.png | 36 KB | 27 KB | 24 KB | 33％ |
| png-to-webp-17.png | 14 KB | 12 KB | 8 KB | 43％ |
| png-to-webp-18.png | 21 KB | 18 KB | 13 KB | 38％ |
| png-to-webp-19.png | 42 KB | 30 KB | 27 KB | 36％ |
| png-to-webp-20.png | 23 KB | 20 KB | 18 KB | 22％ |
如你所见，WebP 在你的 WordPress 网站上非常容易实现，并且你可以实现大大减小的图像文件大小！没有可以与 WebP 节省相比的图像压缩。如果你正在寻找一种更好的方法来加快 WordPress 的速度，WebP 可能是一个很好的解决方案。