Autoptimize是一個免費的WordPress優化外掛。除了HTML，CSS和JavaScript優化之外，Autoptimize還包括針對WordPress網站其他方面的優化功能。
在本文中，我們將分享Autoptimize外掛設定教程，以幫助站長提高WordPress網站的效能和頁面載入速度。
在深入探討Autoptimize外掛設定之前，讓我們先了解下Autoptimize之所以成為眾多站長選擇的優化外掛的三個原因。
- Autoptimize的免費版本擁有優化你的WordPress網站的完整功能集。
- Autoptimize嚴格來說是一個優化外掛，不執行任何HTML頁面快取。這意味著它與所有Web主機相容，甚至包括具有自定義頁面快取配置的Web主機。
- Autoptimize在WordPress外掛市場有超過一百萬的啟用安裝，並持續更新（釋出新功能及修復bug）新功能。
HTML，CSS和JavaScript是Autoptimize的基礎。與其他優化外掛一樣，深入瞭解Autoptimize廣泛的功能集和設定可能是一項艱鉅的任務。為了使事情變得簡單，我們已經整合了最佳的“Autoptimize”設定，以提高您網站的效能。
JavaScript選項設定
Autoptimize之JavaScript優化項.
（1）Optimize JavaScript Code（JavaScript程式碼優化）
我們建議啟用此選項。啟用“optimize JavaScript code”後，Autoptimize將最小化您的JavaScript檔案。
（2）Aggregate JS Files（JS檔案合併）
啟用Autoptimize外掛的“aggregate JS files”選項，會將網站所有JavaScript檔案合併為一個檔案。過去，合併JS和CSS檔案是WordPress優化的關鍵一步。但需要注意的是，現在很多伺服器提供商使用支援並行下載和多路複用的HTTP/2伺服器 -這意味著合併檔案不再像以前那樣重要，因為HTTP/2允許同時下載多個檔案。話雖如此，聚合CSS和JS檔案仍然可能會提升某些型別的WordPress網站的速度，因此我們建議在啟用和禁用此選項的情況下測試您的頁面速度，再決定是否啟用該選項。
（3）Also Aggregate Inline JS（聚合內聯JS）
“also aggregate inline JS”選項可提取HTML中的內聯JS，並將其與Autoptimize的優化過的JS檔案合併在一起。由於此選項會導致Autoptimize的快取體積瞬間增加，因此，除非您有特定的原因要啟用它，否則我們建議禁用此選項。
（4）Force JavaScript in（強載入JavaScript）
在大多數情況下，我們不建議強行將JavaScript檔案載入到您網站的HTML的 <head> 元素中。強制JS提早載入可能導致渲染阻止元素，這可能會降低您的頁面載入速度。如果您有需要在 <head> 元素中載入的JavaScript檔案，建議您將這些指令碼檔案設為Autoptimize排除列表。
（5）Exclude Scripts from Autoptimize（JS優化例外列表）
此選項可設定特定目錄和JavaScript檔案例外列表（列表內容不進行合併）。預設情況下，Autoptimize排除以下指令碼或者目錄。
- wp-includes/js/dist/
- wp-includes/js/tinymce/
- js/jquery/jquery.js
請注意，預設情況下，新增要排除的指令碼只會影響合併。除非未選中“Misc Options-其他選項”下的“minify excluded CSS and JS files-最小化例外列表CSS和JS檔案”，否則排除的JavaScript檔案仍將被縮小。
（6）Add Try-Catch Wrapping（新增Try-Catch封裝）
啟用“add try-catch wrapping”選項會將您的JavaScript程式碼封裝在try-catch塊中。此選項對於除錯由JS壓縮和合並引起的問題很有用。如果您的站點僅在啟用“add try-catch wrapping”的情況下工作，我們建議由開發人員幫助你找出導致此問題的JavaScript檔案，因為過多使用try-catch塊會降低JS效能。
CSS選項設定
Autoptimize之CSS優化項
（1）Optimize CSS Code（優化CSS程式碼）
我們建議啟用此選項。啟用“optimize CSS code”後，Autoptimize將最小化網站CSS檔案。
（2）Aggregate CSS Files（合併CSS檔案）
Autoptimize的“aggregate CSS files”選項會將所有CSS檔案合併為一個檔案。如前所述，此功能可能對於支援HTTP/2的站點無效。建議啟用或禁用此選項對網站進行A/B測試，以確定對頁面載入速度是否有幫助。
（3）Also Aggregate Inline CSS（聚合內聯CSS）
此選項會將內聯CSS合併到Autoptimize的CSS檔案中。雖然將內聯CSS合併到支援瀏覽器快取的CSS檔案中可以減小頁面大小，但建議在大多數情況下禁用此選項。
（4）Generate Data: URIs for Images（生成影象URI資料）
啟用此選項後，Autoptimize將對小的背景影象進行base64編碼，並將其嵌入CSS。我們建議測試該選項以評估對頁面速度的影響。雖然將影象編碼為base64格式可以減少HTTP請求數量，但是base64格式檔案通常比二進位制檔案大20-30％。
（5）Inline and Defer CSS（內聯和延遲CSS）
內聯關鍵CSS可以顯著提高某些站點的速度。實際上，內聯CSS通常以結構元素，全域性字型和大小以及導航樣式等元素為目標。
通過內聯這些關鍵元素，延遲載入較大的完整CSS檔案，而不會影響頁面外觀版式。儘管可以手動提取關鍵樣式，但我們建議使用更高效的線上工具來生成樣式。
生成關鍵的CSS
生成關鍵CSS後，將其複製並貼上到Autoptimize 設定中。
在Autoptimize中內聯和推遲CSS
下一步是測試網站的前端體驗。如果您注意到一些未樣式化內容（FOUC）的奇怪變化，則可能需要識別那些未樣式化的元素，並將相應的樣式新增到Autoptimize中以進行內聯。
Autoptimize提供了“power-up”功能，可以自動為WordPress頁面生成關鍵的CSS。根據我們的經驗，此功能有時會降低網站速度，因為它使用外部API呼叫來生成關鍵的CSS。因此，最初的關鍵CSS生成取決於外部伺服器的響應能力。在大多數情況下，不需要任何外部API呼叫的方法是一種更乾淨的解決方案。
溫馨提示：如果你對CSS不熟悉，不建議啟用此選項。並且，筆者認為此方法對於網站載入速度的提升有限。
（6）Inline all CSS（內聯所有CSS）
對於大多數網站，我們不建議內聯所有CSS，因為它會大大增加頁面大小。此外，內聯所有CSS後Web瀏覽器無法快取CSS。
（7）Exclude CSS from Autoptimize（CSS優化例外列表）
預設情況下，Autoptimize從合併規則中排除以下目錄和CSS檔案。如果您想不希望Autoptimize合併特定的CSS檔案，可以將它們新增到此列表中。與JavaScript排除列表類似，此功能預設不會影響CSS檔案壓縮，僅作用於CSS合併規則。
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
HTML選項設定
Autoptimize的HTML優化可以通過刪除空格來減小頁面大小。
Autoptimize之HTML優化項
（1）Optimize HTML Code（優化HTML程式碼）
我們建議啟用“Optimize HTML Code”功能，因為它可以通過刪除HTML中不必要的空格來減小頁面大小。儘管此功能與大多數站點相容，但是刪除空格可能會導致某些站點出現故障。因此，我們建議在生產環境中使用HTML程式碼優化之前，先對其進行全面測試。
（2）Keep HTML Comments（保留HTML註釋）
如果您想保留HTML程式碼註釋，請啟用此功能。
CDN選項設定
如果您正在使用CDN來加速靜態資源，則需要將CDN URL新增到Autoptimize。但如果使用的是類似Cloudflare的CDN代理服務，則無需在Autoptimize的CDN選項中進行任何配置。
Autoptimize之CDN優化設定
Cache資訊
Autoptimize外掛的“cache info”用於展示，例如快取資料夾的位置和許可權，以及快取的樣式和指令碼的總大小等快取資訊。如果在“Can we write?”旁邊看到“No”，則需要修改伺服器的資料夾許可權。
Autoptimize之快取資訊
雜項設定
Autoptimize外掛還有一些其他優化設定。如果在優化CSS和JS檔案後載入網站時遇到問題，則可能需要重新配置以下某些設定。
Autoptimize之雜項設定
（1）Save Aggregated Scripts/CSS as Static Files（合併JS/CSS並儲存為靜態檔案）
我們建議啟用此選項以將合併檔案另存為本地靜態檔案。如果您的伺服器未配置檔案壓縮和快取到期時間，則可能需要禁用此功能。
（2）Minify Excluded CSS and JS Files（CSS和JS檔案壓縮排除列表）
我們建議啟用此選項以確保壓縮所有CSS和JS檔案。但是，如果您發現某些CSS和JS檔案壓縮會存在問題，則可以繼續禁用此選項。
（3）Also Optimize for Logged In Editors/Administrators（針對登入編輯/管理員進行優化）
我們建議啟用此功能以確保已針對登入編輯和管理員角色進行了優化。如果您要以登入使用者身份測試“Autoptimize”設定，則這一點很重要。
Autoptimize外掛整合了ShortPixel，可優化影象。除了影象質量設定外，Autoptimize外掛還支援生成圖片的WEBP版本。
但如果你追求更完美的圖片優化，我們不建議您使用“Autoptimize”提供的閹割版影象優化功能。相反，建議直接使用 ShortPixel 或 Imagify 的功能齊全的外掛。使用完整的外掛，您將可以對優化設定進行更精細的控制，包括重寫影象以使用 <picture> 標籤，這是部分伺服器WEBP支援所必需的。
Autoptimize之圖片優化
Autoptimize還提供影象延遲載入功能。我們建議啟用此功能以提高存在大量影象的頁面載入速度。啟用延遲載入後，“Autoptimize”外掛還支援你設定圖片延遲載入例外列表，類名及檔名。
排除列表設定對於Logo，社交圖示和其他不應延遲載入的重要影象元素等十分重要。如果你希望對WordPress影象及視訊延遲載入深入瞭解，可以參考閱讀《如何實現WordPress影象和視訊懶載入》一文。
Autoptimize之其他優化選項
（1）Google Fonts
Autoptimize針對谷歌字型優化提供了有幾種不同設定選項。應該採用哪個選項取決於網站如何使用Google字型。
- 維持不變。
- 刪除Google字型。
- 合併並放置Head。
- 合併並在Head預載入。
- 合併並通過webfont.js非同步載入。
不建議採用“維持不變”選項，完全沒有速度優勢。
如果Google字型對網站作用不大，不妨刪除它們直接使用系統字型，頁面載入速度刷刷刷。
如果Google字型必須保留，建議您測試最後三個選項，以找出最適合您的網站的選項。
（2）Remove Emojis（刪除表情符號）
此Autoptimize選項將刪除與WordPress核心提供的表情符號相關的CSS和JavaScript。我們建議啟用此選項，因為可以縮小頁面大小。此外，大多數主流作業系統附帶表情符號字型。
（3）Remove Query Strings from Static Resources（刪除靜態資源查詢字串）
如果您希望刪除靜態資源查詢字串（例如?ver=），則可以啟用此選項。刪除查詢字串不會影響載入時間，但可能有助於提高您的網站在GTmetrix，Google Pagespeed和其他效能測試服務中的得分。
（4）Preconnect to 3rd Party Domains（預連線到第三方域）
Preconnect屬性允許您的瀏覽器連線到指定的域，以在傳送完整的HTTP請求之前處理DNS查詢和SSL握手協議。
例如，如果站點存在一張Logo影象儲放於https://site.domain.cdn.com/logo.png，你可以在Autoptimize外掛設定將預連線指令新增到 <head> 元素 ，以實現在HTML的 <body> 元素中發出HTTP請求之前，處理初始DNS和SSL連線。
您可以使用瀏覽器的開發人員工具或檢查器找到要預連線的重要外部域。在下面的示例頁面中，對以下域的外部請求做預連線。
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
可以將這三個域新增到Autoptimize的預連線列表中。
使用開發人員工具查詢外部資源
出於效能原因，我們建議在Autoptimize的預連線列表中新增不超過六個域，因為為太多域指定預連線指令可能會導致效能下降。
（5）Preload Specific Requests（預載入特定請求）
預載入指令指示Web瀏覽器儘快下載資產。該指令對於在頁面載入過程的早期下載所需的內容很有用。實際上，預載入通常用於在頁面CSS中請求自定義字型之前先載入它們，從而減少頁面載入時間。
建議您與開發人員討論，最終找到並確定WordPress網站上哪些內容可以預載入（如果有）。與許多其他與效能相關的調整一樣，預載入太多內容可能會使網站載入速度變慢，正所謂物極必反。
（6）Async JavaScript Files（JavaScript檔案非同步載入）
Autoptimize外掛的“async JavaScript files”功能可以指定某些外部JavaScript檔案，以通過HTML程式碼的async標誌實現非同步載入。雖然非同步載入JS檔案可以提高頁面速度，但建議進行充分的測試以確保不影響網站功能，某些JS未必適合進行非同步載入。
小結
如果您知道如何調整其設定，對於希望提高站點效能的WordPress使用者，Autoptimize外掛是一個不錯的選擇。
藉助HTML和CSS優化等基本功能以及CDN整合、預連線和預載入指令等更高階功能，Autoptimize具備了優化WordPress網站前端效能所需的一切。
評論留言