博客 / 詳情

返回

白話科普系列——網站靠什麼提升加載速度?

隨着生活節奏的不斷加快,時間變得極其寶貴,等待頁面加載的時間也隨之縮短。這樣一來如何留住客户變成了一項重要的考驗。而減少頁面加載等待時間,加快加載速度,就成了提高用户參與度S,提升業務可靠性的有效策略。

根據 Google 的一項研究,有 40% 的人放棄了某網站,是因為該網站的加載時間超過 3 秒,而頁面加載時間增加1 秒,轉化就相應減少了 7%。可見,互聯網中的每一秒都至關重要。

那麼如何提升網站速度呢?可以通過網頁“壓縮”也就減少網頁體積來實現。至於要如何才能壓縮網站,我們需要先了解兩個算法, 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 算法。

瀏覽器支持情況

在壓縮效率上 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 壓縮格式的響應。

這樣就能有效避免選擇 A 還是選擇 B 的煩惱,你可以兩者都擁有,在提升用户瀏覽體驗的同時降低你的 CDN 流量。

當然對於“如果瀏覽器同時支持 Gzip 和 Brotli 會不會出現兩次壓縮,或者選擇錯誤”的問題,又拍雲也考慮到了哦。當客户端同時支持 Gzip 和 Brotli 算法的情況下,Brotli 的優先級高於 Gzip。

這麼方便的功能,只需要登陸 CDN 控制枱,進入 「性能優化」配置頁面,找到「智能壓縮」配置項,點擊【管理】按鈕,進入如下配置界面:

配置好壓縮等級就可以愉快使用了。

開啓智能壓縮前

開啓智能壓縮後

除了智能壓縮,又拍雲還提供了一系列“省帶寬,壓成本”的絕招,包括 Webp 自適應、H.265 自適應、碼率適配限速、窄帶高清 等等,從編碼技術、網絡架構等角度出發,結合又拍雲的產品成果,為大家節省流量,降低成本。有興趣可以隨時聯繫我們瞭解哦!

推薦閲讀

白話科普系列——Chrome 瀏覽器,你用了麼?

網騙欺詐?網絡裸奔?都是因為 HTTP?

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.