Autoptimize是一個免費的WordPress優化插件。除了HTML，CSS和JavaScript優化外，Autoptimize還包括針對現代WordPress網站其他方面的優化功能。
在本文中，我們將分享最佳的Autoptimize插件設置，以提高WordPress網站的性能和頁面速度。
為什麼要自動優化？
在深入探討最佳的Autoptimize設置之前，讓我們快速回顧一下Autoptimize是出色的優化插件的三個原因。
- 免費版本的Autoptimize具有用於優化WordPress網站的完整功能集。
- Autoptimize嚴格來說是一個優化插件，不執行任何HTML頁面緩存。這意味著它與所有Web主機兼容，甚至包括具有自定義頁面緩存配置（例如Kinsta）的Web主機。
- Autoptimize在WordPress資料庫中有超過一百萬的活躍安裝，並且不斷更新以提供新功能和錯誤修復。
＃js-mykinsta-video {
背景圖片：url（https://kinsta.com/wp-content/themes/kinsta/images/mykinsta-dashboard-v8@2x.jpg）;
}
免費試用
自動優化JS，CSS和HTML設置
HTML，CSS和JavaScript是Autoptimize的基礎。與其他優化插件一樣，深入了解Autoptimize廣泛的功能集和設置可能是一項艱巨的任務。為了簡化操作，我們匯總了最佳的「自動優化」設置，以提高您網站的性能。
JavaScript選項
Autoptimize中的JavaScript優化。
優化JavaScript代碼
我們建議啟用此選項。啟用「優化JavaScript代碼」後，「自動優化」將最小化您的JavaScript文件。
匯總JS文件
Autoptimize的「匯總JS文件」選項會將您的所有JavaScript文件合併為一個文件。過去，將JS和CSS文件合併是WordPress優化中的關鍵步驟。在Kinsta，我們使用支持並行下載和多路復用的現代HTTP / 2伺服器-這意味著合併文件不再像以前那樣重要，因為HTTP / 2允許同時下載多個文件。話雖如此，聚合CSS和JS文件仍然會導致某些類型的WordPress網站的速度提高，因此我們建議在啟用和禁用此選項的情況下測試您的頁面速度。
還聚合內聯JS
「還聚合內聯JS」選項可提取HTML中的內聯JS，並將其與Autoptimize的優化JS文件結合在一起。由於此選項可能會導致Autoptimize的緩存大小快速增加，因此，除非您有特定的原因要啟用它，否則我們建議您禁用此選項。
強制加入JavaScript
在大多數情況下，我們不建議強行將JavaScript文件載入到您網站的HTML元素中。強制JS提早載入可能導致渲染阻止元素，這可能會降低您的頁面速度。如果您有需要在元素中載入的JavaScript文件，我們建議從「自動優化」中排除這些腳本。
從自動優化中排除腳本
此選項使您可以從聚合中排除特定目錄和JavaScript文件。默認情況下，Autoptimize排除以下腳本。
- wp-includes / js / dist /
- wp-includes / js / tinymce /
- js / jquery / jquery.js
請注意，默認情況下，添加要排除的腳本只會影響聚合。除非未選中「其他選項」下的「最小化排除的CSS和JS文件」，否則排除的JavaScript文件仍將被縮小。
添加嘗試捕獲包裝
啟用「添加try-catch包裝」選項會將JavaScript代碼包裝在try-catch塊中。此選項對於調試由JS縮小和聚合引起的問題很有用。如果您的網站僅在啟用「添加try-catch包裝」的情況下工作，我們建議與開發人員一起瀏覽您的JavaScript文件，以找出引起問題的文件，因為過多使用try-catch塊會降低JS性能。
Autoptimize：您不知道自己需要的免費WordPress優化插件…但這將使您的網站閃電般快速⚡️本指南確切解釋了您為什麼需要它?
點擊鳴叫
CSS選項
自動優化CSS優化。
優化CSS代碼
我們建議啟用此選項。啟用「優化JavaScript代碼」後，「自動優化」將最小化您的JavaScript文件。
匯總CSS文件
Autoptimize的「聚合CSS文件」選項會將您的所有CSS文件合併為一個文件。如前所述，此功能可能無法使支持HTTP / 2的站點受益。我們建議您在您的網站上進行A / B測試，以確定是否對網頁速度產生積極影響。
還聚合內聯CSS
此選項會將內聯CSS移到Autoptimize的CSS文件中。雖然將嵌入式CSS移到可瀏覽器緩存的CSS文件中可以減小頁面大小，但建議在大多數情況下將此選項禁用。
生成數據：圖像的URI
啟用此選項後，「自動優化」將對小的背景圖像進行base64編碼，並將其嵌入CSS。我們建議測試該選項以評估對頁面速度的影響。雖然將圖像編碼為base64格式可以減少HTTP請求的數量，但base64表示文件通常比二進位文件大20-30％。
使用WordPress，我們的流量增長了1,187％。
我們將向您展示如何。
加入20,000多個其他人，他們每周都會收到有關WordPress內部技巧的新聞！
現在訂閱
成功！感謝您的訂閱
您將在一周內收到下一期的Kinsta新聞通訊。
訂閱Kinsta新聞通訊
訂閱
我同意條款和條件以及隱私政策
內聯和延遲CSS
內聯關鍵CSS可以顯著提高某些站點的速度。這裡的想法是「折中」元素所需的內聯樣式。實際上，內聯CSS通常以結構元素，全局字體系列和大小以及導航樣式為目標。
通過內聯這些關鍵元素，可以在以後載入較大的完整CSS文件，而不會影響頁面的外觀。雖然可以手動提取關鍵樣式，但我們建議使用像這樣的工具來生成樣式作為起點。
生成關鍵的CSS。
生成關鍵CSS後，將其複製並粘貼到「自動優化」設置中。
在Autoptimize中內聯和推遲CSS。
下一步是測試您網站的前端體驗。如果您發現一些未樣式化內容（FOUC）的異常變化，則可能需要識別那些未樣式化的元素，並將相應的樣式添加到「自動修飾」中以進行內聯。
Autoptimize提供了「加電」功能，可以自動為WordPress頁面生成關鍵的CSS。根據我們的經驗，此功能有時會降低您的網站速度，因為它使用外部API調用來生成關鍵的CSS。因此，最初的關鍵CSS生成取決於外部伺服器的響應能力。在大多數情況下，上述方法不需要任何外部API調用，是一種更乾淨的解決方案。
內聯所有CSS
對於大多數網站，我們不建議內聯所有CSS，因為它會大大增加頁面大小。此外，內聯所有CSS使得Web瀏覽器無法緩存CSS。
從自動優化中排除CSS
默認情況下，Autoptimize從聚合中排除以下目錄和CSS文件。如果您想防止Autoptimize聚合任何CSS文件，可以將它們添加到此列表中。與JavaScript排除類似，此功能的默認行為不會阻止CSS文件最小化，而只是聚合。
- wp-content / cache /
- wp-content / uploads /
- admin-bar.min.css
- dashicons.min.css
HTML選項
Autoptimize的HTML優化可以消除空白，從而有助於縮小頁面尺寸。
Autoptimize中的HTML優化。
優化HTML代碼
我們建議啟用「優化HTML」代碼功能，因為它可以通過刪除HTML中不必要的空格來減小頁面大小。儘管此功能與大多數站點兼容，但是刪除空格可能會在某些站點上引起故障。因此，我們建議在生產環境中使用HTML代碼優化之前，先對其進行全面測試。
保留HTML注釋
如果您想保留優化頁面的HTML注釋，請啟用此功能。
CDN選項
如果您使用類似KinstaCDN的CDN來加速靜態資產，則需要將CDN URL添加到「自動優化」中。如果您使用具有CDN功能（例如Cloudflare）的代理服務，則無需在Autoptimize的CDN選項中進行任何配置。
在自動優化中配置CDN設置。
緩存信息
Autoptimize的「緩存信息」顯示重要信息，例如緩存文件夾的位置和許可權，以及緩存的樣式和腳本的總大小。如果您在「我們可以寫嗎？」旁邊看到「否」，則需要與您的主機一起修復文件夾許可權。
自動優化緩存信息。
雜項選項
自動優化有一些其他的優化設置。如果您在將優化的CSS和JS文件載入到網站上時遇到問題，則可能需要重新配置以下某些設置。
Autoptimize中的其他優化。
將匯總的腳本/ CSS保存為靜態文件
我們建議啟用此選項以將聚合文件另存為本地靜態文件。如果您的伺服器未配置為處理文件壓縮和到期，則可能需要禁用此功能。
縮小排除的CSS和JS文件
我們建議啟用此選項以確保最小化所有CSS和JS文件。但是，如果您發現某些排除的CSS和JS文件存在與縮小相關的問題，則可以繼續禁用此選項。
同時針對登錄的編輯器/管理員進行優化
我們建議啟用此功能以確保資產已針對登錄的編輯者和管理員進行了優化。如果您要以登錄用戶身份測試「自動優化」設置，那麼這很重要。
自動優化中的圖像優化
Autoptimize具有與ShortPixel的內置集成，可優化圖像。除了圖像質量設置外，Autoptimize的集成還允許您生成和提供圖像的WEBP版本。
是否需要為您的新電子商務網站提供一流，快速且安全的託管服務？ Kinsta從WooCommerce專家那裡提供了快速的伺服器和24/7世界一流的支持。查看我們的計劃
對於Kinsta用戶，我們不建議您使用「自動優化」中的圖像優化功能。相反，我們建議直接使用ShortPixel或Imagify的功能齊全的插件。使用完整的插件，您可以對優化設置進行更精細的控制，包括重寫圖像以使用標籤，這是Kinsta上WEBP支持所必需的。
使用自動優化延遲載入圖像。
Autoptimize還包括圖像的延遲載入功能。我們建議啟用此功能以提高大量圖像頁面的頁面速度。啟用延遲載入後，「自動優化」可讓您從延遲載入中排除某些圖像類和文件名。
排除設置對於徽標，社交圖標和其他不應延遲載入的重要圖像元素等圖像很有用。如果您正在尋找一種可以更好地控制延遲載入的解決方案，請查看有關WordPress中延遲載入圖像和視頻的指南。
自動優化中的額外優化
Autoptimize中的額外優化。
Google字體
自動優化功能有幾種不同的選項可用於優化Google字體。最佳選擇取決於您的網站如何使用Google字體。
- 照原樣。
- 刪除Google字體。
- 合併並鏈接到頭部。
- 合併並預裝在頭部。
- 與webfont.js非同步組合和載入字體。
我們不建議您使用「按原樣保留」選項，因為它不會帶來速度優勢。
如果您的網站上Google字體不是關鍵任務要求，那麼刪除它們並使用系統字體堆棧可能會對您的頁面速度產生巨大的積極影響。
如果您想將Google字體保留在您的網站上，建議您測試最後三個選項，以找出最適合您的網站的選項。
刪除表情符號
此「自動優化」選項將刪除與WordPress核心表情符號相關的CSS和JavaScript。我們建議啟用此選項，因為它可以幫助縮小頁面大小。此外，大多數主流操作系統附帶帶有表情符號的字體堆棧。當然，還有其他方法可以在WordPress網站上禁用表情符號。
從靜態資源中刪除查詢字元串
如果您想從靜態資源中刪除查詢字元串（例如？ver =），則可以啟用此選項。刪除查詢字元串不會影響載入時間，但可以幫助您提高網站在GTmetrix，Google Pagespeed和其他性能測試服務中的得分。
預連接到第三方域
preconnect指令允許您的瀏覽器連接到指定的域，以在發送完整的HTTP請求之前處理DNS查找和SSL握手協商。
例如，如果您的站點具有從https://site.kinsta.cdn.com/logo.png提供的徽標圖像，則可以指示Autoptimize在元素之前添加預連接指令以處理元素中的初始DNS和SSL連接。 HTTP請求是在HTML元素中發出的。
您可以使用瀏覽器的開發人員工具或檢查器找到要預先連接的重要外部域。在下面的示例頁面中，對以下域的外部請求。
- https://cdn.brianli.com
- https://www.google-analytics.com
- https://www.googletagmanager.com
這三個域可以添加到Autoptimize的預連接列表中。
使用開發人員工具查找外部資產。
出於性能方面的考慮，我們建議在Autoptimize的預連接列表中添加不超過六個域，因為為太多域指定預連接指令可能會導致性能下降。
預載入特定請求
預載入指令指示您的Web瀏覽器儘快下載資產。該指令對於在頁面載入過程的早期下載所需的資產很有用。實際上，通過在頁面的CSS中請求自定義字體之前將其載入，通常可以使用預載入來加快自定義字體的載入時間。
我們建議您向開發人員諮詢要在您的WordPress網站上預載入哪些資產（如果有）。與許多其他與性能相關的調整一樣，預載入太多資產可能會使您的網站載入速度變慢。
非同步JavaScript文件
Autoptimize的「非同步JavaScript文件」功能可讓您指定要通過非同步HTML標誌非同步載入的某些外部JavaScript文件。雖然非同步載入JS文件可以提高頁面速度，但我們建議進行充分的測試以確保不影響網站功能。
如果您尚未使用Autoptimize，請在閱讀本指南後儘快將此WordPress優化插件添加到您的網站中?
點擊鳴叫
摘要
如果您現在如何調整其設置，對於希望提高站點性能的WordPress用戶而言，Autoptimize插件是一個不錯的選擇。
Autoptimize具有HTML和CSS優化等基本功能，以及CDN集成等更高級的功能，並且可以指定預連接和預載入指令，從而提供了優化WordPress網站前端性能所需的一切。
如果您想了解有關WordPress優化以及如何優化網站後端的更多信息，請務必查看我們全面的WordPress性能指南。
如果您喜歡這篇文章，那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站，並從我們經驗豐富的WordPress團隊獲得24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展，性能和安全性。讓我們向您展示Kinsta的與眾不同！查看我們的計劃