速度指數：它是什麼以及如何為此優化您的網站

已發表: 2021-08-24

在考慮頁面速度時，速度指數 (SI) 是一個有趣的指標。 它絕對是您頁面性能的指標，但它與其他以用戶為中心的指標（例如 First Contentful Paint 和 Largest Contentful Paint）完全不同。 SI 表示您的網站加載首屏的速度。 或者換句話說，當用戶視口中的所有內容都完全可見時。 查看頁面的加載時間時，您不太可能因速度指數而受到懲罰或獎勵。 這不是忽視它的理由。 作為一個單一的指標，它是為數不多的包含多個其他指標的指標之一，可以讓您對網站的整體速度、效率和性能有一個全面的了解。

訂閱我們的 YouTube 頻道

什麼是速度指數？

Lighthouse 是 Google PageSpeed Insights 的支柱，它會查看多個性能指標來為您的網站評分。 速度指數 (SI) 就是其中之一，報告將以秒為單位顯示時間，而不是像其他一些指標一樣以毫秒為單位。 Google 將 SI 定義為“頁面內容可見填充的速度”。

很直接，對吧？

速度指數不考慮後端腳本或其他非繪製負載。 不過，它們確實會影響它。 SI 只是衡量用戶完整查看您的內容所需的時間。 那是踢球者。 完整的。 雖然其他指標（例如 LCP）是在顯示內容的最大部分時衡量的，但速度指數考慮了實際應該顯示的任何和所有內容。

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

如何測量速度指數

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

速度指數 pagespeed 洞察

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

什麼是好的速度指數分數？

PageSpeed Insights 使用以下分數對您網站的速度指數進行排名並相應地對其進行顏色編碼：

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

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

如何優化您的速度指數得分

您可以採取多個步驟來優化您的速度指數分數。 如果您已經嘗試優化您的網站以提高（或從技術上講，降低）頁面速度，那麼您可能也以某種方式影響了您的 SI 分數。 我們將向您展示幾種專門針對您的 SI 時間的方法，以便您的頁面盡快加載，從而為您的訪問者提供最佳體驗。

減少渲染阻塞資源

更具體地說，減少 JavaScript 執行時間是提高速度指數得分的最佳方法之一。 渲染阻塞資源是腳本和代碼，它們優先阻止您網站的其他部分加載。 與站點同時加載不同的元素不同，一些元素會暫停所有其他元素，直到它們完成。

這會降低您網站的速度指數。 為了解決這個問題，您可以推遲加載任意數量的腳本和代碼位，直到可見元素繪製到 DOM 之後。 識別罪魁禍首實際上相對容易，因為您可以使用 Chrome Dev Tools 在您的網站加載時查看您的網站，並且該工具將指出是什麼阻止了元素的渲染。

此外，WordPress 用戶可以使用 W3 Total Cache 或 WP Rocket 等緩存插件（或站點優化插件）來處理此問題。 通常這些插件有一個簡單的切換來延遲渲染阻塞資源。

速度指數延遲

Divi 用戶也具有阻止此類資源的主要優勢，因為主題選項允許您切換渲染阻止 CSS 延遲以及 jQuery 腳本。 最重要的是，主題的關鍵 CSS 功能分解了大量代碼，這些代碼可能會延遲您網站的內容並導致它們比其他方式加載得更快。 雖然其中一些是切換，但 Divi 會自動啟用其他功能。 在大多數情況下，安裝 Divi 應該會立即幫助您獲得 SI 分數。

減少站點的主線程工作

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

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

一般來說，頁面的 JavaScript 越多，解析/編譯過程就越長； 導致用戶查看內容和與您的頁面交互的等待時間更長。

我們認識到這可能並不容易。 您已將網站設計為以某種方式運行。 但是，您可能會刪除未使用的代碼，並且您可以優化加載到站點中的任何第三方 JavaScript。 另外，縮小您的 JavaScript。

在 JS 審計之上，確保你縮小了你的 CSS 和 HTML。 這將減輕更多的主線程壓力。 緩存和優化插件通常也有這些選項。

Divi 用戶再次在這裡佔據一席之地，因為該主題會自動將 CSS 和 JavaScript 縮小並將其拆分為一口大小的塊，以提高吞吐量，從而消除對主線程大量關注的需要。

速度指數常見問題

速度指數是一個具有復雜影響的簡單概念。 我們想回答一些關於 SI 的常見問題，以幫助您盡可能優化您的網站。

速度指數如何適應我網站的整體性能？

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

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

我應該特別關注我的速度指數分數嗎？

可能不是，不是。

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

結論

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

多年來，您為優化網站的速度指數做了哪些工作？

HappyDrawing/shutterstock.com 的文章特色圖片