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

谈到优化网站性能时，主要目标之一就是减小要发送到浏览器的数据量（即 payload）。而当前，图片一般是页面构成中最耗费流量的部分，所以下降图片的大小是一个最为有效的优化网页前端性能的办法。

有不少工具能够压缩图像，以便减小文件大小，但仍然在必定程度上受文件类型的限制，图像编码的方式对最终生成文件的大小有很大的影响。 在这篇文章里将介绍一种被称为 WebP 的新型图片格式，旨在在不影响用户体验的状况下减小图片的大小。

一.WebP是什么?

WebP 是由谷歌开发的一种图像格式，与 JPEG 图像相比，这种格式最多能够减小图片文件大小的 34%。从而显著优化页面加载时间和带宽使用状况。

上图是 JPEG 和 80% 压缩质量的 WebP 图像之间的比较 ，来源于 Luc Viator, Creative Commons Attribution-Share Alike 3.0 Unported.

根据谷歌团队的介绍，自从去年 Chrome Web Store 转而使用 WebP 后，整个网站图片的大小平均减小 30%。这至关于天天节省了数 tb 的带宽！谷歌的 Play Store 目前也使用 WebP 格式储存图像。

WebP 格式支持无损和有损的图像压缩、alpha 通道透明度、颜色配置文件、元数据和动画，这些特性使 WebP 格式成为一个为网络上所使用的图像提供的一站式的解决方案。

俯视过去几年互联网浏览趋势的演变，你就会发现，开发一个新的图片格式愈来愈重要。移动浏览如今占全球互联网流量的 15%，这一数字仍在上升，然而，这些移动设备的网络依赖的数据并无以一样的速度提升。大部分人的移动浏览仍然被低带宽链接所限制，网页的加载速度慢得使人沮丧，而使用 WebP 之类技术来减小 web 页面的总体负载则有助于缓解这一现象。

二.使用 WebP 的利弊

与传统图像格式如 JPEG、PNG 或 GIF 相比，使用 WebP 有不少优点：

• 更小的文件尺寸
  
• 更高的质量——与其余相同大小不一样格式的压缩图像比较
  
• 彻底免费——开源的 WebP 是 2010 年由谷歌根据 BSD 协议所提供的
  
• 一种格式能够取代全部其余格式—— WebP 有能力取代 JPEG、 PNG 和 GIF，成为在 Web 上图像的单一格式

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

• 浏览器支持——WebP 目前支持桌面上的 Chrome 和 Opera 浏览器。手机支持仅限于原生的 Android 浏览器和 Android 系统上的 Chrome 浏览器,后面会介绍关于如何处理这个限制的方法。
• 本地操做系统支持——WebP 目前不被任何操做系统原生支持。谷歌只是基本的开发了 Web 上的格式，但要将其添加到 Windows 成像组件中还须要有编解码器支持，在这里给你们附个下载连接.

注: WebP 图像也可使用在 Android 应用程序和 iOS 应用程序上，但在这篇文章中咱们将先关注于 Web 应用程序.

三.真实的页面响应时间

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

如今业内的不少前端监控工具都是基于拨测的模拟访问。假设，在网络良好、用户机器良好、用户使用pc有线网、运营商及DNS无任何问题等等状况下的访问，这是真实的用户访问么？！！

只有像相似于下图这样的针对用户访问时间的真实监控才能用来做为推进某项技术落地于网站的有力证据。

一样重要的是要定位到图片资源加载的时间，若是拖慢网站页面加载的主要缘由就是图片资源的话，那就算你不抓紧的话，老板也会逼着你让你去解决这个问题，这个时候，WebP 就派上用场了。

以前作过前端优化的工做，国内外的前端性能优化工具也使用了很多，现阶段能够较好实现上面两个功能的工具备：
OneAPM Browser Insight、AppDynamics、Ruxit，你们有兴趣的话能够去尝试下。

四.将图像转换为WebP

如今你们应该了解了为何 WebP 不同凡响，为何考虑在 Web 应用程序中使用它，下面介绍的是如何将你现有的图像转换为 WebP 格式。

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

PATH=$PATH:"/path/to/libwebp-utilities/bin"  
export PATH

你须要更新下引用路径来表示你的系统上 WebP 实用程序文件夹的位置。从新启动终端止，就可以访问命令行实用工具了。

另外，Mac 可使用homebrew来安装实用程序。

brew install webp

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

安装实用程序完成后，就可使用 cwebp 将 JPEG 或 PNG 图像转换成 WebP 格式。

cwebp [options] -q quality input.jpg -o output.webp

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

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

注:也可使用 dwebp 实用程序将 WebP 图像转换回 PNG、PAM、PPM 或 PGM 图像。

dwebp input_file.webp [options] [-o output_file]

五.PageSpeed 自动转换模块

很高兴有工具能够手动将图像格式转换成 WebP 。

但正如咱们以前看到的，并非全部的浏览器都支持这种图像格式，所以须要一种能够预览 WebP 图像，而且使不支持 WebP 格式的浏览器能够用 JPEGs 或 PNGs 替代的服务。原本能够写一些复杂的服务器端代码，找出用户的浏览器是否支持 WebP 而后提供适当的文件，但幸运的是咱们不须要这么作。

由谷歌开发的 PageSpeed 模块有一个功能，会自动将图像转换成 WebP 格式和服务端的浏览器所支持的格式。很神奇，就像魔术同样，并且设置也很简单，只须要将一行代码添加到你的主机配置中，启用这个特性。

ModPagespeedEnableFilters convert_jpeg_to_webp

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

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

ModPagespeedEnableFilters convert_png_to_jpeg

根据谷歌报导,目前有超过 300000 个网站使用 PageSpeed 模块(或服务)为用户提供 WebP 图像.

在本身的服务器上使用 PageSpeed 模块的方法很是简单，能够充分利用 WebP 的优点。

六.肯定用户比例

那么如今还有一个问题，你如何肯定网站的用户有多大比例支持 WebP 呢？这个也一样须要拿出必定的数据来像 Boss 证实，转化 WebP 图像这个操做是有意义的。

因此针对网站用户统计的工具就很是重要了，并且这个工具还不能是像 GA、百度统计以及 CNZZ 这样的营销工具，必定要基于真实用户访问的才能够，就像下面这个样的真实用户访问统计图。

这个要识别起来其实很难的，由于各类机型浏览器很是复杂，目前国内外涉及这个方面而且作的符合需求的工具也给你们推荐几个：
OneAPM Browser Insight、AppDynamics、NewRelic

七.文末感想

本文主要介绍的就是怎样使用 WebP 图像来减少网页的整体规模，以便于下降页面加载时间。很明显，与 JPEG 或 PNG 相比 WebP 有许多优势，包括在规模和质量之间的平衡，以及这个新兴的格式支持的功能等.

虽然浏览器对 WebP 的支持仍有不少须要改进的地方，可是使用谷歌 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页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。
本文转自 OneAPM 官方博客