網站頁面優化必然趨勢—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 官方博客