Autoptimize 介紹前言

時常有人對於 WordPress 載入速度緩慢的問題煩惱,其實你可以安裝優化型的外掛,來讓你的 WordPress 網站飛起來。

今天 StartPress 工作室團隊要跟大家介紹的 Autoptimize 是一款替你的 WordPress 網站加速的進階外掛,它藉由合併、壓縮目前使用的 WordPress 主題的 HTML、CSS 和 JavaScript 程式碼,來達到整個網站的加速與優化,讓你的 WordPress 網站開啟速度加快。

你只需要安裝這款外掛,就能直接在後台的 Autoptimize 外掛設定頁面優化你的主題 HTML、CSS 和 JavaScript 檔案。

你可以連去 WordPress 官方外掛網站下載上傳安裝,也可以直接在你 WordPress 網站後台的外掛設定頁面輸入「Autoptimize」關鍵字搜尋、直接點擊安裝。還不懂怎麼安裝外掛嗎?請先觀看我們之前的教學

Autoptimize 外掛設定

Autoptimize 外掛設定說明

Autoptimize 外掛設定說明

一、HTML 設定選項

  • 請先勾選「是否優化 HTML 程式碼」啟用它。
  • 「Keep HTML comments?」選項是問你是否保留 HTML 檔案中的程式碼註解,如果你要顯示註解就勾選此項。

二、JavaScript 選項

  • 請先勾選「是否優化 JavaScript 程式碼」啟用它。
  • 「Force JavaScript in < head >?」是詢問你是否要強制在 < head > 中載入 JavaScript 特效,通常我們會將 jQuery 函式庫放在此,其他比較影響不大的 js 效果就會放在頁尾載入(footer),這樣對於網頁的整體性能會比較好,也能加快網頁載入速度,所以這個選項你可以勾選啟用。
  • 「Look for scripts only in < head >?」這是問你是否「只」在頁首( < head >)尋找 js 程式碼,這個預設是不啟用的,我們維持現狀即可。
  • 「Exclude scripts from Autoptimize」這裡你可以設定要排除被優化的 js 程式碼,你可以直接把檔名輸入,並且使用半形逗號來分隔。
  • 「Add try-catch wrapping」如果你的 js 程式碼因為 Autoptimize 外掛出了問題,你可以勾選此項來做排除的動作。

三、CSS 選項

  • 請先勾選「是否優化 CSS 程式碼」啟用它。
  • 「Generate data: URIs for images?」:如果你啟用這個選項,將會替你的圖片產生資料數據給 CSS 樣式表使用,例如圖片網址。
  • 「Look for styles only in < head >」:這裡詢問你是否只在頁首載入樣式表?這個選項預設是停用的,但如果你的快取資料變大,反而造成載入速度變慢,那時你就可以啟用此選項。
  • 「Inline and Defer CSS」:這個選項是讓你列出你想要延遲載入的內連樣式表,亦即,我們只在網頁中載入主要的 CSS 樣式表,其他樣式表可以在頁面有需要時才載入,這樣也能加快網站頁面的載入速度。當你勾選此項,會出現文字輸入框讓你填寫你的內連樣式表,你可以在文字輸入框中列出你想要延遲載入的樣式表檔案名稱,一行一筆。
  • 「Inline all CSS」:這是詢問你是否要將所有樣式表改成內連型態?雖然這麼做可以提高網頁載入速度,但是因為有些樣式表的特性,全部內連可能會造成效能降低並且出錯,所以此項目不須勾選。
  • 「Exclude CSS from Autoptimize」:這裡是讓你輸入想要排除優化的樣式表檔案名稱。

四、CDN 選項

如果你有在使用 CDN 服務(內容網路分發服務),你可以在此輸入你的 CDN 服務商給你的網址。如果你沒有使用此服務,這裡就不用填寫。

五、快取資訊

  • 「Cache folder」你的快取資料夾,通常當你安裝好 Autoptimize 外掛,這裡就會直接顯示資料夾名稱,它只是列出來給你觀看。
  • 「Can we write」這是詢問你檔案是否可寫入?這裡會顯示「Yes」,因為你已經順利安裝此外掛。
  • 「Cached styles and scripts」當你上述的選項都已經設定完畢,這裡就會列出你的樣式表和 js 程式碼經過快取之後的檔案大小。
  • 「Save aggregated script/css as static files」:這是詢問你是否儲存 js 程式碼和 CSS 樣式表的靜態匯總檔案?預設是啟用此功能的,通常一般情況下,所有儲存的 CSS 樣式表和 js 程式碼檔案都是靜態的,但如果你的虛擬主機商無法正確處理檔案壓縮和到期設定的功能,那麼你就將此選項停用。

教學尾聲

以上就是 Autoptimize 外掛的介紹與設定說明,今天的教學就到此結束,大家還喜歡嗎?如果有關於這方面的相關問題,歡迎留言討論。

別忘了持續關注 StartPress 工作室團隊,你可以參加我們在 Facebook 的粉絲團,或是訂閱我們的 RSS 電子報

如果有關於 WordPress 使用上的問題,歡迎你好好利用 Google 搜尋引擎找尋網路上豐富的教學資源,或是參加 WordPress Taiwan 在 Facebook 的正體中文社團
[divider]

如果您喜歡我們的 WordPress 教學文章,別忘了在底下幫我們評分。假若您需要我們替您進行 WordPress 主題客製化,請填寫諮詢表單聯繫我們。