Jetpack 提升图像性能的四大方法

我们一直与Jetpack合作作为赞助商。这是一个绝佳的搭配，因为作为一个拥有大量自托管 WordPress 网站的人，Jetpack 对我来说是那些无需多言的插件之一。Jetpack 可以以多种非常不同的方式为任何网站带来大量好处。这里有一个思考方式：它将 WordPress 自身庞大服务器的功能带到了你这里。

现在，让我们只关注 Jetpack 可以为你做的一件事：图像性能。Jetpack 在这方面为你做了很多事情，解决了几个非凡的性能提升。让我们看看我认为 Jetpack 在你的图像上带来的四个重大提升。

1) WordPress 为你提供响应式图像

好的，我在第一个方面作弊了，因为你实际上并不需要 Jetpack 来从中获益。但对于快速图像来说，这是一个重要且基础的概念。只需使用 WordPress，你就可以免费获得基本的响应式图像。

如果你已经知道我在说什么，这里是一个示例，展示了你将在通过媒体上传器上传图像的已发布 WordPress 文章的 DOM 中看到的内容

如果你不了解响应式图像的概念，它的核心思想是：不要让单个图像发送给访问你网站的任何浏览器，而是提供多个不同大小的图像，并交付最合适的图像。 想象一下，如果一部手机下载一张 1600 像素宽的图像（比它需要的尺寸大得多），它只需下载一张 320 像素宽的图像，从而节省大量下载时间。

多年来，我们已经写了很多关于响应式图像的文章。

2) 你获得 CDN

阅读一些关于网页性能的内容，你会得到一致的答案：“使用 CDN。” CDN 是内容分发网络，本质上是专门设计用来快速提供资产（例如图像）的 Web 服务器。之所以称之为网络，是因为它不仅仅是一台服务器，而是位于世界各地的许多服务器，因此当你的网站从世界各地不同的位置被请求时，发送回的文件来自地理位置更近的位置（更快！）。更不用说它还会执行其他巧妙的操作，例如不像你自己的服务器那样，每个 Web 请求都不需要 cookie。

简单地说，在 Jetpack 中切换一个开关，你就可以使用图像 CDN

它被称为Photon。

网站速度受许多因素影响，其中之一是内容交付。使用所谓的内容交付网络（或 CDN）通过以下方式提供帮助

• 从高速专用数据中心交付你的内容。
• 浏览器可以同时下载更多文件。
• 分布式数据中心（即位于不同的地理位置）提高了下载速度并提供了冗余性。
• 通过分发负载并节省带宽，你可以降低现有托管成本（或控制成本）。

3) 你获得优化

Una Kravets 将图像优化称为设计师轻松实现的性能提升。这很容易理解。尝试截取屏幕截图，从 Photoshop 导出内容或获取一些素材图片。然后将其拖放到ImageOptim 等工具中，并观察在它优化图像时字节数减少。巨大的节省。

但如果不需要你手动优化所有图像才能使用它们，那不是很好吗？计算机应该帮助我们完成这些琐碎的任务，对吧？当你开启 Jetpack 的 CDN 功能时，你的图像现在托管在 Photon 上，你可以看到Photon 文档 中是如何处理调整大小和质量的。

4) 你获得延迟加载

延迟加载的理念是，除非你需要，否则不要加载任何内容。对于图像来说，不要下载图像，除非它在页面上可见。也就是说，不要下载用户可能永远不会滚动到的文章底部的图像，但如果他们滚动到那里，就下载它。

你知道他们是怎么说的吗，最快的 Web 请求是永远不会发生的请求。谷歌的 Jeremy Wagner 说

当我们延迟加载图像和视频时，我们会减少初始页面加载时间、初始页面大小和系统资源使用，所有这些都会对性能产生积极影响。

这是另一个适用于任何主题的切换功能。开启它，你就可以获得延迟加载。

现在就一起做

1. WordPress 提供响应式图像，这本身就能带来重大的性能提升。
2. 有了Jetpack，这些响应式图像将托管在 CDN 上，从而提供速度提升，并为已下载的图像提供优秀的缓存。
3. 仅仅因为你正在使用响应式图像和 CDN，并不意味着这些图像就被自动优化，但它们在 Photon 上是经过优化的。
4. 最后，除非图像出现在视图中，否则不会下载任何内容（延迟加载），这是你能做到的最高效的事情。

相当令人信服。