网站性能优化—WebP 全方位介绍

谈及强化中文网站操控性时，主要目标之一就是增加要发送至下载器的信息量（即 payload）。而现阶段，相片通常是页面构成中最花费互联网流量的部分，因此减少相片的大小不其一两个最有效的强化页面后端操控性的办法。

有许多辅助工具能填充影像，以期增加填充率，但依然在一定程度上为配置文档的管制，影像编码的方式对最终聚合文档的大小不一有很大的负面影响。 在这首诗里将如是说一类被称为WebP的新式相片文档格式，意在在不负面影响使用者新体验的情况下减少相片的大小不一。

WebP 是由Google合作开发的一类文档文档格式，与 JPEG 影像较之，这种文档格式最多能增加相片填充率的 34%。从而明显强化页面读取时间和频宽采用情况。

左图是 JPEG 和

根据Google团队的如是说，好景不长今年 Chrome Web Store 急于采用 WebP 后，整个中文网站相片的大小不一平均增加 30%。这相等于每晚节约了数 tb 的频宽！Google的 Play Store 目前也采用 WebP 文档格式存储影像。

WebP 文档格式支持桑利县和有辱的影像填充、alpha 地下通道有效性、色调命令行、元数据和动画电影，那些优点使 WebP 文档格式成为两个为互联网上所采用的影像提供的服务平台的软件系统。

鸟瞰过去一两年互联网下载趋势的演进，你就会发现，合作开发两个捷伊相片文档格式愈来愈重要。终端下载现在占全球互联网互联网流量的 15%，这一位数仍在上升，然而，那些终端电子设备的互联网倚赖的数据并没有以同样的速率提高。绝大部分人的终端下载仍然被低频宽相连所管制，页面的读取速率快得更让人懊恼，而采用 WebP 等等技术来增加 web 页面的整体阻抗则有利于减轻这一现象。

与传统文档文档格式如 JPEG、PNG 或 GIF 较之，采用 WebP 有许多竞争优势：

更小的文档尺寸

更高的质量——与其他相同大小不一不同文档格式的填充影像比较

完全免费——开源的 WebP 是 2010 年由Google根据 BSD 协议所提供的

一类文档格式能取代所有其他文档格式—— WebP 有能力取代 JPEG、 PNG 和 GIF，成为在 Web 上影像的单一文档格式

但是，尽管自 2010 年起 WebP 便已推出，但它的支持依然是有限的，这是现今采用 WebP 的主要缺点：

下载器支持——WebP 目前支持桌面上的 Chrome 和 Opera 下载器。手机支持仅限于原生的 Android 下载器和 Android 系统上的 Chrome 下载器,后面会如是说关于如何处理这个管制的方法。

本地操作系统支持——WebP 目前不被任何操作系统原生支持。Google只是基本的合作开发了 Web 上的文档格式，但要将其添加到 Windows 成像组件中还需要有编解码器支持，在这里给大家附个下载链接.

注

评价中文网站操控性好坏的两个主要指标就是页面响应时间，也就是说使用者打开完整页面的时间。任何一项技术的采用都是有风险的，更何况是在公司的中文网站上，你必须要有一定的数据和证据来说服你的 Boss 或者相关负责人才行。

现在业内的许多后端监控辅助工具都是基于拨测的模拟访问。假设，在互联网良好、使用者机器良好、使用者采用pc有线网、运营商及DNS无任何问题等等情况下的访问，这是真实的使用者访问么？！！

只有像类似于下图这样的针对使用者访问时间的真实监控才能用来作为推动某项技术落地于中文网站的有力证据。

同样重要的是要定位到相片资源读取的时间，如果拖慢中文网站页面读取的主要原因就是相片资源的话，那就算你不抓紧的话，老板也会逼着你让你去解决这个问题，这个时候，WebP 就派上用场了。

之前做过后端强化的工作，国内外的后端操控性强化辅助工具也采用了不少，现阶段能较好实现上面两个功能的辅助工具有： OneAPM Browser Insight、AppDynamics、Ruxit，大家有兴趣的话能去尝试下。

现在大家应该了解了为什么 WebP 与众不同，为什么考虑在 Web 应用程序中采用它，下面如是说的是如何将你现有的影像转换为 WebP 文档格式。

Google已合作开发了大量实用的命令行将影像转换为 WebP，每个人都能从Google合作开发者中文网站下载。当你有两个实用程序的副本之后，你可能想要将实用程序的 bin 文档夹添加到您的本地路径，这能通过将以下代码添加到你的主目录 下的.bash_profile 文档中来实现(针对 Mac/Linux 系统)。

你需要更新下引用路径来表示你的系统上 WebP 实用程序文档夹的位置。重新启动终端止，就能够访问命令行实用辅助工具了。

另外，Mac 能采用homebrew来安装实用程序。

注:homebrew 不是总能匹配项目中文网站的最新版的。

安装实用程序完成后，就能采用 cwebp 将 JPEG 或 PNG 影像转换成 WebP 文档格式。

质量选项应该是 0 (差)到 100 (很好)之间的位数，典型的质量值大约是 80，但是你也能多多尝试，直到文档质量和大小不一都让你满意。

完整的选项列表，能采用此实用辅助工具运行带有 -longhelp 的 cwebp 命令，或者查看帮助文档。

注:也能采用 dwebp 实用程序将 WebP 影像转换回 PNG、PAM、PPM 或 PGM 影像。

很高兴有辅助工具能手动将文档文档格式转换成 WebP 。

但正如我们之前看到的，并不是所有的下载器都支持这种文档文档格式，因此需要一类能预览 WebP 影像，并且使不支持 WebP 文档格式的下载器能用 JPEGs 或 PNGs 替代的服务。本来能写一些复杂的服务器端代码，找出使用者的下载器是否支持 WebP 然后提供适当的文档，但幸运的是我们不需要这么做。

由Google合作开发的 PageSpeed模块有两个功能，会自动将影像转换成 WebP 文档格式和服务端的下载器所支持的文档格式。很神奇，就像魔术一样，而且设置也很简单，只需要将一行代码添加到你的主机配置中，启用这个优点。

注:如果你不熟悉 PageSpeed 模块，能看下这个英文的帮助文档，关于如何在 Apache Web 服务器上设置 mod_pagespeed.

采用 convert_jpeg_to_webp 选择器能使 PageSpeed 模块在适当的地方开启影像强化和自动转换 WebP 影像的服务。最初这只适用于 JPEG 影像，但你也能通过开启 convert_png_to_jpeg 选择器使其支持 png 影像。

根据Google报导,目前有超过 300000 个中文网站采用 PageSpeed 模块(或服务)为使用者提供 WebP 影像.

在自己的服务器上采用 PageSpeed 模块的方法非常简单，能充分利用 WebP 的竞争优势。

那么现在还有两个问题，你如何确定中文网站的使用者有多大比例支持 WebP 呢？这个也同样需要拿出一定的数据来像 Boss 证明，转化 WebP 影像这个操作是有意义的。

所以针对中文网站使用者统计的辅助工具就非常重要了，而且这个辅助工具还不能是像 GA、百度统计以及 CNZZ 这样的营销辅助工具，一定要基于真实使用者访问的才能，就像下面这个样的真实使用者访问统计图。

这个要识别起来其实很难的，因为各种机型下载器非常复杂，目前国内外涉及这个方面并且做的符合需求的辅助工具也给大家推荐几个： OneAPM Browser Insight、AppDynamics、NewRelic

本文主要如是说的就是怎样采用 WebP 影像来减小页面的总体规模，以期于减少页面读取时间。很明显，与 JPEG 或 PNG 较之 WebP 有许多优点，包括在规模和质量之间的平衡，以及这个新兴的文档格式支持的功能等.

虽然下载器对 WebP 的支持仍有许多需要改进的地方，但是采用Google PageSpeed 模块会使你很容易体会到 WebP 的好处，也不会疏远采用不支持这种文档格式的下载器的使用者。

注：本文翻译自外文文章“Getting Started with the WebP Image Format” ，由 OneAPM 产品运营整理改编发布，原文地址：http://blog.teamtreehouse.com/getting-started-webp-image-format

Browser Insight 是两个基于真实使用者的 Web 后端操控性监控平台，能够帮大家定位中文网站操控性瓶颈，中文网站加速效果可视化；支持下载器、微信、App下载 HTML 和 HTML5页面。