本文梗概：眾所周知混稽，瀏覽器可以通過(guò) HTTP 請(qǐng)求的 Accpet 屬性 來(lái)指定接收的內(nèi)容類(lèi)型采驻。依靠這個(gè)技術(shù)，可以在不修改任何 HTML/CSS 或者圖片的情況下匈勋，向?yàn)g覽器提供優(yōu)化的圖片礼旅，從而降低帶寬消耗，提高頁(yè)面加載速度洽洁。
主要實(shí)現(xiàn)方式：
- 圖片壓縮率更好痘系，文件大小更小的 WebP 格式。
- 服務(wù)器根據(jù) HTTP 的 Accept 屬性 來(lái)決定向?yàn)g覽器發(fā)送哪種格式的圖片
- 利用一些圖片轉(zhuǎn)化技術(shù)饿自，對(duì)支持的瀏覽器自動(dòng)發(fā)送 WebP 圖片汰翠，不支持的發(fā)送傳統(tǒng)格式圖片
介紹一些當(dāng)下流行工具來(lái)檢測(cè)網(wǎng)站的真實(shí)用戶(hù)體驗(yàn)，并定位問(wèn)題所在昭雌。
網(wǎng)站優(yōu)化第一難題：圖片奴璃！
開(kāi)發(fā)者竭盡全力以減少 web 頁(yè)面下載時(shí)間，實(shí)現(xiàn)更快的頁(yè)面加載速度城豁，辦法無(wú)外乎刪除 CSS/JS 代碼中的空白符和注釋?zhuān)孛兞康鹊取Ｈ欢@些方法收效甚微抄课，他們忽略了網(wǎng)頁(yè)中的「大笨熊」：圖片唱星！
與圖片文件相比，CSS/JS 代碼簡(jiǎn)直小巫見(jiàn)大巫：
- httparchive.org 數(shù)據(jù)顯示跟磨，圖片傳輸在平均網(wǎng)頁(yè)傳輸中的占比達(dá) 60% 以上间聊。
- GigaOM reports 的統(tǒng)計(jì)則表明，2010 年 11 月到 2012 年 5 月間抵拘，網(wǎng)頁(yè)大小增加了 50%哎榴，到 2015 年，網(wǎng)頁(yè)平均大小達(dá)到 2MB。
與此同時(shí)尚蝌，移動(dòng)設(shè)備的使用量急劇增長(zhǎng)迎变，但是，它們面臨著收費(fèi)高昂且受限的寬帶條件飘言。我們需要調(diào)轉(zhuǎn)船頭衣形，擁抱正確的未來(lái)！
真實(shí)的頁(yè)面響應(yīng)時(shí)間
評(píng)價(jià)網(wǎng)站性能好壞的一個(gè)主要指標(biāo)就是頁(yè)面響應(yīng)時(shí)間姿鸿，也就是說(shuō)用戶(hù)打開(kāi)完整頁(yè)面的時(shí)間谆吴。任何一項(xiàng)技術(shù)的使用都是有風(fēng)險(xiǎn)的，更何況是在公司的網(wǎng)站上苛预，你必須要有一定的數(shù)據(jù)和證據(jù)來(lái)說(shuō)服你的 Boss 或者相關(guān)負(fù)責(zé)人才行句狼。
現(xiàn)在業(yè)內(nèi)的很多前端監(jiān)控工具都是基于撥測(cè)的模擬訪問(wèn)。假設(shè)热某，在網(wǎng)絡(luò)良好腻菇、用戶(hù)機(jī)器良好、用戶(hù)使用pc有線網(wǎng)苫拍、運(yùn)營(yíng)商及DNS無(wú)任何問(wèn)題等等情況下的訪問(wèn)芜繁，這是真實(shí)的用戶(hù)訪問(wèn)么？Ｈ藜骏令！
只有像類(lèi)似于下圖這樣的針對(duì)用戶(hù)訪問(wèn)時(shí)間的真實(shí)監(jiān)控才能用來(lái)作為推動(dòng)某項(xiàng)技術(shù)落地于網(wǎng)站的有力證據(jù)。
同樣重要的是要定位到圖片資源加載的時(shí)間垄提，如果拖慢網(wǎng)站頁(yè)面加載的主要原因就是圖片資源的話(huà)榔袋，那就算你不抓緊的話(huà)，老板也會(huì)逼著你讓你去解決這個(gè)問(wèn)題铡俐，這個(gè)時(shí)候凰兑，WebP 就派上用場(chǎng)了。
之前做過(guò)前端優(yōu)化的工作审丘，國(guó)內(nèi)外的前端性能優(yōu)化工具也使用了不少吏够，現(xiàn)階段可以較好實(shí)現(xiàn)上面兩個(gè)功能的工具有：
OneAPM Browser Insight、AppDynamics滩报、Ruxit锅知，大家有興趣的話(huà)可以去嘗試下。
頁(yè)面優(yōu)化首選策略：WebP 格式圖片脓钾！
萬(wàn)幸售睹，Google 等公司已經(jīng)在積極行動(dòng)以降低寬帶消耗，他們帶來(lái)了新的圖片格式——WebP
WebP 能在減小文件大小的同時(shí)提供有損（JPEG）和無(wú)損(PNG)格式圖片的支持可训。Google官方文件表明:
- 無(wú)損壓縮后的 WebP 圖片可比 PNG 原圖小 26%昌妹，有損壓縮的 WebP 圖片捶枢，在同等 SSIM 算法的情況下，比 JPEG 圖像小 25-34%飞崖。
- WebP 還支持無(wú)損透明度（也叫阿爾法通道）烂叔，只需增加 22% 的額外字節(jié)。
- 采用有損壓縮時(shí)蚜厉，WebP 也支持透明度长已，且如果紅/綠/藍(lán)通道支持有損壓縮，可比PNG 圖片縮小 3 倍昼牛。
Chrome 和 Opera 瀏覽器均支持 WebP 格式术瓮，F(xiàn)irefox 也在考慮當(dāng)中，隨著使用率的提高贰健，寬帶的優(yōu)勢(shì)愈發(fā)明顯胞四，WebP 可能會(huì)成為未來(lái)的網(wǎng)頁(yè)圖片標(biāo)準(zhǔn)。
然而伶椿，WebP 也引來(lái)一些質(zhì)疑之聲辜伟。對(duì)于平面設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師脊另、和程序員來(lái)說(shuō)导狡，使用 WebP 時(shí)，如何避免手工處理過(guò)程偎痛，如何向不支持 WebP 的瀏覽器提供圖片旱捧，如何更新以前對(duì).jpg、.png 和 .gif 文件的引用踩麦，都是要解決的問(wèn)題枚赡。
自動(dòng)轉(zhuǎn)換到 WebP！豈不妙哉谓谦！
現(xiàn)在大家應(yīng)該了解了為什么 WebP 與眾不同贫橙，為什么考慮在 Web 應(yīng)用程序中使用它，下面介紹的是如何將你現(xiàn)有的圖像轉(zhuǎn)換為 WebP 格式反粥。
谷歌已開(kāi)發(fā)了大量實(shí)用的命令行將圖像轉(zhuǎn)換為 WebP卢肃，每個(gè)人都可以從谷歌開(kāi)發(fā)者網(wǎng)站下載。當(dāng)你有一個(gè)實(shí)用程序的副本之后才顿，你可能想要將實(shí)用程序的 bin 文件夾添加到您的本地路徑莫湘，這可以通過(guò)將以下代碼添加到你的主目錄 下的.bash_profile 文件中來(lái)實(shí)現(xiàn)(針對(duì) Mac/Linux 系統(tǒng))。
PATH=$PATH:"/path/to/libwebp-utilities/bin"
export PATH
你需要更新下引用路徑來(lái)表示你的系統(tǒng)上 WebP 實(shí)用程序文件夾的位置娜膘。重新啟動(dòng)終端止，就能夠訪問(wèn)命令行實(shí)用工具了优质。
另外竣贪，Mac 可以使用 homebrew 來(lái)安裝實(shí)用程序军洼。
brew install webp
注: homebrew 不是總能匹配項(xiàng)目網(wǎng)站的最新版的。
安裝實(shí)用程序完成后演怎，就可以使用 cwebp 將 JPEG 或 PNG 圖像轉(zhuǎn)換成 WebP 格式匕争。
cwebp [options] -q quality input.jpg -o output.webp
質(zhì)量選項(xiàng)應(yīng)該是 0 (差)到 100 (很好)之間的數(shù)字，典型的質(zhì)量值大約是 80爷耀，但是你也可以多多嘗試甘桑，直到文件質(zhì)量和大小都讓你滿(mǎn)意。
完整的選項(xiàng)列表歹叮，可以使用此實(shí)用工具運(yùn)行帶有 -longhelp 的 cwebp 命令跑杭，或者查看幫助文檔。
注:也可以使用 dwebp 實(shí)用程序?qū)?WebP 圖像轉(zhuǎn)換回 PNG咆耿、PAM德谅、PPM 或 PGM 圖像。
dwebp input_file.webp [options] [-o output_file]
PageSpeed 自動(dòng)轉(zhuǎn)換模塊
很高興有工具可以手動(dòng)將圖像格式轉(zhuǎn)換成 WebP 萨螺。
但正如我們之前看到的窄做，并不是所有的瀏覽器都支持這種圖像格式，因此需要一種可以預(yù)覽 WebP 圖像慰技，并且使不支持 WebP 格式的瀏覽器可以用 JPEGs 或 PNGs 替代的服務(wù)椭盏。本來(lái)可以寫(xiě)一些復(fù)雜的服務(wù)器端代碼，找出用戶(hù)的瀏覽器是否支持 WebP 然后提供適當(dāng)?shù)奈募巧蹋疫\(yùn)的是我們不需要這么做掏颊。
由谷歌開(kāi)發(fā)的 PageSpeed 模塊有一個(gè)功能，會(huì)自動(dòng)將圖像轉(zhuǎn)換成 WebP 格式和服務(wù)端的瀏覽器所支持的格式手报。很神奇蚯舱，就像魔術(shù)一樣，而且設(shè)置也很簡(jiǎn)單掩蛤，只需要將一行代碼添加到你的主機(jī)配置中枉昏，啟用這個(gè)特性。
ModPagespeedEnableFilters convert_jpeg_to_webp
注:如果你不熟悉 PageSpeed 模塊揍鸟，可以看下這個(gè)英文的幫助文檔兄裂，關(guān)于如何在 Apache Web 服務(wù)器上設(shè)置 mod_pagespeed.
使用 convert_jpeg_to_webp 選擇器可以使 PageSpeed 模塊在適當(dāng)?shù)牡胤介_(kāi)啟圖像優(yōu)化和自動(dòng)轉(zhuǎn)換 WebP 圖像的服務(wù)。最初這只適用于 JPEG 圖像阳藻，但你也可以通過(guò)開(kāi)啟 convert_png_to_jpeg 選擇器使其支持 png 圖像晰奖。
ModPagespeedEnableFilters convert_png_to_jpeg
根據(jù)谷歌報(bào)導(dǎo),目前有超過(guò) 300000 個(gè)網(wǎng)站使用 PageSpeed 模塊(或服務(wù))為用戶(hù)提供 WebP 圖像.
在自己的服務(wù)器上使用 PageSpeed 模塊的方法非常簡(jiǎn)單，可以充分利用 WebP 的優(yōu)勢(shì)腥泥。
時(shí)下重點(diǎn)：Accept Header
其實(shí)很大程度上匾南，WebP 在瀏覽器中的成功使用還是要?dú)w結(jié)于 HTTP 請(qǐng)求頭中的 Accept 首部（accept header）。通常的瀏覽器請(qǐng)求都會(huì)包含軟件平臺(tái)蛔外、cookies蛆楞、語(yǔ)言設(shè)置等信息溯乒，而從本文的討論來(lái)講，重點(diǎn)是Accept」首部——瀏覽器通過(guò)該首部告訴服務(wù)器豹爹，「這些是我能理解的文件類(lèi)型」裆悄。
官方的 HTTP/1.1 協(xié)議早在多年前就已經(jīng)解決了服務(wù)器驅(qū)動(dòng)內(nèi)容協(xié)商問(wèn)題，但大多數(shù)瀏覽器還是忽視了 Accept 部分臂聋。
Ilya Grigorik, 作為谷歌 「 Make The Web Faster」團(tuán)隊(duì)的發(fā)起人光稼，曾經(jīng)總結(jié)過(guò)時(shí)下各種瀏覽器對(duì)于 Accept 的發(fā)送情況
可以看到孩等，Opera 是唯一既展示 WebP 圖片又官網(wǎng)表示接受 image/webp 內(nèi)容類(lèi)型的瀏覽器,Chrome 可以展示 WebP 圖片艾君，但是沒(méi)有在 Accept 中說(shuō)明。
好消息是瞎访，從 Chromium 的相關(guān)動(dòng)作來(lái)看腻贰，image/webp 可能很快就將加入 Accpet 首部，畢竟 Chrome 的開(kāi)發(fā)速度擺在那里扒秸。而也有很多用戶(hù)在 Firefox 的 WebP support bug 中播演，提及了相關(guān)建議：「如果更新還包括修改 Accpet 中對(duì)于圖片和 HTML 文件的聲明，那就太好了伴奥！」之前 Firefox 在支持 PNG （在 Accept 首部中添加 image/png ）時(shí)写烤，也發(fā)布過(guò)類(lèi)似的更新，估計(jì)加入 image/webp 時(shí)也會(huì)這么做拾徙≈薮叮總的來(lái)說(shuō)，Opera 已經(jīng)支持 WebP 尼啡，Chrome 則會(huì)快步跟上暂衡，而 Mozilla 正在進(jìn)一步了解當(dāng)中。
確定用戶(hù)比例
那么現(xiàn)在還有一個(gè)問(wèn)題崖瞭，你如何確定網(wǎng)站的用戶(hù)有多大比例支持 WebP 呢狂巢？這個(gè)也同樣需要拿出一定的數(shù)據(jù)來(lái)向 Boss 證明，轉(zhuǎn)化 WebP 圖像這個(gè)操作是有意義的书聚。
所以針對(duì)網(wǎng)站用戶(hù)統(tǒng)計(jì)的工具就非常重要了唧领，而且這個(gè)工具還不能是像 GA、百度統(tǒng)計(jì)以及 CNZZ 這樣的營(yíng)銷(xiāo)工具雌续，一定要基于真實(shí)用戶(hù)訪問(wèn)的才可以斩个，就像下面這個(gè)樣的真實(shí)用戶(hù)訪問(wèn)統(tǒng)計(jì)圖。
這個(gè)要識(shí)別起來(lái)其實(shí)很難的，因?yàn)楦鞣N機(jī)型瀏覽器非常復(fù)雜，目前國(guó)內(nèi)外涉及這個(gè)方面并且做的符合需求的工具也給大家推薦幾個(gè)：
OneAPM Browser Insight滚局、AppDynamics叁温、NewRelic
總結(jié)
近幾年，互聯(lián)網(wǎng)的爆發(fā)已經(jīng)轉(zhuǎn)變?yōu)椤富ヂ?lián)網(wǎng)+」的爆發(fā)核畴，但同時(shí)每天也都有各種大小公司破產(chǎn)或者被兼并。在增加銷(xiāo)售額的同時(shí)冲九，從運(yùn)營(yíng)與增長(zhǎng)的角度我們必須要考慮用戶(hù)體驗(yàn)谤草，所以，WebP 圖片的流行必然是一個(gè)趨勢(shì)莺奸，而我們要做的就是積極的去擁抱它丑孩。
另外，前幾年很火的撥測(cè)很多情況下已經(jīng)捉襟見(jiàn)肘了灭贷，找到一款合適的真實(shí)用戶(hù)體驗(yàn)工具更是重要温学。希望本文可以在用戶(hù)體驗(yàn)角度給大家以幫助。
Browser Insight 是一個(gè)基于真實(shí)用戶(hù)的 Web 前端性能監(jiān)控統(tǒng)計(jì)平臺(tái)甚疟，能夠幫大家定位網(wǎng)站性能瓶頸仗岖，網(wǎng)站加速效果可視化；支持瀏覽器览妖、微信轧拄、App 瀏覽 HTML 和 HTML5 頁(yè)面。想閱讀更多技術(shù)文章讽膏，請(qǐng)?jiān)L問(wèn) OneAPM 官方技術(shù)博客檩电。
本文轉(zhuǎn)自 OneAPM 官方博客
