為什麼我的網頁在瀏覽器中的大小是硬碟上大小的一半?

為什麼我的網頁在瀏覽器中的大小是硬碟上大小的一半?

我的網頁及其所有資源在磁碟上的大小為 1.7MB。 Chrome 開發工具(網路標籤)中只有 700kb。例如,根據 google 的說法,我的 140kb css 現在只有 26kb 重。我的 js 套件也是如此,它從 330 kb 增加到 90 kb。

我可以在 chrome 上看到的回應標頭:

Connection:Keep-Alive
Date:Wed, 30 Sep 2015 14:25:35 GMT
ETag:"e621f4-42c5-520f72d888210"
Keep-Alive:timeout=3, max=100
Server:Apache/2.2.16 (Debian)
Vary:Accept-Encoding

網路時間軸

實際尺寸

gzip問題

答案1

看起來您沒有在開發工具中看到所有內容。

不要使用較小的請求行,否則您只會看到 Web 檔案的 gzip 壓縮大小。

  1. 從伺服器發送的 gzip 壓縮檔案大小
  2. 您的瀏覽器提取了 gzip 壓縮文件,它包含這麼多 KB

在此輸入影像描述


您的圖像顯示較大壓縮大小的原因是因為PNG 和JPG 是一種壓縮格式,因此您的Web 伺服器實際上透過嘗試重新壓縮它而產生了不必要的開銷,並且額外的開銷被轉換為浪費的CPU 時間和額外的開銷。

如果您正在運行 Apache 並且有權訪問httpd.conf,那麼我建議向其中添加一行,如下所示:

# 不要壓縮這些影像
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) no-gzip 不變化

對於已經經過深度優化和壓縮的影像也是如此。

在我的螢幕截圖中,您可以看到 1+2 較大且未優化的圖像,但 3.jpg 已經只剩下基本內容,因此壓縮對 #3 沒有幫助,但確實對 1+2 有幫助:

在此輸入影像描述

相關內容