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

? ? ? ? ?

PageSpeed Insights 通過分析網(wǎng)頁的 HTML、CSS、字體和 JavaScript 來工作，并提供優(yōu)化頁面性能的建議。這包括壓縮圖像、縮小代碼和減少頁面發(fā)出的 HTTP 請(qǐng)求的數(shù)量。

讓我們更仔細(xì)地看看 PageSpeed Insights。

? ? ? ? ?

目錄

?如何使用 PageSpeed Insights

?批量數(shù)據(jù)

?工作流程

? ? ? ? ?

如何使用 PageSpeed Insights ?

首先，轉(zhuǎn)到PageSpeed Insights。輸入一個(gè) URL，然后單擊“分析”。

? ? ? ? ?

? ? ? ? ?

? ? ? ? ?

您可以選擇在桌面和移動(dòng)分析之間切換。移動(dòng)分?jǐn)?shù)通常會(huì)比桌面分?jǐn)?shù)差。移動(dòng)數(shù)據(jù)可能會(huì)揭示更多需要您解決的問題，這就是我建議您查看的內(nèi)容。

? ? ? ? ?

現(xiàn)場(chǎng)數(shù)據(jù) ?

這部分是包含來自您網(wǎng)站的真實(shí)用戶的數(shù)據(jù)。PageSpeed Insights 從Chrome 用戶體驗(yàn)報(bào)告 (CrUX)中提取此信息，其中包含選擇共享該數(shù)據(jù)的 Chrome 用戶的數(shù)據(jù)。

?

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

? ? ? ? ?

截至 2023 年 4 月，CrUX 數(shù)據(jù)集中約有 2950 萬個(gè)來源。

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

? ? ? ? ?

這些數(shù)字是用顏色編碼顯示的，綠色 = 優(yōu)秀，橙色 = 需要改進(jìn)，紅色 = 差。總之，75% 的用戶體驗(yàn)需要滿足為給定指標(biāo)設(shè)置的閾值才能被視為“良好”。這些是閾值：

? ? ? ? ?

? ? ? ? ?

如果單擊“展開視圖”，您將看到每個(gè)指標(biāo)的分布情況。

? ? ? ? ?

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

? ? ? ? ?

? ? ? ? ?

這些數(shù)字是用顏色編碼顯示的，綠色 = 優(yōu)秀，橙色 = 需要改進(jìn)，紅色 = 差。75% 的用戶體驗(yàn)需要達(dá)到為給定指標(biāo)設(shè)置的閾值才能被視為“良好”。這些是閾值：

? ? ? ? ?

? ? ? ? ?

如果單擊“展開視圖”，您將看到每個(gè)指標(biāo)的分布情況。

? ? ? ? ?

? ? ? ? ?

最后一部分告訴您有關(guān)此數(shù)據(jù)的來源的一些信息。這些數(shù)據(jù)來自真實(shí)的用戶體驗(yàn)，是 28 天的滾動(dòng)平均值。

? ? ? ? ?

實(shí)驗(yàn)室數(shù)據(jù) ?

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

? ? ? ? ?

您會(huì)看到幾個(gè)關(guān)于性能、可訪問性、最佳實(shí)踐和 SEO 的數(shù)字。所有這些實(shí)際上只是檢查最佳實(shí)踐，但它們并沒有告訴您您在每個(gè)領(lǐng)域的表現(xiàn)如何。

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

出于本文的目的，我們將重點(diǎn)關(guān)注“性能”部分，因?yàn)檫@是 SEO 使用該工具的目的。首先，您有一個(gè)性能分?jǐn)?shù)和頁面的屏幕截圖。

? ? ? ? ?

? ? ? ? ?

您的得分介于 0 到 100 之間。當(dāng)前的分?jǐn)?shù)閾值是：

? ? ? ? ?

l優(yōu)秀：分?jǐn)?shù)為 90-100

l需要改進(jìn)：得分 50–89

l較差：分?jǐn)?shù)為 0–49

? ? ? ? ?

正如我提到的，您可能有一個(gè)很好的分?jǐn)?shù)，但仍然有一個(gè)未通過 CWV 的緩慢頁面。網(wǎng)絡(luò)條件、服務(wù)器負(fù)載、緩存和用戶設(shè)備等其他因素也會(huì)影響頁面加載時(shí)間。

? ? ? ? ?

只有 2% 的測(cè)試頁面得分為 100。得分為 50 會(huì)使您進(jìn)入測(cè)試頁面的前 25%。

? ? ? ? ?

每次運(yùn)行測(cè)試時(shí)，分?jǐn)?shù)和指標(biāo)都會(huì)發(fā)生變化。發(fā)生這種情況的原因可能是網(wǎng)絡(luò)條件、負(fù)載或?yàn)g覽器在頁面加載過程中做出不同的決定。我建議進(jìn)行三到五次測(cè)試并對(duì)結(jié)果取平均值。

? ? ? ? ?

該分?jǐn)?shù)基于計(jì)算并涉及對(duì)幾個(gè)指標(biāo)進(jìn)行加權(quán)。權(quán)重在移動(dòng)設(shè)備和桌面設(shè)備之間發(fā)生變化。這些是 Mobile 的當(dāng)前分?jǐn)?shù)，但請(qǐng)查看計(jì)算器以獲取最新信息。

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

? ? ? ? ?

最后一部分告訴您有關(guān)此數(shù)據(jù)的來源的一些信息。

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

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

? ? ? ? ?

默認(rèn)情況下，您會(huì)看到與所有指標(biāo)相關(guān)的問題。有一些按鈕，您可以在其中過濾影響您可能想要改進(jìn)的特定指標(biāo)的問題。

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

他們顯示的預(yù)估節(jié)省和改進(jìn)是不現(xiàn)實(shí)的?？赡苓€有其他障礙，因此您不會(huì)得到顯示的改進(jìn)，或者在某些情況下，如果您解決了問題，則根本不會(huì)得到任何改進(jìn)。有時(shí)，您必須解決多個(gè)問題才能真正看到改進(jìn)。

? ? ? ? ?

您可以單擊以展開任何元素。您將收到有關(guān)如何解決每個(gè)問題的一些指導(dǎo)。這些建議可能會(huì)根據(jù)正在測(cè)試的系統(tǒng)而變化。例如，我在我們的 WordPress 博客上測(cè)試了一個(gè)頁面，我看到了 WordPress 特定的指南。

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

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

? ? ? ? ?

? ? ? ? ?

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

? ? ? ? ?

批量數(shù)據(jù) ?

PageSpeed Insights 有一個(gè)很棒的 API。它允許您從 CrUX 中提取現(xiàn)場(chǎng)數(shù)據(jù)，從 Lighthouse 測(cè)試中提取實(shí)驗(yàn)室數(shù)據(jù)。您還可以批量獲取只能通過 PageSpeed Insights 訪問的頁面級(jí) CWV 數(shù)據(jù)。

工作流程 ?

對(duì)于評(píng)估和監(jiān)控，我會(huì)使用 Ahrefs來查看有問題的頁面和趨勢(shì)，以及Google Search Console (GSC)中的Core Web Vitals報(bào)告。

? ? ? ? ?

GSC 的好處是它可以存儲(chǔ)相似的 URL。對(duì)于分桶頁面，您可能會(huì)在一個(gè)系統(tǒng)或模板中工作。當(dāng)您修復(fù)問題時(shí)，您將修復(fù)該存儲(chǔ)桶中的所有頁面。

? ? ? ? ?

? ? ? ? ?

了解需要處理的頁面或模板后，您可以使用 PageSpeed Insights 的指導(dǎo)進(jìn)行改進(jìn)。

? ? ? ? ?

要檢查改進(jìn)，您可以使用 PageSpeed Insights 或在Site Audit中運(yùn)行另一個(gè)爬網(wǎng)以批量獲取數(shù)據(jù)。CWV 數(shù)據(jù)需要更長的時(shí)間才能顯示任何更改的影響，因?yàn)樗?28 天的平均值，因此請(qǐng)使用 PSI 或 Ahrefs 中的 PSI 數(shù)據(jù)來檢查您所做的更改是否改進(jìn)了實(shí)驗(yàn)室測(cè)試指標(biāo)。

? ? ? ? ?

? ? ? ? ?

翻譯作品，原作者：Patrick Stox

更多文章：

Core Web Vitals ：頁面速度現(xiàn)在對(duì) SEO 更為重要

Google SEO:如何優(yōu)化Core Web Vitals提高您的網(wǎng)站排名