如何使用 Pagespeed Insights 通過 Google 速度測試
已發表: 2022-12-03
谁愿意等待很長時間才能加載頁面？ 尤其是在手機上。 良好的 Google 速度測試分數對您的網站至關重要。
頁面速度和 Core Web Vitals 在今天至關重要，沒有理由讓頁面或網站加載時間變慢，尤其是 WordPress 網站。
如果使用網站速度測試，您網站的平均加載時間超過三到五秒，那麼您正在失去流量。 你的跳出率會很高，因為讀者不會等著看白屏。
網站性能是一個至關重要的 SEO 因素，它將幫助您提高搜索引擎排名和轉化率。 事實上，谷歌現在有一個 Core Web Vitals 移動優先優先級來對關鍵字和頁面進行排名。
如何確保您的博客與時俱進
許多因素會影響速度測試的測試結果。
提供速度測試的互聯網服務因國家/地區甚至城市而異。
如果您測試過您的互聯網連接，您就會知道下載和上傳速度取決於您的服務提供商以及檢查您的互聯網和 Wi-Fi 連接的效率。
但是，通過使用 Pagespeed Insights 的 Google 速度測試，您可以大致了解您的下載速度和網站訪問者的網站性能。
沒有必要認為獲得 100 總是主要目標。 您可能會浪費大量時間來追求 Web 性能的完美。 但是獲得綠色分數相對容易，這意味著您的網站表現良好。
Just Publishing Advice 有很多內置功能、小部件和圖像，但在網站速度方面仍然取得了很好的成績。 這是其站點性能的快速瀏覽。
移動分數通常會低一點，因為如果您不使用下一代格式的圖像，谷歌會降低結果。
目前，這對任何博客來說都是一項非常艱鉅的任務，因為它需要用 JPEG 2000、JPEG XR 或 WebP 圖像文件替換您網站上的每張圖像。 對於大多數博主來說，可以忽略這個警告，繼續使用JPEG和PNG圖片文件。
如何測試您的網站速度性能
Google 的速度測試為您提供了一個很好的網站速度近似測量值。
您還可以在 Google Analytics 中查看平均頁面加載時間。 但它不會為您提供詳細分析網站性能所需的信息。
您需要更好的 SEO 工具來完成這項工作。
如果您的實驗室數據全部為綠色，則沒有問題。 但是，如果您的評級為橙色或紅色，則需要採取一些措施。
根據您獲得的流量，您可能會或可能不會看到您的 Core Web Vitals 評估。
這測量來自 Chrome 瀏覽器的真實用戶速度數據。
如果您有足夠的流量來生成報告，這就是通過或失敗測試。
這些報告為您提供有關可以在哪些方面改進站點性能的指導。
但是谷歌頁面速度測試工具並不能給你太多幫助來追踪和修復問題。
尋找解決問題的方法
檢查站點速度的更好方法是使用 GTMetrix。
它是開源的，使用 Google Pagespeed 評分和 Yahoo 的 YSlow，它為您提供的信息比 Google 多得多。
當您進行性能監控和測量速度時，您需要檢查兩個時間。
雖然大多數測試服務使用滿載時間來衡量站點性能，但這並不是最重要的統計數據。
網站速度最準確的真實世界衡量標準是文檔對像模型 (DOM) 加載時間。
當網頁對用戶有效時，這是站點加載過程中的點。
對我來說，這是衡量網頁真實速度時最重要的統計數據。
您可以在下圖中看到，完全加載時間為 1.9 秒，而 DOM 加載時間僅為 1.3 秒。
這是下面的另一個視圖。 箭頭標記的紅線是 DOM 加載點。
您可以看到第一個用戶視圖中不需要的元素稍後加載。
稍後加載的元素通常是延遲加載的圖像和延遲加載的 javascript 文件，以幫助您的頁面更好地執行。
每當您檢查您的網站時，請始終密切關注您的 DOM 加載時間，因為它可以更準確地衡量您的網站對用戶的速度。
此外，運行測試兩到三次，因為互聯網速度每分鐘都不同。
你可以通過平均一個小時左右甚至更長時間的結果來獲得更好的想法。
所有 Internet 速度測試都有這種自然變化，所以不要擔心隨機得到一個不好的結果。
您也可以查看其他速度測試站點。
如果您的網站沒有獲得 Google 和 GTMetrix 的綠色評級，這裡有 11 種簡單、快速和容易的方法可以解決問題並讓您的網站訪問者和搜索引擎滿意。
1.首先，清理側邊欄的雜亂
你應該做的第一件事是檢查你的側邊欄。 您需要所有這些小部件和廣告嗎？ 事實上，你真的需要側邊欄嗎？
您應該將您的頁面視為主要房地產。
有多少有價值的區域浪費在您的網站上，這些元素幾乎沒有真正的用途並減慢了您的網站速度？
一個雜亂的網頁也很難閱讀，因為有太多的干擾。
大多數側邊欄元素都會提高加載速度，因此可以刪除的越多越好。
2. 避免依賴於外部網站的頁面內容
放慢網頁速度和未通過 Google 速度測試的最嚴重罪犯之一是 Facebook Like 按鈕。
在頁面加載之前，您的頁面必須等待 Facebook。 這是大多數社交媒體小部件和共享按鈕的常見問題。
有些可能會使您的頁面加載時間增加兩秒或更長時間。
如果您需要社交媒體共享，請尋找輕量級插件。
其他可能會降低您網站元素速度的互聯網服務包括亞馬遜廣告和小部件以及大型橫幅谷歌廣告。
如果您有 Google Adsense，請嘗試使用文章內嵌廣告而不是大橫幅廣告，並將您的廣告平衡設置為 70-80% 左右。
與您可能讀到的有關 Adsense 的內容相反，如果您使用文章內嵌廣告，網站上的負載不會很大。
這是我們網站上的一個頁面，其中包含由 GTmetrix 測量的 Google Ads。
對加載時間的影響很小。
對於兩個廣告，完全加載時間僅需兩秒多一點，DOM 加載時間為 1.6 秒。
此外，廣告加載較晚，這意味著頁面在呈現之前沒有等待 Google。
3. 檢查慢速 javascript 文件
您網站上的每個元素都需要時間來加載。
用大量插件、小部件和附加組件填充您的站點會產生巨大的速度成本。
這是一個真正需要緊急關注的網站的 GTMetrix 評估。 在 12.4 秒內加載頁面在今天已經很糟糕了。
您可以使用 GTMetrix 定位每一個拖慢您網站速度的元素。
單擊每個 GET 旁邊的 + 號，找出導致您網站變慢的原因以及您需要修復、刪除或優化的內容。
通過採取三個非常簡單的措施，可以快速改進上述網站。
以下三點將解釋添加緩存、縮小和聚合 CSS 和 Javascript，以及延遲加載圖像。
下面推薦的所有三個插件都是免費的。
4.安裝W3 Total Cache
有很多非常好的 WordPress 緩存插件，包括 WP Super Cache 和 WP Fastest Cache。
但我已經在我所有的網站上使用 W3 Total Cache 十多年了。
您可以將許多設置與所有這些插件一起使用以利用瀏覽器緩存，但您只需要設置和使用兩個。
以下是 Total Cache 的設置。 但它們對於所有緩存插件都是相似的。
您只需要激活瀏覽器和頁面緩存。
這兩個設置將通過緩存不會更改的網站元素（例如頁眉、頁腳、側邊欄元素和菜單）來加速您的網站。
5.安裝自動優化
大多數緩存插件還可以縮小和聚合 Javascript 和 CSS。
雖然它們都工作得很好，但有些設置起來可能非常複雜。
我使用 Autoptimize 來完成這項工作，因為它更快、更容易設置並且效率更高。 事實上，您可以在不到一分鐘的時間內完成設置。
它所做的是減少所有 CSS 和 Javascript 文件的大小，然後將它們聚合成一個 CSS 文件和一個 Javascript 文件。
然後加載這兩個文件，這樣它們就不會呈現阻塞，這通常是某些網站的谷歌速度測試的問題。
縮小和聚合會對您的網站速度產生巨大影響。
這是我用於所有網站的設置。
Autoptimize 的另一個額外好處是支持非常棒。
6.安裝a3延遲加載
當用戶訪問您的網站時，網頁上的所有圖像都需要加載，然後您的頁面才能激活並可供訪問者使用。
通過使用延遲加載，所有未出現在用戶屏幕上的圖像僅在滾動時加載。
這樣做會對您的站點速度產生巨大影響，因為您的圖像將在 DOM 完全加載時間後加載。
在決定使用 a3 Lazy Load 之前，我嘗試了幾個不同的插件。 它以性能和易用性取勝。
安裝後，您可以使用默認設置，也可以進行一些調整。
該插件將延遲加載您所有的圖像、視頻和 iFrame。
7. 安裝 WP Rocket
如果你想要一個多合一的選項來取代上面的三個免費選項，WP Rocket 可以做任何事情甚至更多。
無需使用和設置三個插件，您可以使用 WP Rocket 設置頁面和瀏覽器緩存，最小化 Javascript 和 CSS 以及延遲加載圖像。
它還可以優化您的數據庫，並提供與 Cloudflare 的集成。
WP Rocket 是一種經濟的一體式解決方案，可讓您在幾分鐘內輕鬆打造閃電般的網站。
8. 調整圖片大小
大圖像不會降低網站速度。 但是大小不適合網頁的圖像會大大降低您的網站速度。
在上傳圖片之前，您應該始終將圖片大小調整到您需要的大小。
如果您想要全寬圖像，則應將其調整為您博客頁面的寬度。
這個網站有 750 像素寬，有一個 300 像素的側邊欄。 任何寬度超過 750 像素的圖像都會降低網站速度。
但切勿在媒體詳細信息框中即時調整圖像的大小。 它不會減少您的頁面大小。
如您所見，這張圖片的寬度為 1218 像素。 選擇大尺寸將使圖像適合。
但實際上，該頁面將加載 1218 像素的全尺寸圖像並降低網站速度。
切勿使用 WordPress 中的圖像詳細信息框來懶惰地調整圖像大小。
上傳前請務必調整圖片大小，因此完整尺寸是圖片在頁面上的實際尺寸。
9.優化圖片
Smush 是一個流行的插件，用於通過有損壓縮來減少圖像。 我用的是免費版，效果很好。
但是，在將圖像上傳到我的任何網站之前，我都會採取額外的步驟。 我使用一個名為 ImageOptim 的小型桌面應用程序。
如您所見，它有損地將圖像減少了大約 80%。
不幸的是，它僅適用於 Mac 用戶。 如果您是 Windows 用戶，您可以使用在線圖像優化器來獲得相同的結果。
您還可以閱讀有關如何縮小圖像的早期文章。
10. 使用 Cloudflare CDN
您需要使用內容分發網絡 (CDN) 嗎？
這取決於。 CDN 將您的靜態文件存儲在世界各地的服務器上，以幫助您的網站加載速度更快一些。 如果您的網站訪問者離您很遠，它會有所幫助。
但是，如果您的網站獲得的主要是本地流量，那將無濟於事。
Just Publishing Advice 位於歐洲，但很大一部分流量來自美國。 所以使用 CDN 是有意義的。
例如，如果您的站點託管在澳大利亞，並且您從英國和美國獲得大量流量，您可能需要考慮使用 CDN。
Cloudflare 流行、高效且免費。 所以這是一個不錯的選擇。
但是，您確實需要一點技術能力才能將其部署到您的站點上。
您可以在我們的操作指南文章中閱讀有關使用 WordPress 設置 Cloudflare 的更多信息。
11.每週檢查一次
使用上述措施改進網站後，您應該定期檢查。
博客上的事情總是在變化，所以關注你的表現是值得的。
大多數時候您將使用 Pagespeed Insights 和 GTMetrix。
但是，您還可以進行一項免費的網站速度測試，以檢查您的網站在全球 25 個地點的性能。
Dot-Com Tools 實時測試您的網站速度，以便您了解您的網站評價如何。
如果您正在考慮 CDN 是否值得您使用，它是一個非常好的測試工具和指南。
測試時，請記住 Google 建議最大完全加載頁面速度為 3 秒。
使用 WordPress，如果您使用本文中的優化建議，這很容易實現。
概括
您是否需要執行本指南中列出的所有操作？
就速度而言，開箱即用的WordPress 通常表現得很好。
但是，如果您使用緩慢的主題並添加大量插件並使用大圖像，那麼是的，如果您的網站加載速度很差，您應該考慮做一些工作。
另一個原因可能是主機服務器不可靠或速度慢。 如果您需要更換供應商，一個快速的主機每月只需花費幾美元。
如果您在 Google 速度測試中得分為紅色，那麼您肯定需要緊急做一些工作。
一個技巧是激活默認的 WordPress 主題，如二十十七，然後再次測試。 大多數主題現在都是響應式的，但一些較舊的主題可能會導致網站速度變慢。
如果您的主題沒問題，那麼改進上圖中的網站的首要任務是：
1.安裝緩存插件。
2.安裝自動優化
3.安裝懶加載器
採取這三個步驟，您的網站性能將立即得到改善。
對於您的圖像，安裝 Smush 然後進行批量優化也會有很大幫助。
沒有理由擁有一個緩慢的 WordPress 網站而無法通過 Google 速度測試。
如果您部署本文中列出的十個步驟，您的網站將輕鬆通過移動和桌面的 Pagespeed Insight 測試。