网站页面优化必然趋势—WebP 图片！

本文梗概：众所周知，浏览器能够经过 HTTP 请求的 Accpet 属性 来指定接收的内容类型。依靠这个技术，能够在不修改任何 HTML/CSS 或者图片的状况下，向浏览器提供优化的图片，从而下降带宽消耗，提升页面加载速度。

主要实现方式：

• 图片压缩率更好，文件大小更小的 WebP 格式。
• 服务器根据 HTTP 的 Accept 属性 来决定向浏览器发送哪一种格式的图片
• 利用一些图片转化技术，对支持的浏览器自动发送 WebP 图片，不支持的发送传统格式图片

介绍一些当下流行工具来检测网站的真实用户体验，并定位问题所在。

网站优化第一难题：图片！

开发者不遗余力以减小 web 页面下载时间，实现更快的页面加载速度，办法无外乎删除 CSS/JS 代码中的空白符和注释，重命名变量等等。然而这些方法收效甚微，他们忽略了网页中的「大笨熊」：图片！

与图片文件相比，CSS/JS 代码简直小巫见大巫：

• httparchive.org 数据显示，图片传输在平均网页传输中的占比达 60% 以上。
• GigaOM reports 的统计则代表，2010 年 11 月到 2012 年 5 月间，网页大小增长了 50%，到 2015 年，网页平均大小达到 2MB。

与此同时，移动设备的使用量急剧增加，可是，它们面临着收费高昂且受限的宽带条件。咱们须要调转船头，拥抱正确的将来！

真实的页面响应时间

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

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

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

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

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

页面优化首选策略：WebP 格式图片！

万幸，Google 等公司已经在积极行动以下降宽带消耗，他们带来了新的图片格式——WebP

WebP 能在减少文件大小的同时提供有损（JPEG）和无损(PNG)格式图片的支持。Google官方文件代表:

• 无损压缩后的 WebP 图片可比 PNG 原图小 26%，有损压缩的 WebP 图片，在同等 SSIM 算法的状况下，比 JPEG 图像小 25-34%。
• WebP 还支持无损透明度（也叫阿尔法通道），只需增长 22% 的额外字节。
• 采用有损压缩时，WebP 也支持透明度，且若是红/绿/蓝通道支持有损压缩，可比PNG 图片缩小 3 倍。

Chrome 和 Opera 浏览器均支持 WebP 格式，Firefox 也在考虑当中，随着使用率的提升，宽带的优点愈发明显，WebP 可能会成为将来的网页图片标准。

然而，WebP 也引来一些质疑之声。对于平面设计师、网页设计师、和程序员来讲，使用 WebP 时，如何避免手工处理过程，如何向不支持 WebP 的浏览器提供图片，如何更新之前对.jpg、.png 和 .gif 文件的引用，都是要解决的问题。

自动转换到 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 的优点。

时下重点：Accept Header

其实很大程度上，WebP 在浏览器中的成功使用仍是要归结于 HTTP 请求头中的 Accept 首部（accept header）。一般的浏览器请求都会包含软件平台、cookies、语言设置等信息，而从本文的讨论来说，重点是Accept」首部——浏览器经过该首部告诉服务器，「这些是我能理解的文件类型」。

官方的 HTTP/1.1 协议早在多年前就已经解决了服务器驱动内容协商问题，但大多数浏览器仍是忽视了 Accept 部分。

Ilya Grigorik, 做为谷歌 「 Make The Web Faster」团队的发起人，曾经总结过期下各类浏览器对于 Accept 的发送状况

能够看到，Opera 是惟一既展现 WebP 图片又官网表示接受 image/webp 内容类型的浏览器,Chrome 能够展现 WebP 图片，可是没有在 Accept 中说明。

好消息是，从 Chromium 的相关动做来看，image/webp 可能很快就将加入 Accpet 首部，毕竟 Chrome 的开发速度摆在那里。而也有不少用户在 Firefox 的 WebP support bug 中，说起了相关建议：「若是更新还包括修改 Accpet 中对于图片和 HTML 文件的声明，那就太好了！」以前 Firefox 在支持 PNG （在 Accept 首部中添加 image/png ）时，也发布过相似的更新，估计加入 image/webp 时也会这么作。总的来讲，Opera 已经支持 WebP ，Chrome 则会快步跟上，而 Mozilla 正在进一步了解当中。

肯定用户比例

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

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

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

总结

近几年，互联网的爆发已经转变为「互联网+」的爆发，但同时天天也都有各类大小公司破产或者被兼并。在增长销售额的同时，从运营与增加的角度咱们必需要考虑用户体验，因此，WebP 图片的流行必然是一个趋势，而咱们要作的就是积极的去拥抱它。

另外，前几年很火的拨测不少状况下已经捉襟见肘了，找到一款合适的真实用户体验工具更是重要。但愿本文能够在用户体验角度给你们以帮助。

Browser Insight 是一个基于真实用户的 Web 前端性能监控统计平台，可以帮你们定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客