PageSpeed Insights (PSI) 是 Google 提供的一種工具，用于分析頁面的性能并提供改進其速度和用戶體驗的建議。

? ? ? ? ?

PageSpeed Insights 通過分析網頁的 HTML、CSS、字體和 JavaScript 來工作，并提供優化頁面性能的建議。這包括壓縮圖像、縮小代碼和減少頁面發出的 HTTP 請求的數量。

讓我們更仔細地看看 PageSpeed Insights。

? ? ? ? ?

目錄

?如何使用 PageSpeed Insights

?批量數據

?工作流程

? ? ? ? ?

如何使用 PageSpeed Insights ?

首先，轉到PageSpeed Insights。輸入一個 URL，然后單擊“分析”。

? ? ? ? ?

? ? ? ? ?

? ? ? ? ?

您可以選擇在桌面和移動分析之間切換。移動分數通常會比桌面分數差。移動數據可能會揭示更多需要您解決的問題，這就是我建議您查看的內容。

? ? ? ? ?

現場數據 ?

這部分是包含來自您網站的真實用戶的數據。PageSpeed Insights 從Chrome 用戶體驗報告 (CrUX)中提取此信息，其中包含選擇共享該數據的 Chrome 用戶的數據。

?

頂部是一個選項卡，用于在頁面和原始（類似于域）級別數據之間切換，它聚合了許多頁面的數據。您可能沒有所有頁面的數據，甚至沒有原始數據。這取決于有多少人訪問您的網站并選擇分享此信息。

? ? ? ? ?

截至 2023 年 4 月，CrUX 數據集中約有 2950 萬個來源。

? ? ? ? ?

? ? ? ? ?

下一部分是關于Core Web Vitals (CWV)的，包括通過/失敗評估。主要指標是 Largest Contentful Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS)。這些 CWV 指標是谷歌在其排名中使用的指標。

? ? ? ? ?

? ? ? ? ?

這些數字是用顏色編碼顯示的，綠色 = 優秀，橙色 = 需要改進，紅色 = 差?？傊?，75% 的用戶體驗需要滿足為給定指標設置的閾值才能被視為“良好”。這些是閾值：

? ? ? ? ?

? ? ? ? ?

如果單擊“展開視圖”，您將看到每個指標的分布情況。

? ? ? ? ?

CrUX 數據庫中還有一些當前未在排名中使用的其他指標。其中包括首次內容繪制 (FCP)、與下一次繪制的交互 (INP) 和首字節時間 (TTFB)。INP 將于 2024 年 3 月取代 FID 作為 CWV 指標。

? ? ? ? ?

? ? ? ? ?

這些數字是用顏色編碼顯示的，綠色 = 優秀，橙色 = 需要改進，紅色 = 差。75% 的用戶體驗需要達到為給定指標設置的閾值才能被視為“良好”。這些是閾值：

? ? ? ? ?

? ? ? ? ?

如果單擊“展開視圖”，您將看到每個指標的分布情況。

? ? ? ? ?

? ? ? ? ?

最后一部分告訴您有關此數據的來源的一些信息。這些數據來自真實的用戶體驗，是 28 天的滾動平均值。

? ? ? ? ?

實驗室數據 ?

Lighthouse是一種用于衡量網頁性能和質量的開源工具。它可以在您自己的瀏覽器中運行。但就 PageSpeed Insights 而言，它在 Google 的服務器上運行。

? ? ? ? ?

您會看到幾個關于性能、可訪問性、最佳實踐和 SEO 的數字。所有這些實際上只是檢查最佳實踐，但它們并沒有告訴您您在每個領域的表現如何。

? ? ? ? ?

? ? ? ? ?

同樣，這些指標采用顏色編碼，可以讓您快速了解什么是好的以及您可能需要改進的地方。

? ? ? ? ?

出于本文的目的，我們將重點關注“性能”部分，因為這是 SEO 使用該工具的目的。首先，您有一個性能分數和頁面的屏幕截圖。

? ? ? ? ?

? ? ? ? ?

您的得分介于 0 到 100 之間。當前的分數閾值是：

? ? ? ? ?

l優秀：分數為 90-100

l需要改進：得分 50–89

l較差：分數為 0–49

? ? ? ? ?

正如我提到的，您可能有一個很好的分數，但仍然有一個未通過 CWV 的緩慢頁面。網絡條件、服務器負載、緩存和用戶設備等其他因素也會影響頁面加載時間。

? ? ? ? ?

只有 2% 的測試頁面得分為 100。得分為 50 會使您進入測試頁面的前 25%。

? ? ? ? ?

每次運行測試時，分數和指標都會發生變化。發生這種情況的原因可能是網絡條件、負載或瀏覽器在頁面加載過程中做出不同的決定。我建議進行三到五次測試并對結果取平均值。

? ? ? ? ?

該分數基于計算并涉及對幾個指標進行加權。權重在移動設備和桌面設備之間發生變化。這些是 Mobile 的當前分數，但請查看計算器以獲取最新信息。

? ? ? ? ?

? ? ? ? ?

還有另一個指標部分，這次是實驗室測試指標。您會在此處找到 LCP 和 CLS，但不會從 CWV 找到 FID 或 INP 指標。這些需要點擊頁面，實驗室測試無法重現。相反，您可以使用總阻塞時間 (TBT) 作為代理指標來進行改進。

? ? ? ? ?

? ? ? ? ?

您還可以單擊“展開視圖”按鈕以獲取展開視圖，其中包括指標定義和包含更多詳細信息的鏈接。

? ? ? ? ?

? ? ? ? ?

最后一部分告訴您有關此數據的來源的一些信息。

? ? ? ? ?

? ? ? ? ?

如果將鼠標懸停在該信息上，您將獲得有關測試條件的更多信息。PageSpeed Insights 多年來一直使用 Moto G4 作為測試設備，但現在是 Moto G Power。您還可以獲得有關測試位置的數據，這些位置是北美、歐洲或亞洲。

? ? ? ? ?

? ? ? ? ?

有一些快照可以直觀地向您展示頁面是如何隨時間加載的。

? ? ? ? ?

如果單擊“View Treemap”，您可以找到最大的文件以及頁面上未使用的代碼量。

? ? ? ? ?

默認情況下，您會看到與所有指標相關的問題。有一些按鈕，您可以在其中過濾影響您可能想要改進的特定指標的問題。

? ? ? ? ?

? ? ? ? ?

“機會”和“診斷”部分將向您展示有助于提升頁面性能的問題。

? ? ? ? ?

他們顯示的預估節省和改進是不現實的?？赡苓€有其他障礙，因此您不會得到顯示的改進，或者在某些情況下，如果您解決了問題，則根本不會得到任何改進。有時，您必須解決多個問題才能真正看到改進。

? ? ? ? ?

您可以單擊以展開任何元素。您將收到有關如何解決每個問題的一些指導。這些建議可能會根據正在測試的系統而變化。例如，我在我們的 WordPress 博客上測試了一個頁面，我看到了 WordPress 特定的指南。

? ? ? ? ?

? ? ? ? ?

這些提示有助于將某些問題翻譯成您可能聽說過的術語。例如，“延遲屏幕外元素”問題告訴您應該延遲加載圖像。然后，您可以在 WordPress 中搜索處理延遲加載的插件。

? ? ? ? ?

還有其他信息顯示 LCP 圖像是什么、哪些元素導致 CLS 以及哪些元素阻塞主線程（您需要減少哪些內容以提高 FID/INP）。此信息可以幫助您針對這些元素進行修復。

? ? ? ? ?

? ? ? ? ?

還有一個用于通過審核的部分，向您展示您已經做得很好的地方。您可能仍然可以改進這些。但是你最好不要把時間花在其他問題上。

? ? ? ? ?

批量數據 ?

PageSpeed Insights 有一個很棒的 API。它允許您從 CrUX 中提取現場數據，從 Lighthouse 測試中提取實驗室數據。您還可以批量獲取只能通過 PageSpeed Insights 訪問的頁面級 CWV 數據。

工作流程 ?

對于評估和監控，我會使用 Ahrefs來查看有問題的頁面和趨勢，以及Google Search Console (GSC)中的Core Web Vitals報告。

? ? ? ? ?

GSC 的好處是它可以存儲相似的 URL。對于分桶頁面，您可能會在一個系統或模板中工作。當您修復問題時，您將修復該存儲桶中的所有頁面。

? ? ? ? ?

? ? ? ? ?

了解需要處理的頁面或模板后，您可以使用 PageSpeed Insights 的指導進行改進。

? ? ? ? ?

要檢查改進，您可以使用 PageSpeed Insights 或在Site Audit中運行另一個爬網以批量獲取數據。CWV 數據需要更長的時間才能顯示任何更改的影響，因為它是 28 天的平均值，因此請使用 PSI 或 Ahrefs 中的 PSI 數據來檢查您所做的更改是否改進了實驗室測試指標。

? ? ? ? ?

? ? ? ? ?

翻譯作品，原作者：Patrick Stox

更多文章：

Core Web Vitals ：頁面速度現在對 SEO 更為重要

Google SEO:如何優化Core Web Vitals提高您的網站排名