在《網站測速效能測試深入淺出教程[附15款常用網站測速工具]》一文中我們提到的其中一個網站效能測試工具就是Google PageSpeed Insights，這是前端開發經常用的線上開發工具之一。Google PageSpeed Insights可以全面檢測網站的方方面面，並進行評估打分及給出相應的建議，方便技術開發有針對性地優化網站。
對於一個追求完美的WordPress站長來說，他是期待自己的網站可以獲得更高的Google PageSpeed Insights評分，越高的評分就證明你的網站優化得越好。
今天，我們將與您分享一些提示和策略，以幫助您的WordPress網站在Google PageSpeed Insights中獲得更高的分數。
本文的核心內容包括：
#1 Google PageSpeed Insights的重要性
Google PageSpeed Insights是一款由Google開發設計的網站效能測試工具，可幫助您根據最佳優化建議，對網站執行全方位的優化。
截至2018年，速度分數現在通過Lighthouse（燈塔）計算得出，Lighthouse是為改善網頁質量而建立的開源自動化工具。 Lighthouse實際上可以檢查網站前端各項內容，例如效能，可訪問性，漸進式Web應用程式等。
Google PageSpeed Insights網站
但要記住的一件非常重要的事情是，你不應該總是過於痴迷於100滿分分數。因為對於一些網站來說，這個完美的目標幾乎是不可能的事情。比如功能非常強大複雜的主題、電商和會員網站，這些網站相對複雜很多，拿到滿分好比如登天。
我們更應該將關注的點放在網站的速度，而不是分數。 類似Pingdom，GTMetrix和Google PageSpeed Insights等測速工具的分數有時會讓您誤入歧途。 真正重要的是確保您的網站快速載入，並且感知到的效能也達到標準。 感知效能是指您的網站使用者感受到的載入速度。
此外，網站載入速度也成為搜尋引擎對網站進行評級的其中一個標準，因此，要想網站SEO優化有效果，也不能忽視這部分的操作。關於WordPress網站的SEO，你還可以關注我們推出的一系列相關的外掛：
- Smart SEO Tool – 簡單易用的WordPress部落格SEO優化外掛
- 百度搜尋推送管理WP外掛Pro版本-提升百度收錄效率
- Spider Analyser – WordPress搜尋引擎蜘蛛統計分析外掛
- 熱門關鍵詞推薦外掛Pro-WP找關鍵詞如此簡單
Google會使用PageSpeed Insights嗎？
在SEO和頁面速度排名因素或純粹的響應速度方面，Google是否使用PageSpeed Insights？谷歌網站管理員趨勢分析師加里·伊利斯（Gary Illyes）迴應說：“我會同時選擇這兩種方式。”
部分原因在於，在大多數情況下，當您的網站速度較慢時，您很可能會在Google PageSpeed Insights中收到很多警告。許多建議與它們與純響應時間的關係密切相關。它們並不總是100％相關，但加里也提到，如果你的網站速度很慢，它會影響你的排名。
谷歌在2018年進一步加強了網站載入速度對網站排名權重。之前，頁面速度排名是根據你的網站在桌面系統載入的速度來衡量的。但截至2018年7月9日，頁面速度也成為了移動搜尋的排名因素。這意味著優化您的WordPress移動裝置比以往任何時候都更重要！
本次教程我們將以WordPress預設主題Twenty Seventeen為例，並安裝了Google Analytics，Akismet，Yoast SEO等，然後使用PageSpeed Insights執行分析評測，基於評分建議項逐一優化，最終使用WordPress網站的PageSpeed Insights的桌面裝置和移動裝置均到達100分（滿分）。
雖然這是一個小型網站，但它至少可以幫助大家理解Google PageSpeed Insights的工作原理，及如何基於PageSpeed Insights建議有針對性地完成各項優化，最終讓網站獲得一個滿意的評分，最最最重要的是提升網站的載入速度。
#2 如何做到Google PageSpeed Insights測試滿分
我們的測試站點，是在安裝在Apache主機上並且使用的是WordPress預設的主題模板Twenty Seventeen Theme，網站配置了SSL及安裝了以下外掛。
- Yoast SEO
- Akismet
我們還在header.php檔案的<body>中插入谷歌統計程式碼Google Analytics。 我們所做的唯一修改就是將特色圖片新增到預設的“Hello world！”文章中。 我們通過Google PageSpeed Insights執行我們的測試網站，得到69桌面分數和58移動分數，預設分數低得可憐。 下面讓我們一起深入研究每個優化點，儘可能獲得最高的評測分數。
未做優化前Google PageSpeed Insights評測得分截圖
2.1 開啟Gzip壓縮
我們將從桌面程式優化點建議開始，因為許多優化點建議也適用於移動裝置。 我們可以看到Google PageSpeed Insights建議需要修復的第一個要點是啟用壓縮警告。
開啟壓縮建議
據谷歌稱，為了解決這個問題，我們需要啟用Gzip壓縮。 有些伺服器管理後臺提供啟用選項，否則我們必須手動執行此操作。
所有現代瀏覽器都支援並對所有HTTP請求自動協商使用Gzip壓縮。 啟用Gzip壓縮可以將傳輸的響應的大小減少多達90％，這可以顯著減少下載資源的時間，減少客戶端的資料使用量，並縮短首次呈現頁面的時間。
你可以通過幾種方式來實現Gzip壓縮。 第一個也是最簡單的一個是使用支援啟用Gzip的快取外掛。 例如，WP Rocket外掛使用mod_deflate模組在.htaccess檔案中新增Gzip壓縮規則。 W3 Total Cache外掛也可以通過效能部分設定為您啟用它。
啟用Gzip壓縮的第二種方法是編輯.htaccess檔案。 如果你的WordPress主機使用Apache伺服器，您只需將下面的程式碼新增到.htaccess檔案即可。 您可以通過FTP在WordPress站點的根目錄中找到.htaccess檔案。
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
確保將其新增到.htaccess檔案的當前內容下面。 示例如下：
新增GZIP壓縮程式碼
如果您的WordPress站點執行在NGINX伺服器上執行，只需將其新增到您的nginx.conf檔案中即可。
gzip on; gzip_disable "MSIE [1-6]\.(?!.*SV1)"; gzip_vary on; gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
如果你要檢測你的網站Gzip壓縮是否成功開啟，你可以使用varvy gzip檢測工具。以下是我們測試站點啟用Gzip壓縮後的效果截圖：
GZIP壓縮啟用狀態檢測
如果我們再次通過Google PageSpeed Insights執行我們的測試網站檢測，就可以看到Gzip壓縮開啟的警告現已消失，並且桌面裝置評測分數由69分提高到80分，移動裝置評測分數由58分提高到67分。
啟用GZIP壓縮後PageSpeed Insights得分
2.2 優化圖片體積
我們需要修復的下一個Google PageSpeed Insights建議是優化圖片的警告。 前面我們提到為WordPress主題預設的“Hello world！”文章新增了特色圖片，才會有這樣的提示。
優化圖片警告
這是一個非常重要且有用的警告。 據HTTP Archive稱，截至2018年12月，圖片平均佔網頁總體積的50％。 優化影象可能是改進WordPress網站效能的最簡單方法之一。
有幾種方法可以解決這個問題。 其中一個是使用WordPress影象優化外掛。 外掛實際上可以通過批量優化整個WordPress媒體庫，並在上傳時自動優化它們。 以下是一些流行的影象優化外掛：
這些外掛將解決圖片過大的問題，或者您也可以在上傳它們之前使用Adobe Photoshop，Gimp或Affinity Photo等工具壓縮它們。 下面是引發警告的特色圖片。 我們可以通過縮小和降低質量來預先壓縮它。 最好保持影象儘可能小。 此影象最初體積為2.32 MB，經過縮小和壓縮後，體積可以壓縮為99.38 kB。 請記住，最好上傳影象前調整為最佳尺寸及體積，而不是依賴CSS來調整影象大小。 否則這會拖慢您的網站速度。
使用Affinity Photo對影象進行壓縮
如果我們再次通過Google PageSpeed Insights執行測試網站，可以看到優化圖片警告現已消失，並且桌面裝置分數從80分提高到88分，移動裝置分數從67分提高到73分。
壓縮影象後評測分數
推薦閱讀：WordPress站長必備的圖片採集下載外掛及相簿網
2.3 移除阻塞渲染的資源
接著下來，我們需要修復的下一個Google PageSpeed Insights建議是在首次繪製頁面中移除阻塞渲染的資源JavaScript和CSS。
移除阻塞渲染的資源警告
當瀏覽器載入網頁時，JavaScript和CSS資源通常會妨礙網頁在瀏覽器下載和處理之前顯示。 在顯示任何內容之前，需要下載和處理一些資源。 但是，許多CSS和JavaScript在首次繪製頁面時是不需要的。 要為使用者提供最快的體驗，您應該嘗試移除阻塞渲染的資源。
對於移除阻塞渲染的資源Javascript，Google有三條建議：
- 如果頁面沒有很多JavaScript且比較小的情況下，你可以內聯方式來解決這個問題。 您可以使用Autoptimize等外掛內聯JavaScript。 但是，這實際上僅適用於非常小的站點。 大多數WordPress網站都會有三個以上的JavaScript，這種方法適用性一般。
- 第二種是非同步載入JavaScript。 非同步Javascript本質上是在HTML解析期間下載檔案，並將在完成下載後暫停HTML解析器執行它。
- 第三是延遲載入JavaScript。 defer屬性還在HTML解析期間下載檔案，但它僅在解析完成後執行。 此外，具有此屬性的指令碼按頁面上的外觀順序執行。 閱讀有關非同步和延遲之間差異的文章
在我們的示例中，我們將非同步地載入JavaScript。 為此，我們將使用一個名為Async JavaScript的免費外掛。 您可以從WordPress外掛庫下載它或在WordPress儀表板中的“外掛>安裝外掛”下搜尋安裝。截至撰寫本文時，它目前有8w+個有效安裝，星級評分為4.5。 本質上，該外掛利用WordPress的 wp_enqueue_script 函式將“async”或“defer”屬性新增到所有JavaScript。 開發人員還提供高階版本，允許您選擇要非同步或延遲的指令碼。
非同步載入示例
<script src="file1.js" async></script>
延遲載入示例
<script src="file1.js" defer></script>
安裝完成後，只需進入設定並啟用Async JavaScript。
非同步載入JavaScript
對於較大的網站，指令碼排除可以派上用場。 或者獲得外掛的高階版本。 在這次優化示例中我們不需要它，但是如果你有一個擁有大量JavaScript的網站，那麼簡單的將JS檔案設定為Async或Defer，可能只會得不償失。 在這種情況下，你需要對症下藥，對不同的JS指令碼分別優化。
Async exclusions
如果你不想為此使用外掛，也可以通過修改程式碼來實現。 例如將以下程式碼新增到functions.php檔案中。
/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );
我們再次通過Google PageSpeed Insights執行網站測試，可以看到阻止渲染JavaScript問題已經修復，下一步需要做的是優化CSS傳遞。
優化CSS傳遞提示
您可以看到我們需要優化的第一個CSS是Google字型（fonts.googleapis.com）。 CSS預設是阻塞渲染的資源，其中包括來自Web字型的CSS。 要解決此問題，我們將安裝免費的禁用Google字型外掛。 安裝外掛後，您的Google字型顯然會中斷。 因此，您需要訪問Google字型並手動獲取嵌入程式碼。 我們選擇Twenty Seventeen主題預設的相同字型。
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
谷歌字型嵌入
然後，您需要將其新增到footer.php檔案中，就在</ body>標記之前。 注意：這樣做會產生FOUT，這就是他們所說的無樣式內容閃爍，指的是Web 字型在下載並渲染之前，短暫顯示無樣式文字的情況。 但它也將擺脫渲染阻塞問題。 你要思考下FOUT是否為您的訪問者可接受的使用者體驗。 您還可以使用Google的Web字型載入器。
WordPress頁尾中的Google字型
我們再次通過Google PageSpeed Insights執行我們的測試網站，發現只剩下一個優化 CSS 傳送過程警告，那就是style.css檔案。
優化 CSS 傳送過程
解決此問題的最簡單方法之一是使用由Frank Goossens開發的名為Autoptimize的免費WordPress外掛。
WordPress外掛-Autoptimize
這個外掛非常輕量，不到200KB。 截至撰寫本文時，它目前有超過100萬有效安裝，其中4.5星評分。 該外掛可以幫助您連線指令碼，壓縮檔案，過期標頭，以及將樣式移動到頭部和指令碼移到頁尾等功能。 此外掛與之前使用的Async JavaScript外掛完全相容。
安裝外掛後，單擊設定並選擇“優化CSS程式碼”。然後單擊高階選項卡並啟用“聚合內聯CSS”和“內聯所有CSS”。注意，根據您正在執行此操作的主題，它可能不建議使用此方法。 對於大型網站，內聯並不適用，在這種情況下，簡單地忽略特定的Google PageSpeed Insights警告實際上會更好。 請記住，使用HTTP/2，連線有時實際上會減慢您的網站速度。
優化CSS程式碼
我們還建議啟用優化HTML程式碼選項。
優化HTML程式碼
如果我們再次通過Google PageSpeed Insights執行我們的網站，可以看到消除渲染阻塞的JavaScript和CSS警告沒有了，它還修復了Minify CSS警告。 到目前為止我們將桌面裝置分數從88分提高到92分，移動裝置分數從73分提高到89分，此刻離目標越來越近了。
JS和CSS優化後PageSpeed Insights測評結果
2.4 啟用瀏覽器快取
下一個Google PageSpeed Insights建議，我們需要解決的是網站未配置瀏覽器快取警告。實際上，我們前面寫了一篇關於瀏覽器快取文章-“如何使用外掛/無外掛優化WordPress網站瀏覽器快取”。
未使用瀏覽器快取警告
觸發瀏覽器快取警告的最常見原因是您的Web伺服器沒有適當的標頭。 在上面的螢幕截圖中，您可以看到我們所有的內部指令碼都沒有指定過期日期的警告。 在快取方面，使用了兩種主要方法：Cache-Control標頭和Expires標頭。 當Cache-Control標頭啟用客戶端快取並設定資源的max-age時，Expires標頭用於指定資源在特定時間點不再有效。
您不一定需要新增兩個標頭，因為這有點冗餘。Cache-Control是較新的並且通常是推薦的方法，但是，某些Web效能工具（如GTmetrix）仍會檢查Expires標頭。 這些都是示例，您可以根據需要更改檔案型別，過期時間等。 以下是一些選項。 我們將在本教程的WordPress網站主機上簡單地在Apache中新增expire頭。
在Nginx中新增快取控制頭
您可以通過將以下內容新增到伺服器Nginx配置檔案中新增Cache-Control標頭。
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}
在Nginx中新增Expires標頭
您可以通過將以下內容新增到伺服器Nginx配置檔案中新增Expires標頭頭。 在此示例中，您可以瞭解如何根據檔案型別指定不同的過期時間。
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
在Apache中新增快取控制頭
您可以通過將以下內容新增到Apache伺服器的.htaccess檔案中新增Cache-Control標頭。
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </filesMatch>
在Apache中新增Expires標頭
您可以通過在Apache伺服器的.htaccess檔案中新增以下內容在中新增Expires標頭。
## EXPIRES HEADER CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES HEADER CACHING ##
還記得我們之前啟用了Gzip壓縮嗎？ 下面是我們在新增過期標頭後現在的.htaccess檔案的樣子， 我們只是將它放在壓縮模組下面。
過期標頭程式碼
我們再次通過Google PageSpeed Insights執行我們的測試網站，瀏覽器快取警告只剩下一個Google Analytic指令碼。 滿諷刺的，畢竟這是你谷歌提供的指令碼。 要知道這個資源谷歌官方僅設定了2小時的快取時間，如下面的螢幕截圖所示。 谷歌之所以設定這麼短的快取時間，應該是以便於他們對指令碼程式碼更新時，客戶端能夠儘快獲取最新的版本。 但是，還是有辦法解決這個問題，那就是在本地託管Google Analytics指令碼。 請注意，Google不建議這樣做。
Google Analytics統計程式碼指令碼快取
有一個名為Complete Analytics Optimization Suite的免費小外掛，由Daan van den Bergh建立和開發，允許您在WordPress網站上本地託管Google Analytics。
WordPress外掛-CAOS
您可以從WordPress官網下載Complete Analytics Optimization Suite，也可以在WordPress儀表板中的“外掛-安裝外掛”外掛下搜尋安裝。 截至撰寫本文時，該外掛目前擁有1w+個有效安裝，獲得5星滿分好評。 該外掛允許您在本地託管您的Google AnalyticsJavaScript檔案（analytics.js），並使用WordPress函式wp_cron()保持更新。 其他功能包括能夠輕鬆匿名訪問者的IP地址，設定調整後的跳出率以及指令碼（頁首或頁尾）的位置。
只需安裝外掛，輸入您的Google Analytics跟蹤ID，外掛就會將Google Analytics的必要跟蹤程式碼新增到您的WordPress網站，下載並將analytics.js檔案儲存到您的伺服器，並使用wp_cron()中的定時任務指令碼保持更新。 我們建議將其設定為在頁尾中載入。 注意：此外掛不與其他Google Analytics統計程式碼WordPress外掛相容。
本地儲存Google Analytics指令碼程式碼
如果我們再次通過Google PageSpeed Insights執行我們的網站，可以看到關於瀏覽器快取警告沒有啦！ 並且桌面裝置和移動裝置分數分別提升到97分和96分，已經近乎完美。
瀏覽器快取警告修復後的PageSpeed Insights評分
2.5 減少伺服器響應時間
我們需要修復的下一個Google PageSpeed Insights建議是減少伺服器響應時間警告。 很多時候，這一般是由於伺服器響應時間過慢導致，即所使用的主機伺服器就那樣。因此，我們需要使用快取外掛來加快速度。本次示例採用的是KeyCDN開發的免費外掛-Cache Enabler。
WordPress快取外掛-Cache Enabler
截至撰寫本文章時，Cache Enabler擁有4萬+有效安裝，4.5星評分。 它是WordPress的輕量級快取外掛，通過生成靜態HTML檔案和WebP，提升網站載入速度。 無需任何設定，只需安裝啟用即可。 此外掛與之前使用的Async JavaScript和Autoptimize外掛完全相容。 如果您想要更快的速度，我們建議您還新增高階程式碼段來繞過PHP以檢索由WordPress Cache Enabler外掛建立的靜態HTML檔案。。
再次通過Google PageSpeed Insights執行我們的網站，可以看到Reduce伺服器響應時間警告沒有了！ 桌面裝置和移動裝置評分均快要到巔峰的99分。至此，是不是要來個擊掌？
響應時間問題修復後PageSpeed Insights評分
但要注意的是，有許多潛在因素可能會降低伺服器的響應速度：包括外掛，框架，庫，CPU或記憶體不足等原因導致資料庫查詢比較慢。
2.6 最小化JavaScript
我們需要修復的最後一個Google PageSpeed Insights建議是Minify JavaScript警告。
最小化JavaScript警告
為了解決這個問題，我們實際上將回到Autoptimize外掛設定啟用Optimize JavaScript Code選項。 由於您安裝快取外掛，因此您可能還需要在執行此操作後清除快取以檢視結果。
如果你使用Autoptimize外掛作為WordPress的優化的主要手段，推薦閱讀《WordPress網站優化外掛Autoptimize設定教程》。
優化JavaScript程式碼
最後，讓我們一起見證奇蹟的時刻來了，我們的測試網站的Insights評分已經到達“人生之顛峰”-滿分100分。
Google PageSpeed Insights桌面裝置評分做到100分
以下是移動裝置分數。 我們沒有為移動裝置做任何額外的事情。 將桌面裝置的評分做到了100分後，網站移動版本的使用者體驗分數隨之也到了100分。
Google PageSpeed Insights移動裝置評分做到100分
#3 其他PageSpeed改進要點
我們只是在本教程中針對Google PageSpeed Insights進行優化。 事實上，除了上述的要點外我們還可以做更多的事情，以提升網站載入速度：
- 刪除查詢字串
- 利用CDN加速網站
- 通過極佳的壓縮排一步優化我們的影象
- 懶載入圖片
有機會，我們也可以抽時間對這些要點逐一講解。
小結
本教程的目的是更好地解釋和理解Google PageSpeed Insights在檢測網站是給出的警告以及我們可以採取哪些措施來解決這些問題。一旦您更好地理解了這些，您就可以將這些策略應用到更大的網站。當然，對於大型網站，你可能永遠不會得到100滿分！我們應該奔著滿分的目標去做，雖然很難，但我們建議您儘可能地實施，網站速度必然會得到很大的提升。並且請記住，您網站的速度以及使用者體驗才是真正重要的，不要過於在意分數。
評論留言
脣槍舌劍 (1)
ᕕ(ᐛ)ᕗ变身!
2019.6.20 20:06
浮云，都是浮云。