使用 HTML 頁面權重分析器進行 HTML 頁面大小分析的最佳方式,是貼上原始的未壓縮回應主體,檢視其確切的 UTF-8 位元組組成,修正來源層級最大的熱點,並以保守的 2,000,000 位元組主體參考值重新測量已部署的 HTML。

這個工作流程很重要,因為「頁面權重」可能指涉兩種不同的概念。HTML 回應主體就是來源文件本身;總傳輸權重也可能包含另外載入的指令碼、樣式表、圖片、字型、框架和媒體。HTML 頁面權重分析器只會測量您貼上的主體,不會擷取 URL,也不會載入連結的資源。

所有作業都在您的瀏覽器本機執行。HTML 不會上傳,貼上的指令碼不會執行,表單不會送出,內嵌的 URL 也不會被請求。這讓此分析器適合用於針對來源進行稽核,但無法取代瀏覽器 DevTools、網路瀑布圖、壓縮檢查或 Core Web Vitals 測試。

what is the best way to use html page weight html page size analyzer
使用 HTML 頁面權重分析器稽核 HTML 回應

瞭解位元組總數包含哪些內容

此分析器會使用瀏覽器的 TextEncoder API 回報貼上文字的精確 UTF-8 位元組長度,以及 Unicode 碼點數。這可避免產生誤導性的字元計數結果。ASCII 通常每個字元佔用 1 個 UTF-8 位元組,而帶重音的字母、CJK 文字和表情符號可能佔用更多。瀏覽器字串也會計算 UTF-16 程式碼單元,因此其長度與編碼後的回應主體並不相同。MDN 的 TextEncoder 文件說明了此測量背後的編碼作業。

內嵌指令碼和樣式文字會計入文件主體。data URI 也會計入,因為其編碼值會直接出現在 HTML 中。相較之下,外部指令碼、樣式表、圖片、框架、預載或媒體參照只會貢獻 HTML 中存在的字元;此分析器絕不會下載這些檔案,也不會聲稱知道其內容傳輸大小。

結果 有用的詮釋 無法證實
UTF-8 主體位元組總數 貼上來源的確切大小 傳輸大小、標頭或抓取結果
內嵌指令碼與樣式占比 直接嵌入文件中的位元組 執行階段成本或 Core Web Vitals
data URI 權重 完整且只計算一次的支援屬性值 另外下載的檔案或再次加入的已解碼內容傳輸
外部資源清單 支援的參照及其 URL 文字 連結檔案大小或載入成功與否

支援的 data URI 屬性值會依其在貼上來源中呈現的完整形式,只計算一次。此分析器不會解碼 Base64 後再次加入已解碼的內容傳輸,否則會重複計算已存在於 HTML 中的位元組。任意 title 和 data-* 屬性不會被視為資源。

Googlebot 與網頁轉譯服務可能會另外擷取連結的資源,並受到各自的限制。冗長的參照清單可以揭露重複標籤,但僅憑參照數量並不能得出效能分數。它能告訴您該檢查頁面的哪些位置,但不能告訴您連結檔案有多昂貴。

擷取您真正想測量的回應

盡可能使用原始傳送來源:檢視來源、已儲存的回應主體,或經授權的 curl 擷取內容。在 JavaScript 執行後複製 Elements 面板,可能會包含原本不在回應中的 DOM 變更,並遺漏原本存在的來源細節。如果結果似乎與部署情況不一致,請先檢閱這些導致 HTML 頁面大小分析器結果失準的錯誤,再變更網站。

擷取未壓縮的主體內容;當伺服器會依使用者代理程式、地區設定、驗證狀態或裝置而改變輸出時,請分別測試具代表性的回應。解析器會使用獨立的 template 片段和瀏覽器原生 HTML 權杖化器,因此會尊重 textarea、title、script 和 style 等元素中的原始文字邊界。巢狀的 template 內容仍維持惰性,且不列入資源清單。

此分析器會套用嚴格的輸入上限、共用的元素上限,以及有限制的 URL 顯示,以保護瀏覽器免受意外的全站傾倒或對抗性標記影響。對於接受的輸入,主要位元組總數會描述整段貼上的文字,而元素數量與顯示值仍會受到限制。縮短的資源清單不應被視為超出這些限制後不存在其他參照的證據。

測量、縮減並驗證主體

請將此分析器用於簡短的「診斷—修正—重新測量」循環,而不是一次性的評分。

  1. 擷取原始主體。 從檢視來源或經授權的 curl 擷取內容,儲存未壓縮的回應來源。保持標記不變;不要複製即時且已被指令碼變更的 Elements 樹狀結構。
  2. 將來源貼入分析器。 由於處理是在本機進行,文字會留在瀏覽器中,不會上傳,也不會作為頁面被擷取。
  3. 執行分析並閱讀完整明細。 檢查 UTF-8 位元組總數、Unicode 碼點數、內嵌指令碼與樣式占比、data URI 權重、有限制的外部資源清單,以及相對於 2,000,000 位元組主體參考值的剩餘位元組或超額量。
  4. 變更來源層級最大的熱點。 移除重複的序列化狀態或 hydration 資料,將適當的內嵌程式碼移至可快取的外部檔案,在安全的情況下整合重複的 CSS,並在可能時以適當的個別提供資產取代大型內嵌 data URI。請進行最小且真實的變更,而不是最佳化占比很小的一部分。
  5. 部署並重複測量。 擷取新的傳送回應,將其貼入分析器,並比較位元組明細。然後使用其他工具驗證標頭、資源、轉譯,以及任何您在乎的索引證據。

對每個實質不同的回應範本重複相同程序。變更其中一種地區設定、裝置或驗證狀態,並不能證明網站提供的每個頁面權重。

將每個熱點與來源層級的修正方法配對

請將明細視為除錯地圖。相同的總數可能來自大不相同的標記,而適當的修正方式取決於來源包含哪些內容。

發現 檢查項目 來源層級的修正 驗證項目
內嵌指令碼占主導地位 序列化狀態、重複的 hydration 資料或內嵌程式庫文字 移除重複的內容傳輸;將適當且可快取的程式碼外部化 新的主體位元組與應用程式行為
內嵌樣式占主導地位 重複的關鍵 CSS 規則 整合重複規則,或將適當的 CSS 外部化 樣式與關鍵轉譯
data URI 占主導地位 位於支援資源屬性中的 Base64 圖片或字型 避免在標記中內嵌大型二進位內容傳輸 主體位元組與產生的資產回應
外部清單異常冗長 重複的 script、style、preload、img 或 media 標籤 移除重複項目或錯誤參照,不要推斷內容傳輸大小 實際網路請求

只有在部署能適當提供並快取外部檔案時,才將程式碼移至外部檔案。移除大型內容傳輸可能會改善 HTML 主體,卻也會產生新的網路請求,因此請驗證變更的兩面。同樣地,以資產 URL 取代 data URI 雖然能減少主體位元組,但不會消除資產的個別下載。

設定優先順序,但不要將參考值視為判決

Google 目前的 crawler 文件指出,Googlebot 會抓取支援檔案的前 2 MB,並在上限處停止擷取;此限制適用於未壓縮資料。稍後的技術說明指出,HTTP 標頭會佔用每個 URL 額度的一部分。由於此分析器只會收到貼上的主體,因此無法知道真正的回應標頭大小,也無法證明 Googlebot 確切會在哪個位置停止。因此,它會將 2 MB 標示為十進位的 2,000,000 位元組主體參考值,並讓標頭的注意事項持續清楚可見。

請使用剩餘位元組或超額量數值來排定來源工作的優先順序,而不是預測索引結果。主體低於參考值並不保證能完整擷取,因為標頭仍會計入。超額標記僅表示貼上的主體超過主體參考值;它不會顯示同時含有標頭的回應中的確切停止位置。Google 的限制可能會變更,因此請查看目前的 Googlebot crawler 文件及其參考日期,不要將此數字視為永久不變。如需瞭解此工作流程中對參考值的詮釋,請參閱HTML 頁面權重分析器中的 2 MB 代表什麼。

以部署證據完成閉環

重新測量後,若這些資訊攸關需求,請使用瀏覽器 DevTools 或經授權的 curl 擷取內容來檢視已部署的回應。此分析器不知道 gzip 或 Brotli 的傳輸大小、伺服器標頭、快取行為、較晚發生的用戶端 DOM 變更、外部回應大小、執行成本、轉譯成本,也不知道 Google 索引了哪些內容。它也不是網路瀑布圖或 Core Web Vitals 測試。

請驗證新的主體位元組、回應標頭、相關連結資源和已轉譯的頁面。如果您的問題延伸至抓取或索引,請使用適當的搜尋證據,不要假設較小的數值就能保證可見性或排名。因此,此分析器最有效的用途是診斷:它會指出來源權重、量化熱點,並為下一次部署提供可重複使用的基準。