WP Super Cache 設定教學 – 運用網站快取及預先載入優化網站速度

WP Super Cache 設定教學 – 優化網站載入速度 課程綱目:

1.WP Super Cache 安裝與內容設定

2.WP Super Cache 驗證是否正常啟用的操作方法

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– WP Super Cache 設定教學 – 優化網站載入速度,WordPress 網站必備外掛,在網站正式上線後,有許多網站必須優化的項目,而網站載入速度更是重點中的重點,對於搜尋引擎來說,在爬取(Crawling)網站連結的過程如果等待主機回應時間過長,有很大可能性會放棄繼續收錄網站連結,更不用說 Google 早已把網站載入速度這件事情做為 SERP 的排名要素,可以說如果沒有真正重視網站載入速度這個項目,對於網站 SEO 是相當不利的。而對於網站瀏覽者而言就不需要筆者多做解釋了吧!一個載入全部內容會超過10秒的網站,相信很多人都會選擇直接跳出,直接導致流量的損失。

在開始解說 WP Super Cache 這個 WordPress 外掛之前,先簡單說明什麼是 Cache(快取、緩存),瀏覽器向網站伺服器發出連線要求後,網站就會開始執行動態 PHP 程序,從資料庫(Datebase)中調用 HTML 、CSS、JavaScript等程式語法來讓瀏覽器正確顯示網頁內容,而瀏覽器在經過第一次讀取網站後,就會將不易變動的 HTML 架構內容(比如圖片、文字)儲存到使用者瀏覽器所在電腦記憶體中,當瀏覽者第二次開啟相同網站時,瀏覽器會開始比對第一次存放在 Cache 中暫存的資料,如果說 Cache 未過效期,就會直接調用 Cache 中儲存的網頁資料,而不需要再呼叫伺服器至資料庫重新演算,進而達到快速顯示網站內容的目的。

WP Super Cache 運作原理就是 Cache 概念的衍生,將原本需要 PHP 動態讀取資料庫以顯示網頁的程序,更改為在伺服器端模擬 HTML 靜態網頁,如此當使用者開啟網站時瀏覽器會抓取 Cache 中 HTML 靜態網頁的內容,而不需要再耗費時間執行 PHP 動態演算調用資料庫的過程,降低主機資源消耗,進一步達到網站加速的效果。而 WP Super Cache 除了上述功能,另外還能開啟預先載入,這個項目可以對網站中所有頁面及文章產生 supercache 靜態檔案,讓 Google 搜尋引擎在爬取網站時更有效率,增加提升網站排名的機會。接下來筆者將對 WP Super Cache 建議的設定方式做解說,如果環境允許,建議可以安裝外掛後照著本篇教學步驟實作,避免設定錯誤導致網站問題。

WP Super Cache WordPress 外掛下載:https://wordpress.org/plugins/wp-super-cache/

(小提醒:本次教學內容以設定 WP Super Cache 使其正常運作為主,專有名詞與運作原理等有興趣的同學可自行查找,網路上有許多免費資源可供閱讀 )

• WP Super Cache 安裝與內容設定

第一步:進入到 WordPress 後台在安裝外掛選項中查找 WP Super Cache ,如下圖所示依序點選立即安裝與啟用。外掛安裝方式請參考:WordPress 教學 基礎介紹六(外掛)

WP Super Cache 設定教學 - 優化網站載入速度

WP Super Cache 設定教學 - 優化網站載入速度

在後台側邊工具欄的 Setting 可以找到 WP Super Cache 的設定選項

WP Super Cache 設定教學 - 優化網站載入速度

第二步:進入到 WP Super Cache 設定介面,第一個簡易模式中開啟快取項目打開,如下圖所示。

WP Super Cache 設定教學 - 優化網站載入速度

第三步:進階選項頁籤中的設定項目將建議選項全部打開,如下圖所示。緩存傳遞方法這個選項在網路上對較舊版本的 WP Super Cache 教學文中是分成三項,Mod_Rewrite、PHP Caching、Legacy Caching,而筆者在寫這篇教學文章時( WP Super Cache 版本 1.6.4 )只有 Simple 與 Expert(專家)這兩個項目可選,根據外掛說明文件,如果選擇 Expert 需要 Apache mod_rewrite 與 編輯 .htaccess ,Expert 模式需要具有一定的程式語言基礎並暸解網頁原理再來做設定,才不會導致網站嚴重問題。因為每一個網站架構與設定方式都不相同,在本篇教學文章中無法一一列舉,因此教學內容以 Simple 設定為主,這也是外掛說明文件中作者推薦的選項。

WP Super Cache 設定教學 - 優化網站載入速度

設定完後記得在下方點選更新狀態。

WP Super Cache 設定教學 - 優化網站載入速度

第四步:使用 Simple 模式是以 PHP 生成 HTML 靜態檔案,如果當外掛安裝有問題或者沒有運作時,可以透過 FTP 進入到 WordPress 安裝的根目錄中下載 wp-config.php 做檢查,如果有需要編輯,請記得備份原檔案在電腦中,將修改檔上傳覆蓋即可。。

WP Super Cache 設定教學 - 優化網站載入速度

筆者的教學網站在之前有安裝過其他的 Cache 外掛,因此在 wp-config.php 中必須先刪除舊有外掛的登錄資訊,替換成下方的程式碼,或者說在檢查 wp-config.php 找不到下方程式碼時也可以自行加入,位置在文件開頭 <?php  的下一行。

  define('WP_CACHE', true);

WP Super Cache 設定教學 - 優化網站載入速度

加入後會在文件開頭處出現以下程式碼,表示設定完成。

WP Super Cache 設定教學 - 優化網站載入速度

第五步:同樣在進階選項的設定介面中,可以找到過期時間與垃圾回收的設定區塊,可以設定 Cache 的有效時間,過期了 Cache 就會失效 ,如果説網站已經上線沒有在做內容編輯,這個時間可以設定久一點。而計時項目中則是 WP Super Cache 檢查過期 Cache 並刪除的時間間隔,以重新釋放空間,比較建議的做法是計時器的時間與 Cache 有效時間相同(在沒有頻繁更新網站內容的狀態下)。

WP Super Cache 設定教學 - 優化網站載入速度

同樣設定完成記得要點選變更過期時間,在說明文字的下方。

WP Super Cache 設定教學 - 優化網站載入速度

第六步:進階選項中也可以指定網站哪些頁面不要 Cache ,或者加入相同規則網址中的共同字串,在外掛中都有說明,設定這裡的選項是為了當要修改特定頁面時,可以暫停該頁面的快取功能,讓變更的內容可以即時反應在網站上。

WP Super Cache 設定教學 - 優化網站載入速度

• WP Super Cache 驗證是否正常啟用的操作方法

第一步:當 WP Super Cache 設定完成後,可以到內容中查看已被快取的 Cache,點選最右方的X可以刪除該頁面的 Cache 檔案。

WP Super Cache 設定教學 - 優化網站載入速度

第二步:預先載入可以產生已發布頁面的 Cache,與之前同樣的規則,如果經常性在修改網站內容,更新預載快取檔案的時間可以縮短一些,最低 30 分鐘會重新生成 Cache 檔案,而下方的兩個選項 Preload mode (garbage collection disabled. Recommended.)如果勾選就會停用收集過期 Cache ,外掛作者建議要勾選,因為如果不勾選則預先載入的 Cache 檔案在設定的時間被不斷的被判定是過期 Cache,如此就失去預先載入 Cache 的意義,至於預載標籤,類別,以及其它的分類這個選項就要以自身網站架構來判定,筆者的分類頁面具有許多文章圖片,為了更快載入網頁所以有做勾選。

WP Super Cache 設定教學 - 優化網站載入速度

如上圖所示點選馬上開始預先載入後就會在該頁籤介面的上方出現 Cache 更新的倒數提示,表示預先載入功能已經啟用。

WP Super Cache 設定教學 - 優化網站載入速度

第三步:那麽要如何檢查 WP Super Cache 已經在網站上正常運作了?非常簡單,在網站前台頁面中點選右鍵 > 檢視網頁原始碼,在最下方如果有找到以下文字,就表示 WP Super Cache 已經正常運作了。


< !-- Dynamic page generated in 0.547 seconds. -- >
< !-- Cached page generated by WP-Super-Cache on 2018-08-31 14:09:23 -- >

WP Super Cache 設定教學 - 優化網站載入速度

WP Super Cache 設定教學 - 優化網站載入速度

第四步:另外的方法是在 WP Super Cache 的介面中選擇簡易模式,如下圖所示點擊測試快取。

WP Super Cache 設定教學 - 優化網站載入速度

在這裡就會抓取 WP Super Cache 模擬的 HTML 靜態網頁並測試,如果出現下圖的結果,表示 WP Super Cache 已正常運行。

WP Super Cache 設定教學 - 優化網站載入速度

第五步:另外補充說明如果想要刪除整個網站的快取,可以在後台上方工具列找到刪除快取的選項,點擊後回到前台重新整理頁面,就可以看到最新的網站狀態(如果有做網站內容變更的話)。

WP Super Cache 設定教學 - 優化網站載入速度

第六步:下圖是筆者完成 WP Super Cache 設定後在 Pingdom Website Speed Test 國外測速網站中所得到的速度測試結果,分數相當不錯,如果各位也完成設定了,不妨到這裡測試一下網站載入速度。

WP Super Cache 設定教學 - 優化網站載入速度

結語:

網站速度優化的方式有很多種,對 WordPrss 網站而言 Cache 相關的外掛就有數十種之多,有的也可以做到更加詳細的設定,WP Super Cache 的選項並不多,功能與其他  Cache 外掛相比之下也不夠完善,但對於剛起步的新網站而言,WP Super Cache 所提供的功能已經夠用了, 等到網站流量變高,或者日積月累下網站資料變得更多時,就可以考慮其他有有更多功能可以設定的 Cache 外掛。另外如果說網站還在測試階段,需要頻繁的做內容元素排版修改,那麼筆者不建議在這樣的階段安裝 Cache 外掛,因為 Cache 這樣的技術其實是一體兩面的,預先存取的網站資料固然可以加速網站瀏覽,但在網站內容更動後想要查看在網站前台顯示的效果或樣式時,會發生不斷重新整理但所修改的樣式一直沒有改變,必須要在後台清除快取或者使用瀏覽器的清除瀏覽資料,才能讓網站變更內容正確顯示,如此就浪費許多時間在不必要步驟上,因此建議網站內容已基本確定,不會有大範圍變更時,再來開起 Cache 外掛的功能。

今天的教學到這裡告一段落了,不要忘記在右邊訂閱電子報以隨時關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top