白話科普系列——網站靠什麼提升載入速度?
阿新 • • 發佈:2020-12-09
隨著生活節奏的不斷加快,時間變得極其寶貴,等待頁面載入的時間也隨之縮短。這樣一來如何留住客戶變成了一項重要的考驗。而減少頁面載入等待時間,加快載入速度,就成了提高使用者參與度S,提升業務可靠性的有效策略。
根據 Google 的一項研究,有 40% 的人放棄了某網站,是因為該網站的載入時間超過 3 秒,而頁面載入時間增加1 秒,轉化就相應減少了 7%。可見,網際網路中的每一秒都至關重要。
![](https://upload-images.jianshu.io/upload_images/80097-969a195181f8be7e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
那麼如何提升網站速度呢?可以通過網頁“壓縮”也就減少網頁體積來實現。至於要如何才能壓縮網站,我們需要先了解兩個演算法, Gzip 和 Brotli 壓縮演算法。
## Gzip 壓縮演算法
Gzip 基於 DEFLATE 演算法,它是 LZ77 和霍夫曼編碼的組合,最早用於 UNIX 系統的檔案壓縮。HTTP 協議上的 Gzip 編碼是一種用來改進 Web 應用程式效能的技術,它要求 Web 伺服器和客戶端(瀏覽器)必須共同支援 Gzip。而當下主流的瀏覽器,包括 IE6、IE7、IE8、IE9、FireFox、Google Chrome、Opera 等都已經開始支援 Gzip 壓縮。可見 Gzip 的使用已經成為了網際網路發展的必然趨勢。
作為 Internet 上使用非常普遍的一種資料壓縮格式,Gzip 對一般純文字內容可壓縮到原大小的 40%,這大大減少了網站檔案中重複程式碼和空白的數量。它還可以提供 9 個壓縮級別,可以方便使用者微調壓縮量和壓縮時間。
在用於提高 Web 應用程式的效能這一點上,Gzip 壓縮一直是最受歡迎的。直到另一種壓縮演算法 Brotli 的出現,它成為了 Gzip 最大的競爭對手。
## Brotli 壓縮演算法
Brotli 是 Google 在 2015 年 9 月推出的一種壓縮演算法,Google 認為網際網路使用者的時間是寶貴的,他們的時間不應該消耗在漫長的網頁載入中,因此與其他壓縮演算法相比,Brotli 有著更高的壓縮效率。它通過變種的 LZ77 演算法、Huffman 編碼以及二階文字建模等方式進行資料壓縮。
根據 Google 釋出的研究報告,Brotli 壓縮演算法具有多個特點,最典型的是以下 3 個:
- 針對常見的 Web 資源內容,Brotli 的效能相比 Gzip 提高了 17-25%;
- 當 Brotli 壓縮級別為 1 時,壓縮率比 Gzip 壓縮等級為 9(最高)時還要高;
- 在處理不同 HTML 文件時,Brotli 依然能夠提供非常高的壓縮率
依靠著自身卓越的壓縮效能,Brotli 自推出後就迅速開始佔領壓縮市場,從下圖可以看到,除了 IE 和 Opera Mini 之外,幾乎所有的主流瀏覽器都已支援 Brotli 演算法。
![瀏覽器支援情況](https://upload-images.jianshu.io/upload_images/80097-b6c3c2fe6affc0f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在壓縮效率上 Brotli 毫無疑問的遙遙領先。那麼我們是否可以無腦盲選 Brotli 呢,Gzip 是不是應該就此退出市場?
## Brotli 比 Gzip 更好嗎?
顯然與 Gzip 相比,Brotli 壓縮在研究中顯示出了不俗的成果。,例如 Gzip 有 9 個壓縮級別,而 Brotli 有 11 個。此外,Brotli 還使用一個預定義的 120 千位元組字典,該字典包含超過 13000 個常用單詞、短語和其他子字串。這些因素都有效提高了 Brotli 的壓縮率。根據 Certsimple 的研究,用 Brotli 壓縮的 Javascript 檔案比 Gzip 小 14%,HTML 檔案比 Gzip 小 21%,CSS 檔案比 Gzip 小 17%。
無論從哪方面看 Gzip 都已經被 Brotli 碾壓,兩者之間毫無對比的可能性,我們似乎也完全不需要考慮選擇左邊或者右邊。
注意:影象不應該被 Gzip 或 Brotli 壓縮,因為它們已經被壓縮,再次壓縮將使其尺寸變大。
誠然 Brotli 在壓縮程度上有著絕對的優勢,但是這些優勢是用其他代價換來的。Brotli 壓縮操作所花費的時間會隨著壓縮級別的增加而增加。簡而言之,就是 Brotli 需要更多的計算能力,而大家都知道計算能力需求的增加代表著裝置和軟體設施的成本上漲。另外 Brotli 要求瀏覽器必須支援與 HTTPS 一起使用,這也是他相比在瀏覽器支援量上比 Gzip 少的原因。畢竟 Gzip 同時支援 HTTP 和 HTTPS。
一邊是壓縮效果奇佳但是可能會因為瀏覽器的不支援而導致使用者無法訪問網站,另一邊則是瀏覽器支援但是壓縮效果降低使用者載入網頁時間依然略長,一個兩難的抉擇出現在了網站運營者面前。有機靈的小夥伴可能會說:“也不是所有使用者都能使用 HTTPS,但是不是有功能判斷麼?難道壓縮演算法就不能整一個這種自動判斷?讓能使用 Brotli 的使用 Brotli,不能的使用 Gzip。”
bingo!華生,你發現了盲點。讓我們愉快地掏出又拍雲一站式減流量祕籍之智慧壓縮!
## 又拍雲祕籍——智慧壓縮
又拍雲智慧壓縮功能旨在為網站減少了流量開支,減少資源載入時間,讓終端使用者的體驗更上一層樓。它同時支援 Gzip 和 Brotli 壓縮演算法,可同時開啟,也可開啟其中一種。開啟該功能,可對靜態檔案型別進行壓縮,有效減少使用者傳輸內容大小,加速分發效果。為了配置的靈活性,“智慧壓縮”功能支援壓縮等級(1 到 5)的設定。兩種壓縮演算法的壓縮等級預設為 1,等級越高,壓縮率越大。考慮到壓縮等級越高,壓縮速度會降低,實際生產環境,建議壓縮等級控制在 3 以內,具體請以線上環境實測為準進行自主設定。
當用戶在後臺同時開啟 Gzip 和 Brotli 壓縮時,後臺會自行判斷瀏覽器是否支援 Brotli 來選擇進行哪種壓縮。
那麼這個瀏覽器自行判斷是怎麼操作的呢?
其實支援 Brotli 的瀏覽器會在接受編碼請求標頭中傳送“ br”和“ gzip”(例如:Accept-Encoding: gzip, deflate, br)。如果 Web 伺服器上啟用了 Brotli,則使用者將獲取到 Brotli 壓縮格式的響應。
![](https://upload-images.jianshu.io/upload_images/80097-44399b583dd7401c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
這樣就能有效避免選擇 A 還是選擇 B 的煩惱,你可以兩者都擁有,在提升使用者瀏覽體驗的同時降低你的 CDN 流量。
當然對於“如果瀏覽器同時支援 Gzip 和 Brotli 會不會出現兩次壓縮,或者選擇錯誤”的問題,又拍雲也考慮到了哦。當客戶端同時支援 Gzip 和 Brotli 演算法的情況下,Brotli 的優先順序高於 Gzip。
這麼方便的功能,只需要登陸 CDN 控制檯,進入 「效能優化」配置頁面,找到「智慧壓縮」配置項,點選【管理】按鈕,進入如下配置介面:
![](https://upload-images.jianshu.io/upload_images/80097-bae6312696974a65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
配置好壓縮等級就可以愉快使用了。
![開啟智慧壓縮前](https://upload-images.jianshu.io/upload_images/80097-68e4aeb36cac85ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![開啟智慧壓縮後](https://upload-images.jianshu.io/upload_images/80097-259ff208a745972b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
除了智慧壓縮,又拍雲還提供了一系列“省頻寬,壓成本”的絕招,包括 Webp 自適應、H.265 自適應、位元速率適配限速、窄帶高清 等等,從編碼技術、網路架構等角度出發,結合又拍雲的產品成果,為大家節省流量,降低成本。有興趣可以隨時聯絡我們瞭解哦!
![](https://upload-images.jianshu.io/upload_images/80097-c5faecb2f9eaab86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#### 推薦閱讀
[白話科普系列——Chrome 瀏覽器,你用了麼?](https://www.upyun.com/tech/article/590/%E7%99%BD%E8%AF%9D%E7%A7%91%E6%99%AE%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94Chrome%20%E6%B5%8F%E8%A7%88%E5%99%A8%EF%BC%8C%E4%BD%A0%E7%94%A8%E4%BA%86%E4%B9%88%EF%BC%9F.html)
[網騙欺詐?網路裸奔?都是因為 HTTP?](https://www.upyun.com/tech/article/601/%E7%BD%91%E9%AA%97%E6%AC%BA%E8%AF%88%EF%BC%9F%E7%BD%91%E7%BB%9C%E8%A3%B8%E5%A5%94%EF%BC%9F%E9%83%BD%E6%98%AF%E5%9B%A0%E4%B8%BA%20HTTP%EF%BC%9