縮小不需捲動位置的內容

當 PageSpeed Insights 偵測到網頁在顯示不需捲動位置的內容時,會使網路往返行程增加,就會觸發這個規則。

總覽

當所需的資料流量超過初始擁塞視窗,伺服器和使用者瀏覽器之間的往返行程就會增加。對於高延遲網路 (例如行動網路) 的使用者而言,這會造成網頁載入時出現明顯的延遲。

建議

如要加快網頁載入速度,您必須限制資料 (HTML 標記、圖片、CSS 和 JavaScript) 大小,使其足以轉譯網頁不需捲動位置的內容即可。而做法有以下兩種:

建立 HTML 架構,使其優先載入重要和不需捲動位置的內容

讓瀏覽器優先載入網頁的主要內容。建立網頁架構,讓伺服器在首次回應時,立即傳送轉譯網頁重要部份所需的資料,並將其餘資料延後傳送。這表示您必須將 CSS 分為兩部分:以內嵌部分指定內容 ATF 部分的樣式,另一部分則延後載入。

您可以參考下列範例,思考怎樣重建網站架構以提高載入速度:

  • 如果您的 HTML 是先載入第三方小工具,後載入主要內容,請改為優先載入主要內容。
  • 如果您的網站採用同時顯示導覽側欄和文章的雙欄式設計,但您的 HTML 是先載入側欄而非文章,請考慮讓文章優先載入。

減少資源占用的資料流量

如果您的網站經過重新設計,已能順利在各種裝置上執行並優先載入重要內容,請使用下列技巧減少轉譯網頁所需的資料流量:
  • 壓縮資源:您可以移除不必要的空格和註解,藉此壓縮 HTML、CSS 和 JavaScript。如要進一步最佳化,則可使用各種工具為資源中的變數名稱重新命名。
  • 如果可以,請盡量使用 CSS 取代圖片
  • 啟用壓縮功能