什麼是首屏展現平均值 (Speed Index) 及如何做相應優化措施

首屏展現平均值 (Speed Index)

在考慮頁面速度時,首屏展現平均值 (SI,全稱Speed Index) 是一個有趣的指標。它絕對是您頁面效能的指標,但它與其他以使用者為中心的指標(例如First Contentful PaintLargest Contentful Paint)完全不同。SI表示您的網站載入首屏的速度。或者換句話說,當使用者視口中的所有內容都完全可見時。檢視頁面的載入時間時,您不太可能因首屏展現平均值而受到懲罰或獎勵。這不是忽視它的理由。作為一個單一的指標,它是為數不多的包含多個其他指標的指標之一,可以讓您對網站的整體速度、效率和效能有一個全面的瞭解。

什麼是首屏展現平均值?

Lighthouse是Google PageSpeed Insights的支柱,它會檢視多個效能指標來為您的網站評分。首屏展現平均值 (SI) 就是其中之一,報告將以秒為單位顯示時間,而不是像其他一些指標一樣以毫秒為單位。Google將SI定義為“頁面內容可見填充的速度”。

很直接,對吧?

首屏展現平均值不考慮後端指令碼或其他非繪製負載。不過,它們確實會影響它。SI只是衡量使用者完整檢視您的內容所需的時間。雖然其他指標(例如LCP)是在顯示內容的最大部分時衡量的,但首屏展現平均值考慮了實際應該顯示的任何和所有內容。

這不是整體頁面速度的衡量標準。這考慮了瀏覽器何時呈現所有元素。包括不可見的指令碼和影響效能的元素。但是,如果您想很好地衡量使用者何時認為頁面已完全載入,則SI是要觀察的指標。由於它是如何以使用者為中心的,SI可以很好地表明整體站點的健康狀況,也可以作為站點使用者體驗 (UX)的基準。

如何測量首屏展現平均值

與大多數網站效能指標一樣,最常用的工具之一是Google自己的PageSpeed Insights。這個工具也是它返回的結果中最特別的工具之一。即使是最完善的站點,它也相對挑剔。PageSpeed Insights最常根據過去28天收集的彙總資料為您的網站提供實驗室資料。但是,如果您有足夠多的訪問者通過Chrome將資訊轉發回Google,您也可以從報告中獲取真實的實測資料。不過,並不是每個網站都能得到這個。

PageSpeed Insights測試

如您所見,其中許多指標的速度都是綠色的。這表明它們是“好”的。這顯然是您想要您的網站的地方。但是,首屏展現平均值為4.0秒和橙色。使用者需要等待很長時間才能看到首屏的所有內容。

什麼首屏展現平均值分數才算優秀?

PageSpeed Insights使用以下分數對您網站的首屏展現平均值進行排名並相應地對其進行顏色編碼:

  • 綠色(良好)——0 到 3.4 秒
  • 橙色(中等)——3.4 到 5.8 秒
  • 紅色(慢) – 超過 5.8 秒

正如我們之前所說,PageSpeed Insights在其測量中非常重要。如果您處於橙色或紅色狀態,則可能需要使用諸如GTmetrixPingdom速度測試類的工具來檢視其實時資料顯示的內容。我們認為最好在不同時間使用多種工具測試您的網站,以獲得最佳整體效能圖。

如何優化首屏展現平均值得分

您可以採取多個步驟來優化您的首屏展現平均值分數。如果您已經嘗試優化您的網站以提高(或從技術上講,降低)頁面速度,那麼您可能也以某種方式影響了您的 SI 分數。我們將向您展示一些專門針對您的 SI 時間的方法,以便您的頁面儘快載入,從而為您的訪問者提供最佳體驗。

減少渲染阻塞資源

更具體地說,減少JavaScript執行時間是提高首屏展現平均值得分的最佳方法之一。渲染阻塞資源是指令碼和程式碼,它們優先阻止您網站的其他部分載入。與站點同時載入不同的元素不同,一些元素會暫停所有其他元素,直到它們完成。

這會降低您網站的首屏展現平均值。為了解決這個問題,您可以推遲載入任意數量的指令碼和程式碼位,直到可見元素繪製到DOM之後。識別罪魁禍首實際上相對容易,因為您可以使用Chrome開發工具在您的網站載入時檢視您的網站,該工具將指出是什麼阻止了元素的渲染。

此外,WordPress使用者可以使用W3 Total Cache或WP Rocket等快取外掛(或站點優化外掛)來處理此問題。通常這些外掛有一個簡單的切換來延遲渲染阻塞資源。

減少渲染阻塞資源

減少網站主執行緒工作

與渲染阻塞資源一樣,您可以通過載入佔用伺服器大量處理能力的不同元素來限制站點的效能。減少這些可以幫助更快地將站點推送到瀏覽器。

對此最簡單的解決方案是停止使用如此多的JavaScript。如GTmetrix所說:

一般來說,頁面的JavaScript越多,解析/編譯過程就越長;導致使用者檢視內容和與您的頁面互動的等待時間更長。

我們認識到這可能並不容易。您已將網站設計為以某種方式執行。但是,您可能會刪除未使用的程式碼,並且您可以優化載入到站點中的任何第三方JavaScript。此外,極簡化JavaScript

在JS審計之上,確保極簡化你的CSS和HTML。這將減輕更多的主執行緒壓力。快取和優化外掛通常也有這些選項。

首屏展現平均值常見問題

首屏展現平均值是一個具有複雜影響的簡單概念。我們想回答一些關於SI的常見問題,以幫助您儘可能優化您的網站。

SI如何影響網站整體效能?

首屏展現平均值作為一個單一的指標,可以很好地表明您的網站在許多不同領域的表現。由於它考慮了完全可見的首屏內容,因此您不僅可以將其用作衡量使用者感知負載的指標,還可以粗略估計您的網站在許多不同區域的表現。

它實際上並沒有為您提供很多關於您的網站正在做什麼的資訊。它可以被視為一個包羅永珍的指標,正如GTmetrix所說,它是“一個有用的整體基準,用於評估您網站的整體效能。”

需過分關注SI分數嗎?

雖然對您的網站進行基準測試非常有用,但關注其他更精細的問題,例如首次內容繪製 ( FCP )、最大內容繪製 ( LCP )、首位元組時間 ( TTFB ) 和首次輸入延遲 ( FID )更重要。您可以採取任意數量的步驟來單獨改進這些步驟,從而提高您的首屏展現平均值。當作為整體基準時,您可以看到您的優化通過 SI 的效果如何。

小結

頁面速度優化是網站所有者永無止境的戰鬥。您必須在可用性、體驗和效能之間取得平衡,找到這種平衡可能很困難。當測試在如此多的不同元素上返回如此多的不同分數時,可能很難知道將精力和資源放在哪裡。首屏展現平均值可以幫助解決這個問題,作為一個單一的指標,可以顯示您的網站在您調整網站效能的其他更具體部分時的表現。

評論留言