Google PageSpeed Insights，這是前端開發(fā)經(jīng)常用的在線開發(fā)工具之一。Google PageSpeed Insights可以全面檢測網(wǎng)站的方方面面，并進行評估打分及給出相應(yīng)的建議，方便技術(shù)開發(fā)有針對性地優(yōu)化網(wǎng)站。
對于一個追求完美的WordPress站長來說，他是期待自己的網(wǎng)站可以獲得更高的Google PageSpeed Insights評分，越高的評分就證明你的網(wǎng)站優(yōu)化得越好。
今天，我們將與您分享一些提示和策略，以幫助您的WordPress網(wǎng)站在Google PageSpeed Insights中獲得更高的分數(shù)。
本文的核心內(nèi)容包括：
#1 Google PageSpeed Insights的重要性
#2 如何做到Google PageSpeed Insights測試滿分
2.1 開啟Gzip壓縮
2.2 優(yōu)化圖片體積
2.3 移除阻塞渲染的資源
2.4 啟用瀏覽器緩存
2.5 減少服務(wù)器響應(yīng)時間
2.6 最小化JavaScript
#3 其他PageSpeed改進要點
#1 Google PageSpeed Insights的重要性
Google PageSpeed Insights是一款由Google開發(fā)設(shè)計的網(wǎng)站性能測試工具，可幫助您根據(jù)最佳優(yōu)化建議，對網(wǎng)站執(zhí)行全方位的優(yōu)化。
截至2018年，速度分數(shù)現(xiàn)在通過Lighthouse（燈塔）計算得出，Lighthouse是為改善網(wǎng)頁質(zhì)量而創(chuàng)建的開源自動化工具。 Lighthouse實際上可以檢查網(wǎng)站前端各項內(nèi)容，例如性能，可訪問性，漸進式Web應(yīng)用程序等。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
Google PageSpeed Insights網(wǎng)站
但要記住的一件非常重要的事情是，你不應(yīng)該總是過于癡迷于100滿分分數(shù)。因為對于一些網(wǎng)站來說，這個完美的目標幾乎是不可能的事情。比如功能非常強大復(fù)雜的主題、電商和會員網(wǎng)站，這些網(wǎng)站相對復(fù)雜很多，拿到滿分好比如登天。
我們更應(yīng)該將關(guān)注的點放在網(wǎng)站的速度，而不是分數(shù)。 類似Pingdom，GTMetrix和Google PageSpeed Insights等測速工具的分數(shù)有時會讓您誤入歧途。 真正重要的是確保您的網(wǎng)站快速加載，并且感知到的性能也達到標準。 感知性能是指您的網(wǎng)站用戶感受到的加載速度。
此外，網(wǎng)站加載速度也成為搜索引擎對網(wǎng)站進行評級的其中一個標準，因此，要想網(wǎng)站SEO優(yōu)化有效果，也不能忽視這部分的操作。
Google會使用PageSpeed Insights嗎？
在SEO和頁面速度排名因素或純粹的響應(yīng)速度方面，Google是否使用PageSpeed Insights？谷歌網(wǎng)站管理員趨勢分析師加里·伊利斯（Gary Illyes）回應(yīng)說：“我會同時選擇這兩種方式?！?/p>
部分原因在于，在大多數(shù)情況下，當您的網(wǎng)站速度較慢時，您很可能會在Google PageSpeed Insights中收到很多警告。許多建議與它們與純響應(yīng)時間的關(guān)系密切相關(guān)。它們并不總是100％相關(guān)，但加里也提到，如果你的網(wǎng)站速度很慢，它會影響你的排名。
谷歌在2018年進一步加強了網(wǎng)站加載速度對網(wǎng)站排名權(quán)重。之前，頁面速度排名是根據(jù)你的網(wǎng)站在桌面系統(tǒng)加載的速度來衡量的。但截至2018年7月9日，頁面速度也成為了移動搜索的排名因素。這意味著優(yōu)化您的WordPress移動設(shè)備比以往任何時候都更重要！
本次教程我們將以WordPress默認主題Twenty Seventeen為例，并安裝了Google Analytics，Akismet，Yoast SEO等，然后使用PageSpeed Insights執(zhí)行分析評測，基于評分建議項逐一優(yōu)化，最終使用WordPress網(wǎng)站的PageSpeed Insights的桌面設(shè)備和移動設(shè)備均到達100分（滿分）。
雖然這是一個小型網(wǎng)站，但它至少可以幫助大家理解Google PageSpeed Insights的工作原理，及如何基于PageSpeed Insights建議有針對性地完成各項優(yōu)化，最終讓網(wǎng)站獲得一個滿意的評分，最最最重要的是提升網(wǎng)站的加載速度。
#2 如何做到Google PageSpeed Insights測試滿分
我們的測試站點，是在安裝在Apache主機上并且使用的是WordPress默認的主題模板Twenty Seventeen Theme，網(wǎng)站配置了SSL及安裝了以下插件。
Yoast SEO
Akismet
我們還在header.php文件的<body>中插入谷歌統(tǒng)計代碼Google Analytics。 我們所做的唯一修改就是將特色圖片添加到默認的“Hello world！”文章中。 我們通過Google PageSpeed Insights運行我們的測試網(wǎng)站，得到69桌面分數(shù)和58移動分數(shù)，默認分數(shù)低得可憐。 下面讓我們一起深入研究每個優(yōu)化點，盡可能獲得最高的評測分數(shù)。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
未做優(yōu)化前Google PageSpeed Insights評測得分截圖
2.1 開啟Gzip壓縮
我們將從桌面程序優(yōu)化點建議開始，因為許多優(yōu)化點建議也適用于移動設(shè)備。 我們可以看到Google PageSpeed Insights建議需要修復(fù)的第一個要點是啟用壓縮警告。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
開啟壓縮建議
據(jù)谷歌稱，為了解決這個問題，我們需要啟用Gzip壓縮。 有些服務(wù)器管理后臺提供啟用選項，否則我們必須手動執(zhí)行此操作。
所有現(xiàn)代瀏覽器都支持并對所有HTTP請求自動協(xié)商使用Gzip壓縮。 啟用Gzip壓縮可以將傳輸?shù)捻憫?yīng)的大小減少多達90％，這可以顯著減少下載資源的時間，減少客戶端的數(shù)據(jù)使用量，并縮短首次呈現(xiàn)頁面的時間。
你可以通過幾種方式來實現(xiàn)Gzip壓縮。 第一個也是最簡單的一個是使用支持啟用Gzip的緩存插件。 例如，WP Rocket插件使用mod_deflate模塊在.htaccess文件中添加Gzip壓縮規(guī)則。 W3 Total Cache插件也可以通過性能部分設(shè)置為您啟用它。
啟用Gzip壓縮的第二種方法是編輯.htaccess文件。 如果你的WordPress主機使用Apache服務(wù)器，您只需將下面的代碼添加到.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文件的當前內(nèi)容下面。 示例如下：
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
添加GZIP壓縮代碼
如果您的WordPress站點運行在NGINX服務(wù)器上運行，只需將其添加到您的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;
如果你要檢測你的網(wǎng)站Gzip壓縮是否成功開啟，你可以使用varvy gzip檢測工具。以下是我們測試站點啟用Gzip壓縮后的效果截圖：
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
GZIP壓縮啟用狀態(tài)檢測
如果我們再次通過Google PageSpeed Insights運行我們的測試網(wǎng)站檢測，就可以看到Gzip壓縮開啟的警告現(xiàn)已消失，并且桌面設(shè)備評測分數(shù)由69分提高到80分，移動設(shè)備評測分數(shù)由58分提高到67分。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
啟用GZIP壓縮后PageSpeed Insights得分
2.2 優(yōu)化圖片體積
我們需要修復(fù)的下一個Google PageSpeed Insights建議是優(yōu)化圖片的警告。 前面我們提到為WordPress主題默認的“Hello world！”文章添加了特色圖片，才會有這樣的提示。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
優(yōu)化圖片警告
這是一個非常重要且有用的警告。 據(jù)HTTP Archive稱，截至2018年12月，圖片平均占網(wǎng)頁總體積的50％。 優(yōu)化圖像可能是改進WordPress網(wǎng)站性能的最簡單方法之一。
有幾種方法可以解決這個問題。 其中一個是使用WordPress圖像優(yōu)化插件。 插件實際上可以通過批量優(yōu)化整個WordPress媒體庫，并在上傳時自動優(yōu)化它們。 以下是一些流行的圖像優(yōu)化插件：
Imagify Image Optimizer
Optimus Image Optimizer
ShortPixel Image Optimizer
WP Smush
TinyPNG
這些插件將解決圖片過大的問題，或者您也可以在上傳它們之前使用Adobe Photoshop，Gimp或Affinity Photo等工具壓縮它們。 下面是引發(fā)警告的特色圖片。 我們可以通過縮小和降低質(zhì)量來預(yù)先壓縮它。 最好保持圖像盡可能小。 此圖像最初體積為2.32 MB，經(jīng)過縮小和壓縮后，體積可以壓縮為99.38 kB。 請記住，最好上傳圖像前調(diào)整為最佳尺寸及體積，而不是依賴CSS來調(diào)整圖像大小。 否則這會拖慢您的網(wǎng)站速度。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
使用Affinity Photo對圖像進行壓縮
如果我們再次通過Google PageSpeed Insights運行測試網(wǎng)站，可以看到優(yōu)化圖片警告現(xiàn)已消失，并且桌面設(shè)備分數(shù)從80分提高到88分，移動設(shè)備分數(shù)從67分提高到73分。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
壓縮圖像后評測分數(shù)
2.3 移除阻塞渲染的資源
接著下來，我們需要修復(fù)的下一個Google PageSpeed Insights建議是在首次繪制頁面中移除阻塞渲染的資源JavaScript和CSS。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
移除阻塞渲染的資源警告
當瀏覽器加載網(wǎng)頁時，JavaScript和CSS資源通常會妨礙網(wǎng)頁在瀏覽器下載和處理之前顯示。 在顯示任何內(nèi)容之前，需要下載和處理一些資源。 但是，許多CSS和JavaScript在首次繪制頁面時是不需要的。 要為用戶提供最快的體驗，您應(yīng)該嘗試移除阻塞渲染的資源。
對于移除阻塞渲染的資源Javascript，Google有三條建議：
如果頁面沒有很多JavaScript且比較小的情況下，你可以內(nèi)聯(lián)方式來解決這個問題。 您可以使用Autoptimize等插件內(nèi)聯(lián)JavaScript。 但是，這實際上僅適用于非常小的站點。 大多數(shù)WordPress網(wǎng)站都會有三個以上的JavaScript，這種方法適用性一般。
第二種是異步加載JavaScript。 異步Javascript本質(zhì)上是在HTML解析期間下載文件，并將在完成下載后暫停HTML解析器執(zhí)行它。
第三是延遲加載JavaScript。 defer屬性還在HTML解析期間下載文件，但它僅在解析完成后執(zhí)行。 此外，具有此屬性的腳本按頁面上的外觀順序執(zhí)行。 閱讀有關(guān)異步和延遲之間差異的文章
在我們的示例中，我們將異步地加載JavaScript。 為此，我們將使用一個名為Async JavaScript的免費插件。 您可以從WordPress插件庫下載它或在WordPress儀表板中的“插件>安裝插件”下搜索安裝。截至撰寫本文時，它目前有8w+個有效安裝，星級評分為4.5。 本質(zhì)上，該插件利用WordPress的 wp_enqueue_script 函數(shù)將“async”或“defer”屬性添加到所有JavaScript。 開發(fā)人員還提供高級版本，允許您選擇要異步或延遲的腳本。
異步加載示例<script src="file1.js" async></script>
延遲加載示例<script src="file1.js" defer></script>
安裝完成后，只需進入設(shè)置并啟用Async JavaScript。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
異步加載JavaScript
對于較大的網(wǎng)站，腳本排除可以派上用場。 或者獲得插件的高級版本。 在這次優(yōu)化示例中我們不需要它，但是如果你有一個擁有大量JavaScript的網(wǎng)站，那么簡單的將JS文件設(shè)置為Async或Defer，可能只會得不償失。 在這種情況下，你需要對癥下藥，對不同的JS腳本分別優(yōu)化。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
Async exclusions
如果你不想為此使用插件，也可以通過修改代碼來實現(xiàn)。 例如將以下代碼添加到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運行網(wǎng)站測試，可以看到阻止渲染JavaScript問題已經(jīng)修復(fù)，下一步需要做的是優(yōu)化CSS傳遞。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
優(yōu)化CSS傳遞提示
您可以看到我們需要優(yōu)化的第一個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">
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
谷歌字體嵌入
然后，您需要將其添加到footer.php文件中，就在</ body>標記之前。 注意：這樣做會產(chǎn)生FOUT，這就是他們所說的無樣式內(nèi)容閃爍，指的是Web 字體在下載并渲染之前，短暫顯示無樣式文本的情況。 但它也將擺脫渲染阻塞問題。 你要思考下FOUT是否為您的訪問者可接受的用戶體驗。 您還可以使用Google的Web字體加載器。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
WordPress頁腳中的Google字體
我們再次通過Google PageSpeed Insights運行我們的測試網(wǎng)站，發(fā)現(xiàn)只剩下一個優(yōu)化 CSS 發(fā)送過程警告，那就是style.css文件。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
優(yōu)化 CSS 發(fā)送過程
解決此問題的最簡單方法之一是使用由Frank Goossens開發(fā)的名為Autoptimize的免費WordPress插件。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
WordPress插件-Autoptimize
這個插件非常輕量，不到200KB。 截至撰寫本文時，它目前有超過100萬有效安裝，其中4.5星評分。 該插件可以幫助您連接腳本，壓縮文件，過期標頭，以及將樣式移動到頭部和腳本移到頁腳等功能。 此插件與之前使用的Async JavaScript插件完全兼容。
安裝插件后，單擊設(shè)置并選擇“優(yōu)化CSS代碼”。然后單擊高級選項卡并啟用“聚合內(nèi)聯(lián)CSS”和“內(nèi)聯(lián)所有CSS”。注意，根據(jù)您正在執(zhí)行此操作的主題，它可能不建議使用此方法。 對于大型網(wǎng)站，內(nèi)聯(lián)并不適用，在這種情況下，簡單地忽略特定的Google PageSpeed Insights警告實際上會更好。 請記住，使用HTTP/2，連接有時實際上會減慢您的網(wǎng)站速度。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
優(yōu)化CSS代碼
我們還建議啟用優(yōu)化HTML代碼選項。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
優(yōu)化HTML代碼
如果我們再次通過Google PageSpeed Insights運行我們的網(wǎng)站，可以看到消除渲染阻塞的JavaScript和CSS警告沒有了，它還修復(fù)了Minify CSS警告。 到目前為止我們將桌面設(shè)備分數(shù)從88分提高到92分，移動設(shè)備分數(shù)從73分提高到89分，此刻離目標越來越近了。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
JS和CSS優(yōu)化后PageSpeed Insights測評結(jié)果
2.4 啟用瀏覽器緩存
下一個Google PageSpeed Insights建議，我們需要解決的是網(wǎng)站未配置瀏覽器緩存警告。實際上，我們前面寫了一篇關(guān)于瀏覽器緩存文章-“如何使用插件/無插件優(yōu)化WordPress網(wǎng)站瀏覽器緩存”。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
未使用瀏覽器緩存警告
觸發(fā)瀏覽器緩存警告的最常見原因是您的Web服務(wù)器沒有適當?shù)臉祟^。 在上面的屏幕截圖中，您可以看到我們所有的內(nèi)部腳本都沒有指定過期日期的警告。 在緩存方面，使用了兩種主要方法：Cache-Control標頭和Expires標頭。 當Cache-Control標頭啟用客戶端緩存并設(shè)置資源的max-age時，Expires標頭用于指定資源在特定時間點不再有效。
您不一定需要添加兩個標頭，因為這有點冗余。Cache-Control是較新的并且通常是推薦的方法，但是，某些Web性能工具（如GTmetrix）仍會檢查Expires標頭。 這些都是示例，您可以根據(jù)需要更改文件類型，過期時間等。 以下是一些選項。 我們將在本教程的WordPress網(wǎng)站主機上簡單地在Apache中添加expire頭。
在Nginx中添加緩存控制頭您可以通過將以下內(nèi)容添加到服務(wù)器Nginx配置文件中添加Cache-Control標頭。location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {expires 2d;add_header Cache-Control "public, no-transform";}
在Nginx中添加Expires標頭您可以通過將以下內(nèi)容添加到服務(wù)器Nginx配置文件中添加Expires標頭頭。 在此示例中，您可以了解如何根據(jù)文件類型指定不同的過期時間。location ~* \.(jpg|jpeg|gif|png)$ {expires 365d;}location ~* \.(pdf|css|html|js|swf)$ {expires 2d;}
在Apache中添加緩存控制頭您可以通過將以下內(nèi)容添加到Apache服務(wù)器的.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服務(wù)器的.htaccess文件中添加以下內(nèi)容在中添加Expires標頭。## EXPIRES HEADER CACHING ##<IfModule mod_expires.c>ExpiresActive OnExpiresByType 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壓縮嗎？ 下面是我們在添加過期標頭后現(xiàn)在的.htaccess文件的樣子， 我們只是將它放在壓縮模塊下面。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
過期標頭代碼
我們再次通過Google PageSpeed Insights運行我們的測試網(wǎng)站，瀏覽器緩存警告只剩下一個Google Analytic腳本。 滿諷刺的，畢竟這是你谷歌提供的腳本。 要知道這個資源谷歌官方僅設(shè)置了2小時的緩存時間，如下面的屏幕截圖所示。 谷歌之所以設(shè)置這么短的緩存時間，應(yīng)該是以便于他們對腳本代碼更新時，客戶端能夠盡快獲取最新的版本。 但是，還是有辦法解決這個問題，那就是在本地托管Google Analytics腳本。 請注意，Google不建議這樣做。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
Google Analytics統(tǒng)計代碼腳本緩存
有一個名為Complete Analytics Optimization Suite的免費小插件，由Daan van den Bergh創(chuàng)建和開發(fā)，允許您在WordPress網(wǎng)站上本地托管Google Analytics。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
WordPress插件-CAOS
您可以從WordPress官網(wǎng)下載Complete Analytics Optimization Suite，也可以在WordPress儀表板中的“插件-安裝插件”插件下搜索安裝。 截至撰寫本文時，該插件目前擁有1w+個有效安裝，獲得5星滿分好評。 該插件允許您在本地托管您的Google AnalyticsJavaScript文件（analytics.js），并使用WordPress函數(shù)wp_cron()保持更新。 其他功能包括能夠輕松匿名訪問者的IP地址，設(shè)置調(diào)整后的跳出率以及腳本（頁眉或頁腳）的位置。
只需安裝插件，輸入您的Google Analytics跟蹤ID，插件就會將Google Analytics的必要跟蹤代碼添加到您的WordPress網(wǎng)站，下載并將analytics.js文件保存到您的服務(wù)器，并使用wp_cron()中的定時任務(wù)腳本保持更新。 我們建議將其設(shè)置為在頁腳中加載。 注意：此插件不與其他Google Analytics統(tǒng)計代碼WordPress插件兼容。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
本地存儲Google Analytics腳本代碼
如果我們再次通過Google PageSpeed Insights運行我們的網(wǎng)站，可以看到關(guān)于瀏覽器緩存警告沒有啦！ 并且桌面設(shè)備和移動設(shè)備分數(shù)分別提升到97分和96分，已經(jīng)近乎完美。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
瀏覽器緩存警告修復(fù)后的PageSpeed Insights評分
2.5 減少服務(wù)器響應(yīng)時間
我們需要修復(fù)的下一個Google PageSpeed Insights建議是減少服務(wù)器響應(yīng)時間警告。 很多時候，這一般是由于服務(wù)器響應(yīng)時間過慢導(dǎo)致，即所使用的主機服務(wù)器就那樣。因此，我們需要使用緩存插件來加快速度。本次示例采用的是KeyCDN開發(fā)的免費插件-Cache Enabler。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
WordPress緩存插件-Cache Enabler
截至撰寫本文章時，Cache Enabler擁有4萬+有效安裝，4.5星評分。 它是WordPress的輕量級緩存插件，通過生成靜態(tài)HTML文件和WebP，提升網(wǎng)站加載速度。 無需任何設(shè)置，只需安裝啟用即可。 此插件與之前使用的Async JavaScript和Autoptimize插件完全兼容。 如果您想要更快的速度，我們建議您還添加高級代碼段來繞過PHP以檢索由WordPress Cache Enabler插件創(chuàng)建的靜態(tài)HTML文件。。
再次通過Google PageSpeed Insights運行我們的網(wǎng)站，可以看到Reduce服務(wù)器響應(yīng)時間警告沒有了！ 桌面設(shè)備和移動設(shè)備評分均快要到巔峰的99分。至此，是不是要來個擊掌？
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
響應(yīng)時間問題修復(fù)后PageSpeed Insights評分
但要注意的是，有許多潛在因素可能會降低服務(wù)器的響應(yīng)速度：包括插件，框架，庫，CPU或內(nèi)存不足等原因?qū)е聰?shù)據(jù)庫查詢比較慢。
2.6 最小化JavaScript
我們需要修復(fù)的最后一個Google PageSpeed Insights建議是Minify JavaScript警告。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
最小化JavaScript警告
為了解決這個問題，我們實際上將回到Autoptimize插件設(shè)置啟用Optimize JavaScript Code選項。 由于您安裝緩存插件，因此您可能還需要在執(zhí)行此操作后清除緩存以查看結(jié)果。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
優(yōu)化JavaScript代碼
最后，讓我們一起見證奇跡的時刻來了，我們的測試網(wǎng)站的Insights評分已經(jīng)到達“人生之顛峰”-滿分100分。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
Google PageSpeed Insights桌面設(shè)備評分做到100分
以下是移動設(shè)備分數(shù)。 我們沒有為移動設(shè)備做任何額外的事情。 將桌面設(shè)備的評分做到了100分后，網(wǎng)站移動版本的用戶體驗分數(shù)隨之也到了100分。
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
Google PageSpeed Insights移動設(shè)備評分做到100分
#3 其他PageSpeed改進要點
我們只是在本教程中針對Google PageSpeed Insights進行優(yōu)化。 事實上，除了上述的要點外我們還可以做更多的事情，以提升網(wǎng)站加載速度：
刪除查詢字符串
利用CDN加速網(wǎng)站
通過極佳的壓縮進一步優(yōu)化我們的圖像
懶加載圖片
有機會，我們也可以抽時間對這些要點逐一講解。
小結(jié)
本教程的目的是更好地解釋和理解Google PageSpeed Insights在檢測網(wǎng)站是給出的警告以及我們可以采取哪些措施來解決這些問題。一旦您更好地理解了這些，您就可以將這些策略應(yīng)用到更大的網(wǎng)站。當然，對于大型網(wǎng)站，你可能永遠不會得到100滿分！我們應(yīng)該奔著滿分的目標去做，雖然很難，但我們建議您盡可能地實施，網(wǎng)站速度必然會得到很大的提升。并且請記住，您網(wǎng)站的速度以及用戶體驗才是真正重要的，不要過于在意分數(shù)。
閩公網(wǎng)安備 35010202001226號
