如何分析來自 Google PageSpeed Insights 的結果

由於 Google 將提升速度較快的網站的排名，您可能很想了解更多有關 Google PageSpeed 洞察力的信息？

......我並不感到驚訝，因為它令人困惑！

這篇文章會有所幫助。

為什麼網站頁面速度很重要？

Google 希望為用戶提供最佳的用戶體驗。

如果您的網站速度很慢，它將使用戶感到沮喪並造成糟糕的用戶體驗。 就這麼簡單。 性能影響體驗。

谷歌最近宣布，核心 Web Vitals 將在 2021 年用作其排名算法的一部分。這些核心 Web Vitals 是速度以及人們與您的頁面交互速度的指標。

基本上對於下面的這張表，你不能是“紅色”

什麼是 Google PageSpeed Insights？

它是 Google 提供的免費工具，可讓您輸入網頁 URL 并快速運行測試以檢查與性能相關的各種指標。

然後，該工具會為您的頁面提供 0 到 100 分的分數。 分數與速度無關。 如果您使用了谷歌關於提高速度的典型建議，您可以提高分數。

它還向您顯示了使您的頁面變慢的確切參數，以及有關如何使其變得更好的建議。

這是事情變得技術性的地方，結果有點難以理解。

你如何解釋結果？

運行測試後，您首先看到的是分析頁面的性能得分（桌面和移動）。

這將是一個介於 0 和 100 之間的數字。

• 0 到 49 - 這很糟糕，你不希望你的分數是 49 或以下
• 50 到 89 – 這還可以，但還有改進的餘地
• 90 到 100 – 如果你在這個範圍內，那麼你就是好書。

向下滾動時，您會看到導致高分或低分的原因：

注意：請參閱每個部分之前的顏色指示器：

• 綠色意味著快
• 橙色表示適中
• 紅色代表慢

這就是每個部分的含義：

第一個 ContentFul Paint

這是從瀏覽器導航到頁面到內容開始呈現的時間。

基本上，它是頁面開始加載的一個指標。

例如，它可能只是頁面背景顏色、顯示的圖像或一段文本的顏色變化。

這很重要，因為當用戶看到某些操作時，他們更有可能等待頁面完全加載。

指導方針：

互動時間

此參數顯示頁面變得交互式的速度。

這意味著頁面在屏幕上顯示了足夠的元素，以便用戶可以實際與之交互，例如單擊菜單按鈕。

有時，網站可以專注於可見性，即在您與內容交互之前顯示所有內容，這可能會讓用戶感到沮喪。

指導方針：

總阻塞時間

您的網站訪問者在屏幕上看到內容的時間與他們可以與之交互的時間之間存在差距。

這是總的阻塞時間！

很高興知道人們在網站交互之前是否不能執行鼠標點擊、屏幕點擊或關鍵字按下等操作。

長任務是阻塞你超過 50 毫秒的任務。

任何超過 50 毫秒的時間都被視為阻塞時間。

如果沒有長任務，那麼您將看到 0 阻塞時間，這就是您在上面的統計信息中看到的。

累積版面偏移

佈局移位是指視覺元素顯示在屏幕上但隨後移動。

例如，您正在閱讀新聞並且佈局發生了變化，因此新聞文章的位置發生了變化。

從用戶的角度來看，這是出乎意料的行為。

分數越高越差。

速度指數

這是一個很難理解但很有價值的問題。

所以想像一下兩個網站都在 1.5 秒內加載。

如果您瀏覽了上圖中顯示的 2 個網站，哪個會加載得更快？

兩者都在 1.5 秒內完全加載，但由於第一個站點較早開始顯示一些元素，因此對用戶來說似乎更快。

如果您只是測量加載時間，它們是相同的。

速度指數是根據網站完全加載的“速度”計算得出的分數。

加載的視頻記錄用於在加載位時直觀地顯示。

在不同的時間間隔，將屏幕上可見的內容量（首屏）與完全加載的網站上顯示的內容進行比較，以計算出在特定時間顯示的內容百分比。

這個過程重複幾次。

時間僅基於用戶可以在屏幕上看到的內容（視口）。 首屏下方的內容無關緊要。

所以……嘗試不同的視口是件好事。

如果您有 2 個網站，其中一個在另一個之前顯示視覺元素，那麼它最終的速度指數得分會較低。

越低越好。

最大的內容塗料

這是頁面最大元素完全呈現所需的時間。

當頁面加載時，第一個元素成為最大的元素，但是隨著更大的元素的添加，它會被替換。

頁面的最後一個元素可能是頁面的最大元素（例如大圖像），也可能不是。

注意：我們不是在談論它在屏幕上佔用了多少空間。

這裡有2個例子。

從網站開始顯示到頁面上最後一個圖像顯示的時間將被認為是最大的內容繪製。 這是因為圖像在頁面上佔據了最多的空間！

但…

在下面的示例中，“Instagram”圖像是顯示的最大圖像，因此最大的內容繪製是在加載倒數第二個屏幕時。

最後一屏打折。 添加到該屏幕的所有內容都是“谷歌播放按鈕”，它比“Instagram”更小。

根據 Google 的說法，如果您想提供良好的用戶體驗，LCP 應該在頁面首次開始加載後的 2.5 秒內發生。

指導方針：

機會

機會部分向您展示了有助於縮短頁面加載時間的建議。

如果您實施了該建議，每條建議還會顯示您估計的頁面加載時間減少情況。

診斷

診斷突出了您應該考慮實施的 Web 開發中的最佳實踐。

但是，即使您進行了這些改進，它們也不會直接影響您的頁面性能得分。

概括

提高網站速度就是為訪問者提供更好的體驗。 擁有一個快速加載的網站會讓用戶和搜索引擎都更快樂，但它也會影響您將訪問者轉化為客戶的能力。

像 Google PageSpeed Insights 這樣的工具非常有用，因為它可以告訴您從哪裡開始以及要關注哪些問題以提高您的網站性能。

希望本文能幫助您了解此工具的工作原理以及測試結果的實際含義，以便您可以開始優化網頁，為訪問者創造驚人的體驗。