
如何在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 可能是一个很好的解决方案。