使用 HTML 頁面權重分析器進行 HTML 頁面大小分析的最佳方式,是貼上原始的未壓縮回應主體,檢視其確切的 UTF-8 位元組組成,修正來源層級最大的熱點,並以保守的 2,000,000 位元組主體參考值重新測量已部署的 HTML。
這個工作流程很重要,因為「頁面權重」可能指涉兩種不同的概念。HTML 回應主體就是來源文件本身;總傳輸權重也可能包含另外載入的指令碼、樣式表、圖片、字型、框架和媒體。HTML 頁面權重分析器只會測量您貼上的主體,不會擷取 URL,也不會載入連結的資源。
所有作業都在您的瀏覽器本機執行。HTML 不會上傳,貼上的指令碼不會執行,表單不會送出,內嵌的 URL 也不會被請求。這讓此分析器適合用於針對來源進行稽核,但無法取代瀏覽器 DevTools、網路瀑布圖、壓縮檢查或 Core Web Vitals 測試。

瞭解位元組總數包含哪些內容
此分析器會使用瀏覽器的 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 顯示,以保護瀏覽器免受意外的全站傾倒或對抗性標記影響。對於接受的輸入,主要位元組總數會描述整段貼上的文字,而元素數量與顯示值仍會受到限制。縮短的資源清單不應被視為超出這些限制後不存在其他參照的證據。
測量、縮減並驗證主體
請將此分析器用於簡短的「診斷—修正—重新測量」循環,而不是一次性的評分。
- 擷取原始主體。 從檢視來源或經授權的 curl 擷取內容,儲存未壓縮的回應來源。保持標記不變;不要複製即時且已被指令碼變更的 Elements 樹狀結構。
- 將來源貼入分析器。 由於處理是在本機進行,文字會留在瀏覽器中,不會上傳,也不會作為頁面被擷取。
- 執行分析並閱讀完整明細。 檢查 UTF-8 位元組總數、Unicode 碼點數、內嵌指令碼與樣式占比、data URI 權重、有限制的外部資源清單,以及相對於 2,000,000 位元組主體參考值的剩餘位元組或超額量。
- 變更來源層級最大的熱點。 移除重複的序列化狀態或 hydration 資料,將適當的內嵌程式碼移至可快取的外部檔案,在安全的情況下整合重複的 CSS,並在可能時以適當的個別提供資產取代大型內嵌 data URI。請進行最小且真實的變更,而不是最佳化占比很小的一部分。
- 部署並重複測量。 擷取新的傳送回應,將其貼入分析器,並比較位元組明細。然後使用其他工具驗證標頭、資源、轉譯,以及任何您在乎的索引證據。
對每個實質不同的回應範本重複相同程序。變更其中一種地區設定、裝置或驗證狀態,並不能證明網站提供的每個頁面權重。
將每個熱點與來源層級的修正方法配對
請將明細視為除錯地圖。相同的總數可能來自大不相同的標記,而適當的修正方式取決於來源包含哪些內容。
| 發現 | 檢查項目 | 來源層級的修正 | 驗證項目 |
|---|---|---|---|
| 內嵌指令碼占主導地位 | 序列化狀態、重複的 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 測試。
請驗證新的主體位元組、回應標頭、相關連結資源和已轉譯的頁面。如果您的問題延伸至抓取或索引,請使用適當的搜尋證據,不要假設較小的數值就能保證可見性或排名。因此,此分析器最有效的用途是診斷:它會指出來源權重、量化熱點,並為下一次部署提供可重複使用的基準。