網站性能優化— 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 官方博客