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