Autoptimize

常見問題集

這個外掛如何協助加快我的網站速度？

它會將所有 script 和 style 最小化，並設定網頁伺服器使用良好的 expires 標頭進行壓縮。JavaScript 預設會設為不阻擋轉譯，而透過新增關鍵 CSS，CSS 也能如此處理。您可以將 CSS & JS 檔案合併，在這種情況下，樣式會移至頁面 head，而 script 會移至頁尾。它也會最小化 HTML 程式碼，並能最佳化圖片和 Google Fonts，讓您的頁面真正輕量化。

但是我使用 HTTP/2，所以不需要 Autoptimize 嗎？

HTTP/2 確實是一大進步；透過使用同一個連線執行多個並行請求，大幅降低來自同一伺服器的多個請求所造成的影響，因此在新的安裝中，Autoptimize 不再合併 CSS 和 JS 檔案。話雖如此，合併 CSS/ JS 仍可能非常有意義，正如 這篇 css-tricks.com 文章及這篇 來自 Ebay 工程師的部落格文章所述。結論是：依您的情境進行設定、測試、重新設定、再次測試、微調，並觀察哪種方式最有效。也許只是 HTTP/2，也許是 HTTP/2 + 合併與最小化，也許是 HTTP/2 + 最小化（AO 也能做到，只要取消勾選「合併 JS 檔案」及／或「合併 CSS 檔案」選項）。而且 Autoptimize 能做的遠不只是「單純」最佳化您的 JS & CSS，當然 😉

這能與我的部落格搭配使用嗎？

雖然 Autoptimize 不提供任何保固，但只要正確設定，通常都能順利運作。如有問題，請參閱下方的「疑難排解」，瞭解如何進行設定。如果你願意，也可以在 tastewp.com 提供的新免費測試網站上測試 Autoptimize。

為什麼 jquery.min.js 在合併 JavaScript 時不會最佳化？

從 AO 2.1 起，WordPress 核心的 jquery.min.js 不會被最佳化，原因很簡單：許多熱門外掛會注入未合併的行內 JS（因為行內 JS 中的唯一程式碼可能造成快取大小問題），而這些 JS 依賴 jquery 可用；因此排除 jquery.min.js 可確保大多數網站開箱即用。如果您也想最佳化 jquery，可以將它從 JS 最佳化排除清單中移除（您可能也需要啟用「同時合併行內 JS」，或切換至「強制將 JS 置於 head」）。

為什麼最佳化後的 JS 會阻擋轉譯？

這會在合併 JavaScript 並勾選「強制放在頁首」選項，或未合併且未延遲載入時發生。請考慮變更設定。

為什麼最佳化後的 CSS 仍被標示為阻擋轉譯？

在 Autoptimize 的預設設定中，CSS 會連結至頁首，這是安全的預設值，但 Google PageSpeed Insights 會對此提出疑慮。你可以考慮使用「將所有 CSS 內嵌」（簡單）或「內嵌並延遲載入 CSS」（較佳），本 FAQ 也有說明這些方式。

「內嵌並延遲 CSS」有什麼用途？

CSS 通常應放在文件的 head 中。最近，Google 等開始提倡延遲載入非必要 CSS，同時將建立首屏所需的樣式內嵌。這對於盡可能快速轉譯行動裝置上的頁面尤其重要。從 Autoptimize 1.9.0 起，這很容易做到：選取「內嵌並延遲 CSS」，在輸入欄位（文字區域）貼上「首屏 CSS」區塊，就完成了！

不過，要如何找出「首屏 CSS」？

這沒有簡單的解決方案，因為「首屏」取決於頁面折疊位置，而折疊位置又取決於螢幕大小。不過，有些工具可以嘗試辨識「首屏」內容。這份工具清單是很好的起點。Sitelocity 關鍵 CSS 產生器和 Jonas Ohlsson 的 criticalpathcssgenerator是很好的基礎解決方案，而 http://criticalcss.com/則是同一位 Jonas Ohlsson 提供的付費方案。或者，這個書籤小工具（僅限 Chrome）也可能有所幫助。

或者，您應該將所有 CSS 內嵌嗎？

簡短回答：可能不需要。雖然將所有 CSS 內嵌會讓 CSS 不再阻擋轉譯，但會使基本 HTML 頁面明顯變大，因此需要更多「往返時間」。此外，考量瀏覽工作階段中要求多個頁面時，內嵌 CSS 每次都會傳送；未內嵌時則會從快取提供。最後，內嵌 CSS 會把 HTML 中的 meta-tags 推到較後面的位置，Facebook 或 Whatsapp 可能就不會再從該位置尋找，導致在這些平台分享時的縮圖出現問題。

我的快取變得非常龐大，Autoptimize 不會清除快取嗎？

Autoptimize 沒有專用的清除快取機制，因為這可能會移除其他快取仍在參照的最佳化 CSS/JS，進而導致網站故障。此外，快取快速增長表示存在其他應避免的問題。

相反地，您可以透過以下任一方式將快取大小維持在可接受的程度：

• 停用「合併行內 JS」及／或「合併行內 CSS」選項
• 排除會依頁面（或每次載入頁面）而變動的 JS 變數（或有時是 CSS 選取器）。您可以在 這篇部落格文章中閱讀如何執行此操作。

儘管有上述疑慮，仍有第三方解決方案可自動清除 AO 快取，例如使用這段程式碼或這個外掛；但基於上述理由，只有在你確實知道自己在做什麼時才應使用這些方案。

「清除快取」似乎沒有作用？

在管理工具列的 Autoptimize 下拉選單中按一下「刪除快取」連結時，可能會看到「快取可能未成功清除」。這時請前往 Autoptimize 設定頁面，按一下「儲存變更 & 清除快取」按鈕。

此外，如果快取從未降到 0 個檔案／0KB，也不用擔心，因為 Autoptimize（自 2.2 版起）會在快取清除後立即自動預先載入快取，以大幅加快後續的最小化作業。

清除 Autoptimize 的快取後，我的網站看起來壞掉了！

清除 AO 的快取時，不應有任何頁面快取包含引用已移除最佳化 CSS/ JS 的頁面（HTML）。雖然 Autoptimize 與某些頁面快取之間有整合功能可處理這種情況，但這項整合不涵蓋 100% 的設定，因此您可能需要手動清除頁面快取。

我仍然可以使用 Cloudflare 的 Rocket Loader 嗎？

Cloudflare Rocket Loader 是一種相當進階但具侵入性的方式，可讓 JavaScript 不阻擋轉譯；Cloudflare 仍將其視為 Beta。有時 Autoptimize & Rocket Loader 可以搭配運作，有時則不行。最佳做法是停用 Rocket Loader、設定 Autoptimize，之後（如果您認為它有幫助）重新啟用 Rocket Loader，並測試一切是否仍能正常運作。

目前（2017 年 6 月），RocketLoader 似乎可能會導致 AO 的「內嵌並延遲 CSS」失效；這項功能是以 Filamentgroup’s loadCSS 為基礎，因此延遲載入的 CSS 不會載入。

我試過 Autoptimize，但 Google Pagespeed 分數幾乎沒有改善

Autoptimize 不是簡單的「修好我的 Pagespeed 問題」外掛；它「只」會合併與最小化（本機）JS & CSS 和圖片，並提供一些實用的額外功能，例如移除 Google Fonts 及延遲載入 CSS。因此，Autoptimize 能協助您改善效能（以秒計算的載入時間），也可能協助您處理某些特定的 Pagespeed 警告。如果您想進一步改善，可能還需要研究頁面快取和網頁伺服器設定，例如這些設定會改善實際效能（同樣是以秒計算的載入時間，例如在 https://webpagetest.org) 測量），以及您的「效能最佳實務」Pagespeed 評分。

我可以用 API 做什麼？

非常多；您可以使用篩選器，依請求有條件地停用 Autoptimize、變更 CSS 和 JS 排除項目、變更 CSS 背景圖片內嵌至 CSS 的限制、定義要移至合併檔案之後的 JS 檔案、變更合併 JS script 標籤上的 defer 屬性，…autoptimize_helper.php_example 和這份 FAQ 中都有一些篩選器範例。

CDN 如何運作？

自 1.7.0 版起，輸入 CDN 網站根目錄（例如 http://cdn.example.net/wordpress/) 後，CDN 就會啟用。如果有設定該 URL，所有 Autoptimize 產生的檔案（也就是合併後的 CSS 和 JS）都會使用此 URL，包括 CSS 中的背景圖片（未使用 data-uri 時）。

如果你也想讓上傳的圖片使用 CDN，可以將 WordPress 設定中的 upload_url_path（/wp-admin/options.php）變更為目標 CDN 上傳目錄（例如 http://cdn.example.net/wordpress/wp-content/uploads/). 請注意，這只對變更後上傳的圖片有效，對已經上傳的圖片無效。感謝 BeautyPirate 提供這項提示！

為什麼我的字型也沒有放到 CDN 上？

Autoptimize 支援這項功能，但預設未啟用，因為非本機字型可能需要額外設定。不過，如果你的跨來源請求原則設定正確，就可以透過 API 掛鉤，將 autoptimize_filter_css_fonts_cdn 設為 true，讓 Autoptimize 將字型放到 CDN 上，方法如下；

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' );

我正在使用 Cloudflare，應該在 CDN 根目錄中輸入什麼

使用 Cloudflare 時，Autoptimize 最佳化後的 CSS／JS 會自動由 Cloudflare 的 CDN 提供，不需要進行任何操作。

如何強制讓合併後的檔案成為靜態 CSS 或 JS，而不是 PHP？

如果您的網頁伺服器已正確設定，可處理壓縮（gzip 或 deflate）及快取到期時間（expires 與 cache-control，且具備足夠的可快取性），就不需要 Autoptimize 代為處理。在這種情況下，您可以勾選「將合併的 script/css 儲存為靜態檔案？」選項，這會強制 Autoptimize 將合併的檔案儲存為 .css 和 .js 檔案（也就是提供這些檔案不需要 PHP）。這項設定自 Autoptimize 1.8 起為預設值。

「排除於最佳化之外」是如何運作的？

CSS 和 JS 最佳化都可以透過將「識別字串」加入以逗號分隔的排除清單，略過合併與最小化程式碼。要使用的確切識別字串可以透過以下方式判定：

• 如果您想排除特定檔案，例如 wp-content/plugins/funkyplugin/css/style.css，可以直接排除「funkyplugin/css/style.css」
• 如果您想排除特定外掛的所有檔案，例如 wp-content/plugins/funkyplugin/js/*，可以排除例如 “funkyplugin/js/” 或 “plugins/funkyplugin”
• 如果您想排除行內程式碼，必須在該段程式碼中找出特定且唯一的字串，並將其加入排除清單。例如：若要排除 <script>funky_data='Won\'t you take me to, Funky Town'</script>，識別字串就是 “funky_data”。

Autoptimize 疑難排解

請參閱 https://blog.futtta.be/2022/05/05/what-to-do-when-autoptimize-breaks-your-site/ 上的疑難排解說明

我排除檔案了，但它們仍然被 Autoptimize 最佳化？

如果檔名顯示排除的檔案尚未最小化，AO 仍會將排除的 JS／CSS 最小化。自 AO 2.5 起，你可以在「JS、CSS & HTML」分頁下的雜項設定中，取消勾選「最小化排除的檔案」來停用此功能。

啟用 Autoptimize 後出現空白頁面或內部伺服器錯誤!!

請確認沒有同時執行其他 HTML、CSS 或 JS 最小化外掛（BWP minify、WP minify、…）與 Autoptimize，或停用頁面快取外掛（W3 Total Cache、WP Fastest Cache、…）中的該功能。請嘗試只啟用 CSS 或只啟用 JS 最佳化，以確認是哪一項導致伺服器錯誤，並依照一般疑難排解步驟尋找解決方法。

但我的最佳化 CSS 或 JS 檔案仍然是空的！

如果您使用 Apache，Autoptimize 寫入的 .htaccess 檔案有時可能會與 Apache 設定中的 AllowOverrides 設定衝突（某些 Ubuntu 安裝的預設設定就是如此），導致 Autoptimize CSS/ JS 檔案出現「內部伺服器錯誤」。您可以 將 AllowOverrides 設定為 All來解決此問題。

在網域對應的多網站中無法登入

網域對應的多網站需要 Autoptimize 在不同的 WordPress 動作上初始化；例如，將以下程式碼新增至 wp-config.php，讓它掛鉤至 setup_theme：

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

我沒有收到錯誤，但我的頁面完全沒有經過最佳化？

Autoptimize 會先進行多項檢查，之後才會實際進行最佳化。符合下列任一情況時，頁面就不會進行最佳化：

• 在自訂器中
• 如果沒有開頭的 <html 標籤
• 如果回應中有 <xsl:stylesheet（表示輸出不是 HTML，而是 XML）
• 如果回應中有 <html amp（因為 AMP 頁面已經完成最佳化）
• 如果輸出是 RSS 摘要（is_feed() 函式）
• 如果輸出是 WordPress 管理頁面（is_admin() 函式）
• 如果在 URL 後加上 ?ao_noptimize=1 來請求頁面
• 如果程式碼掛鉤到 Autoptimize，以停用最佳化（請參閱 Visual Composer 的主題文章）
• 如果其他外掛以不相容的方式使用輸出緩衝區（選擇性停用其他外掛，以找出問題來源）

Visual Composer、Beaver Builder 與類似的網頁編輯器解決方案壞掉了！！

停用讓 Autoptimize 對已登入使用者生效的選項，然後盡情拖放吧 😉

救命，我的商店結帳／付款無法正常運作！！

停用最佳化購物車／結帳頁面的選項（適用於 WooCommerce、Easy Digital Downloads 和 WP eCommerce）。

Revolution Slider 壞掉了！

請確定 js/jquery/jquery.min.js 位於以逗號分隔的 JS 最佳化排除清單中（預設設定會排除這個檔案）。

我收到「jQuery is not defined」錯誤

在這種情況下，你有需要載入 jQuery 的未合併 JavaScript，因此必須將 js/jquery/jquery.min.js 加入以逗號分隔的 JS 最佳化排除清單。

我使用 NextGen Galleries，但有許多 JS 未合併／最小化？

NextGen Galleries 會透過一些特別方式加入 JavaScript。若要讓 Autoptimize 能夠合併這些程式碼，你可以停用 Nextgen Gallery 的資源管理功能，使用這段程式碼 add_filter( 'run_ngg_resource_manager', '__return_false' );；或者告訴 Autoptimize 提前初始化，將以下內容加入 wp-config.php：define("AUTOPTIMIZE_INIT_EARLIER","true");

noptimize 是什麼？

從 1.6.6 版開始，Autoptimize 會排除 noptimize 標籤內的所有內容，例如：
<!--noptimize--><script>alert(‘this will not get autoptimized’);</script><!--/noptimize-->

您可以在頁面／文章內容、小工具及佈景主題檔案中執行此操作（建議建立 子佈景主題，以避免您的工作被佈景主題更新覆寫）。

我可以變更已快取 Autoptimize 檔案的目錄和檔案名稱嗎？

可以。如果你想從例如 /wp-content/resources/aggregated_12345.css 提供檔案，而不是使用預設的 /wp-content/cache/autoptimize/autoptimize_12345.css，請將以下內容加入 wp-config.php：

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

這能搭配非預設的 WP_CONTENT_URL 使用嗎？

不，Autoptimize 不支援非預設的 WP_CONTENT_URL，無法直接使用；但可以透過幾行掛鉤至 Autoptimize API 的程式碼來實現。

產生的 JS／CSS 可以預先 gzip 壓縮嗎？

是的，但預設會停用。您可以將 ´true´ 傳遞給 ´autoptimize_filter_cache_create_static_gzip´ 來啟用此功能。不過，您仍然必須設定網頁伺服器使用這些檔案，而不是未經 gzip 的檔案，以避免即時壓縮造成額外負擔。

「移除表情符號」有什麼作用？

Autoptimize 2.3 的這項新選項會移除 WordPress 核心新增的行內 CSS、行內 JS 和連結的 JS 檔案。因此，它可能會對網站效能帶來小幅正面影響。

「移除查詢字串」有用嗎？

雖然有些線上效能評估工具會特別指出「靜態檔案的查詢字串」是效能問題，但一般而言，其影響幾乎不存在。因此，自 2.3 版起，Autoptimize 允許您移除查詢字串（更精確地說是「ver」參數）；不過，勾選「從靜態資源移除查詢字串」對網站以（毫）秒計算的效能幾乎沒有或完全沒有影響。

是否／如何最佳化 Google Fonts？

Google Fonts 通常會由「阻擋轉譯」的連結 CSS 檔案載入。如果佈景主題和外掛使用 Google Fonts，你可能會遇到多個這類 CSS 檔案。Autoptimize（自 2.3 版起）可以透過完全移除 Google Fonts，或最佳化其載入方式，減少其影響。這裡有兩種最佳化方式：第一種是「合併並連結」，會將所有 Google Fonts 的請求合併成一個請求；這仍會阻擋轉譯，但能讓字型立即載入（也就是頁面載入時不會看到字型變換）。另一種是「合併並非同步載入」，會使用 JavaScript 以不阻擋轉譯的方式載入字型，但可能造成「未設定樣式文字閃現」。

我應該使用 “preconnect”

Preconnect 是一項相當進階的功能，會指示瀏覽器（如果瀏覽器支援）即使尚未立即需要連線，也先連線到特定網域。這可用來減輕第三方資源對 HTTPS 的影響（因為 DNS 請求、TCP 連線與 SSL/TLS 協商會提早執行）。請謹慎使用，因為預先連線至過多網域可能適得其反。

我什麼時候不能讓 JS 非同步載入？

未經 Autoptimize 最佳化的 JavaScript 檔案（因為被排除或託管於其他位置）通常會阻擋轉譯。將它們加入以逗號分隔的「async JS」欄位後，Autoptimize 會加入 async 旗標，讓瀏覽器非同步載入這些檔案（也就是不阻擋轉譯）。不過，這可能會導致您的網站（頁面）故障；例如，如果您對「js/jquery/jquery.min.js」使用 async，很可能會出現「jQuery is not defined」錯誤。請謹慎使用。

圖片最佳化如何運作？

啟用圖片最佳化後，Autoptimize 會在圖片標籤和 CSS 檔案中尋找從您自己的網域載入的 png、gif、jpeg（.jpg）檔案，並將這些檔案的 src（來源）改為 ShortPixel CDN。重要：這只適用於公開可用的圖片，否則圖片最佳化 proxy 將無法取得圖片進行最佳化，因此防火牆、proxy、密碼保護，甚至防盜連機制都可能導致圖片最佳化失效。

我的內部網路／受保護網站可以使用圖片最佳化嗎？

不；圖片最佳化取決於外部圖片最佳化服務能否從您的網站擷取原始圖片、進行最佳化並將其儲存至 CDN。如果匿名訪客無法下載您的圖片（原因可能是防火牆／proxy／密碼保護／防盜連保護），圖片最佳化將無法運作。

我可以在哪裡取得更多圖片最佳化資訊？

請查看 ShortPixel 的 FAQ。

我可以停用 AO 對頁面快取清除的監聽嗎？

自 AO 2.4 起，AO 會「監聽」頁面快取的清除動作，以清除自己的快取。你可以使用以下篩選器停用此行為：

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

部分非 ASCII 字元在最佳化後遺失

AO 預設使用不支援多位元組的字串方法，但如果你的 PHP 有 mbstring 擴充功能，就可以使用以下篩選器啟用支援多位元組的字串函式；

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');

我無法讓關鍵 CSS 正常運作

請查看 這裡的（舊版）”power-up” FAQ；這項資訊日後會整合至本 FAQ。

使用 Autoptimize 2.7 以上版本時，還需要 CriticalCSS Power-Up 嗎？

不，CriticalCSS Power-Up 已不再需要，所有功能（以及許多修正／改善）現在都是 Autoptimize 的一部分。

「啟用 404 備援」有什麼作用？我為什麼需要它？

Autoptimize 會快取合併及最佳化的 CSS/ JS，而這些快取檔案的連結會儲存在 HTML 中；HTML 會再儲存在頁面快取（可能是外掛層級、主機層級、第三方服務、Google 快取或瀏覽器中）。如果頁面快取中的 HTML 連結到已在此期間（快取清除時）被移除的 Autoptimized CSS/ JS，快取中的頁面就不會如預期顯示／運作，因為找不到 CSS 或 JS（404 錯誤）。

此設定旨在透過提供「備援」CSS 或 JS，防止網站功能失效。備援檔案是清除快取後建立的第一批由 Autoptimize 最佳化的 CSS 與 JS 檔案副本，因此會以首頁為基礎。這表示 CSS/ JS 可能無法 100% 套用到其他頁面，但至少能減輕缺少 CSS/ JS 所造成的影響（通常可大幅減輕）。

啟用此選項後，Autoptimize 會將 ErrorDocument 404 新增至 .htaccess（Apache 使用的檔案），也會掛鉤至 WordPress 核心的 template_redirect，以擷取由 WordPress 處理的 404 錯誤。使用 NGINX 時，以下類似設定應該可行（我不是 NGINX 專家，但對我而言確實有效）；

location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ {
    try_files $uri $uri/ /wp-content/autoptimize_404_handler.php;
}

以下也是一種不錯的替代作法（由 fboylovesyou 提供）；

location ~* /wp-content/cache/autoptimize/.*\.(css)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/css/autoptimize_fallback.css;
}
location ~* /wp-content/cache/autoptimize/.*\.(js)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/js/autoptimize_fallback.js;
}

Autoptimize 使用了哪些開放原始碼軟體／專案？

以下開放原始碼專案以某種形式用於 Autoptimize：

• Mr Clay’s Minify 用於 JS & HTML 最小化
• YUI CSS compressor PHP Port 用於 CSS 最小化
• Lazysizes 用於延遲載入
• Persist Admin Notices Dismissal 用於管理介面中的通知
• Plugin Update Checker 適用於 Beta 版本的 GitHub 自動更新
• LoadCSS 用於延遲載入完整 CSS
• jQuery cookie 用於將「futtta about」類別選擇儲存於 cookie 中
• jQuery tablesorter 用於顯示關鍵 CSS 規則／工作
• jQuery unslider 用於主設定頁面右上角的迷你滑桿（儲存庫已移除）
• JavaScript-md5 用於編輯關鍵 CSS 規則
• Speed Booster Pack 用於進階 JS 延遲載入
• Disable Remove Google Fonts 用於額外移除 Google Fonts

我可以在哪裡取得協助？

您可以在 wordpress.org 支援論壇取得協助。如果您 100% 確定無法透過 Autoptimize 設定解決這個問題，而且確實發現程式碼中的錯誤，可以 在 GitHub 建立問題。如果您正在尋找付費支援，請查看我們的 Autoptimize Pro 支援與網站效能最佳化服務。

我想移除 Autoptimize，應該怎麼做？

• 停用外掛（這會移除設定和快取）
• 移除外掛
• 清除所有可能仍保留參照 Autoptimize 最佳化 CSS/JS 頁面的快取（例如頁面快取外掛 WP Super Cache 的快取）

我可以如何提供協助／貢獻？

只要在 GitHub 上 fork Autoptimize，然後開始寫程式吧！