之前的文章我有提到過，怎樣使用??和使用?，這樣做的目的都是為了提高網(wǎng)頁加載速度。

這么做有必要嗎？為何網(wǎng)頁加載速度對網(wǎng)站來說很重要？網(wǎng)頁加載過慢又會有哪些不利的影響？

1. 影響用戶體驗(yàn)。這一點(diǎn)是最為重要的，如果一個(gè)網(wǎng)站一直卡頓遲遲不加載顯示頁面，那么用戶幾乎不用考慮就會點(diǎn)擊右上角的“關(guān)閉”按鈕退出網(wǎng)頁瀏覽。就像是客戶進(jìn)到你的店里，看到空空如也的柜臺，你覺得他還會等著你一件一件的把商品擺上貨柜嗎，顯然不會，他只會憤而離去，轉(zhuǎn)頭去另一家店鋪。
2. 影響谷歌分析數(shù)據(jù)。一般來說，網(wǎng)頁加速流暢的網(wǎng)站會標(biāo)記更多的訪客，因?yàn)??代碼會優(yōu)先加載，在用戶瀏覽網(wǎng)頁時(shí)會實(shí)時(shí)記錄用戶在網(wǎng)頁上的行為，例如：點(diǎn)擊了下一頁、搜索了某個(gè)特定字詞、點(diǎn)擊了某個(gè)標(biāo)簽又或者是在某篇文章內(nèi)容下進(jìn)行了留言互動等。如果網(wǎng)頁加載緩慢，用戶在谷歌分析代碼觸發(fā)之前就匆匆離開關(guān)閉了網(wǎng)頁，那么這個(gè)用戶的訪問行為將不會被谷歌分析記錄，我們有可能會錯(cuò)過一位潛在用戶。

那么我的網(wǎng)頁加載速度應(yīng)該要多快才符合標(biāo)準(zhǔn)呢？

很抱歉，這個(gè)沒有具體的衡量標(biāo)準(zhǔn)，一般建議網(wǎng)頁加載時(shí)間最好不要超過三秒。

很幸運(yùn)，谷歌給我們提供了一個(gè)免費(fèi)的檢查頁面速度的工具，PageSpeed Insights，本文將介紹如何使用 PageSpeed Insights 來測試網(wǎng)站加載速度。

PageSpeed Insights是什么

PageSpeed Insights（PSI）是谷歌推出的一款免費(fèi)測速工具，它能報(bào)告網(wǎng)頁在移動設(shè)備和桌面設(shè)備上的用戶體驗(yàn)，并據(jù)此提供改進(jìn)建議。

如何進(jìn)行網(wǎng)站測速

第一步：輸入網(wǎng)站網(wǎng)址

輸入網(wǎng)址后，點(diǎn)擊“分析”，然后等待幾秒鐘，就會看到測速結(jié)果。

圖片來源：PageSpeed Insights

在上圖中我們能看到手機(jī)設(shè)備和桌面設(shè)備的性能數(shù)據(jù)，但要注意這些只是模擬測試數(shù)據(jù)，也就是估算值。

如果你的網(wǎng)站有足夠的數(shù)據(jù)，PageSpeed Insights 會根據(jù)谷歌用戶體驗(yàn)報(bào)告，使用過去 28 天的真實(shí)用戶數(shù)據(jù)來計(jì)算性能分?jǐn)?shù)。

第二步：分析測速結(jié)果

PageSpeed Insights 提供了網(wǎng)站整體性能得分，這個(gè)分?jǐn)?shù)與網(wǎng)站加載速度大致相關(guān)，但比起性能分?jǐn)?shù)，用戶更在乎的是網(wǎng)站加載時(shí)間。

我們具體來看看每個(gè)分?jǐn)?shù)的范圍：

• 0-49（紅色警告三角形）：表示網(wǎng)站整體加載緩慢；
• 50-89（黃色正方形）：表示網(wǎng)站加載速度可提升空間；
• 90-100（綠色圓形）：表示你的網(wǎng)站加載很快。

在分?jǐn)?shù)下有 6 個(gè)重要指標(biāo)，PageSpeed Insights 通過這 6 個(gè)指標(biāo)來衡量網(wǎng)站的整體性能，理想狀態(tài)下，這 6 個(gè)指標(biāo)都應(yīng)該獲得綠色（90-100）分?jǐn)?shù)。

圖片來源：PageSpeed Insights

接下來我們來解讀這 6 個(gè)指標(biāo)代表的含義：

• First Contentful Paint（首次內(nèi)容加載）：瀏覽器上頁面加載出第一條內(nèi)容所需要的時(shí)間。
• Speed Index（加載速度）：在頁面加載期間顯示內(nèi)容的速度。
• Largest Contentful Paint（最大內(nèi)容加載）：瀏覽器上頁面加載最大元素所需要的時(shí)間。
• Time to Interactive（互動時(shí)間）：頁面完全交互所需要的時(shí)間。
• Total Blocking Time（總阻塞時(shí)間）：首次內(nèi)容加載和互動時(shí)間的總和（FCP+TTI）。
• Cumulative Layout Shift（累積布局偏移）：頁面上的元素加載時(shí)偏移的程度

圖例中的 1-3 指標(biāo)都沒有達(dá)到綠色分?jǐn)?shù)，仍有改進(jìn)提升的空間，在這些指標(biāo)中，需要特別注意的是第 3 個(gè)“最大內(nèi)容加載”指標(biāo)，理想情況下，這個(gè)指標(biāo)最好在 2.5 秒或更短的時(shí)間內(nèi)。另外 Google 的研究表明，當(dāng)該指標(biāo)超過 3 秒時(shí)，網(wǎng)站的跳出率會增加 32%。

圖片來源：Think with Google

如果這 6 個(gè)指標(biāo)中出現(xiàn)紅色分?jǐn)?shù)，有可能是你的頁面上出現(xiàn)了未經(jīng)壓縮的圖像或視頻，也有可能是你的網(wǎng)站托管速度較慢，還有可能在頁面加載時(shí)存在多個(gè)元素在移動，這些都會導(dǎo)致用戶訪問體驗(yàn)不佳。一旦發(fā)現(xiàn)了這些存在的問題，那么你就應(yīng)該立即有針對性地做出調(diào)整改善。

鼠標(biāo)向下滑，能看到 PageSpeed Insights 給出的優(yōu)化建議，例如：“請縮短初始服務(wù)器響應(yīng)用時(shí)”，針對這一條給出的建議是：使用更優(yōu)化的主題背景、選擇優(yōu)化或升級服務(wù)器。

以上都是移動設(shè)備的測速，同樣的我們也可以查看桌面設(shè)備上網(wǎng)頁加載的情況和性能分?jǐn)?shù)。

相比起移動設(shè)備，桌面設(shè)備上的加載時(shí)間提速了不少，但仍舊有需要改進(jìn)的地方。