WordPress 是最受歡迎的 blog 系統,不過經多年發展功能雖然成熟,但它速度一向都是軟肋。
雖然我們看到的 WordPress 網站好像靜態網頁,但實制上 WordPress 是「即叫即制」的動態網頁,網頁上的所有元素都是即時由 database 不同部份集合而來做出一頁。
這種方法好處當然是易於維護,試想想如果你想加一個 widget 在旁邊,現在只要更改 database 一次,所有 post 都會更改,但如果是靜態網頁的話,就需要逐個逐個 post 更改,相信沒有人會這樣做。
但這樣的話每一個 visitor 來網站的時候,都需要讀 database 數次, 速度慢而且需要使用大量資源,如果人數一多就很易死機。
所以如果想加速 WordPress,最直接的方法莫過於使用一部強勁的伺服器,和選擇一部伺服器的地理位置接近網站的主要讀者群。但是在有限資源情況下,如何優化 WordPress 亦是重要解決方法之一。
優化方法主要就要將動態的網頁,預先制作成靜態的 HTML,當用戶來到的時候就直接讀最 HTML 檔案就可以了,另外亦可以壓縮 Javascript,令執行時可以更快速。

W3 Total Cache

W3 Total Cache (W3TC) 是 WordPress 最全面的優化 plugin,由 Page Cache 到 JS, CSS minify, CDN 等等全面照顧周到,不過就需要有多項設定。而另一個簡單一些的 plugin — WP Super Cache,就只有 page cache 功能,但基本上只需要 install & run 就可以,沒甚麽需要設定。
如果想免費完全加速的話,就最好用 W3 Total Cache 了,設定了一次後以後就 ok 了。

安裝 W3TC

安裝 W3TC 和其他 plugin 一樣那麽簡單。

W3TC setup 設定 step 1
只要在登入後台後,去 Plugins –> Add New,並打上 W3 Total Cache
W3TC setup 設定 step 2
Click 「Install Now」 就可以了

設定 W3TC

首先大家會接觸到的是 General Settings. General Settings 是控制每一個功能的開關。
在 General Settings 你會看到大量不同種類的 cache 設定如 page cache, object cache, database cache 等等,一般來設只需要開啟 page cache 就可以了
你只需要更改以下設定

Page Cache

Page Cache : Enable (tick)
Page cache method: Disk: Enchanced

W3TC General Settings Page Cache

Minify

Minify : Enable (tick)
Minify mode : Manual
(其他維持 default settings)

W3TC General Settings Minify

Database Cache

Database Cache: Enable (untick)
其他不變

Database cache 其實作用不大,速度反而可能下降

W3TC General Settings Database Cache

Object Cache

Object Cache: Enable (untick)
其他不變

Object Cache 和 DB Cache 一樣,都是沒有甚麽用,繼續 unclick 就可以了。

W3TC General Settings Object Cache

Browser Cache

Object Cache: Enable (tick)

Browser Cache 是另一個最重要的 Cache,這個 cache 是指令網頁的 HTML, CSS, 相片等下載到用戶電腦後,會保留多久。

W3TC General Settings Browser Cache

CDN

CDN: Enable (tick)
CDN Type: General

CDN 全名 Content delivery network,是一個全世界各地都有 server,當用戶想去你的網站時,就會去最近的 CDN server,不用越洋過海,所以速度會快很多。還有資源都由 CDN 直接到用戶那裏,不用自己 server,所以 bandwidth, server loading 都可以大大降低。所以可以用一個較弱的 server 依然可以提供一等一的速度。
提供 CDN 服務的有 Amazon, MaxCDN 等等,不過這些都是收費,但 General 這個設定依然可以免費地提高速度。

W3TC General Settings CDN

[nextpage title=」Page Cache」]

General

設定完 General Setting,就設定 Page Cache,在 General 設定如下:

  • Cache posts page (tick)
  • Don’t cache front page (untick)
  • Cache feeds: site, categories, tags, comments (tick)
  • Cache SSL (https) requests (tick)
  • Cache URIs with query string variables (tick)
  • Cache 404 (not found) pages (untick)
  • Cache requests only for www.enterpr1se.info site address (tick)
  • Don’t cache pages for logged in users (tick)
  • Don’t cache pages for following user roles (tick)
  • Administrator

W3TC Page Cache General

Cache Preload

Automatically prime the page cache (tick)
Preload the post cache upon publish events. (tick)
Sitemap URL (填上你的 sitemap 網址)
其他依 default setting 就可以了。

這個設定是令 server 預先為各 post 制定 HTML file,令瀏覽的客人可以第一時間讀取 HTML 而不用等待。
如果不 Enable 這個選項,那麽第一位來到的瀏覽客人的速度會較慢,因為是一邊傳送網頁順便制作 HTML,令第二位來的客人能更快。
而 Update interval 和 Pages per interval 是因為各 server 能力而隨意設定,一般來說 default 設定沒有問題,前者意思是相隔多久才去制造 HTML,而後者是每次制造多少,如前者是 100s,後者是 20 的話,即是每 100 秒,就制作 20 頁 HTML,100 秒後再制作另外 20 頁。
sitemap 網址可以安裝 plugin 如 Better WordPress Google XML Sitemaps,安裝完後不用設定任何東西,sitemap url 一欄填上 「/sitemap.xml」 就可以了

W3TC Page Cache Cache Preload

[nextpage title=」Minify」]

General

Minify 可以說是 W3TC 設定最困難的一個項目,因為未必所有 Javascript 和 CSS 都能夠被 minify,所以 Auto minify 失敗機會頗高,不過大家都可以首先嘗試 auto minify 有沒有問題,有問題時才用 manual minify 吧。

Minify 是一個 try & error 的設定,要花時間看看那個 JS 或 CSS 出事。
大家可以到 「help」 來觀看有甚麽

W3TC Minify Help

W3TC Minify Help Wizard

大家按 help 後,就會看到有 W3TC 偵測了各 Javascript 和 CSS.
大家最主要留意的是 All Template 和 Template: Single,因為這個是各文章的 minify 設定,其他 404 等等重要性比較低,因為需求較少。
而後 Embed Location 又是一門學問,因為不少 Javascript 在未執行完成前,不會載入網頁其他部份,所以會減慢速度。所以理論上將所有 JS 都放在 Embed before </body> 是最好,不過又不是所有 JS 放到最後。

企企個人建議,將所有 JS 都放進 before </body>,如果遇到問題,就將那一個 plugin 的 JS 都從 JS list 內移除,不再 minify.
另外將所有有 .min.js 的 Javascript 不要加進 list,因為這些檔案已經 minify 了。
這樣處理會簡單一點。

另外,在 minify 的 File URL 有一樣要注意,大家會看到類似
https://www.enterpr1se.info/wp-content/plugins/responsive-lightbox/js/front.js?ver=3.9.1
加進 list 時,需要將 ? 和之後的字串移除,變成
https://www.enterpr1se.info/wp-content/plugins/responsive-lightbox/js/front.js

HTML & XML

在 HTML & XML 內的 HTML minify settings 設定如下

  • Enable (tick)
  • Inline CSS minification (tick)
  • Inline JS minification (tick)
  • Don’t minify feeds (tick)
  • Line break removal (tick)

W3TC Minify HTML XML

而 Ignored comment stems 不用任何更改。

JS

  • JS minify settings: Enable (tick)
  • Preserved comment removal (not applied when combine only is active) (tick)
  • Line break removal (not safe, not applied when combine only is active) (untick)

將 JS 的 Embed Type 設定為 Non-blocking using 「async」

W3TC Minify JS

CSS

CSS minify settings:

  • Enable (tick)
  • Combine only (untick)
  • Preserved comment removal (not applied when combine only is active) (tick)
  • Line break removal (not applied when combine only is active) (tick)

@import handling: None

W3TC Minify CSS

Advanced

Advanced 並不需要改變

  • Update external files every: 86400 seconds
  • Garbage collection interval: 86400 seconds

W3TC Minify Advanced
[nextpage title=」Browser Cache」]

General

Database Cache 和 Object Cache 並不需更改。 (因為並不需要用)
而 Browser Cache 是下載到你電腦的 Cache 會保留多久。

  • Set Last-Modified header (tick)
  • Set expires header (tick)
  • Set cache control header (tick)
  • Set entity tag (eTag) (tick)
  • Set W3 Total Cache header (tick)
  • Enable HTTP (gzip) compression (tick)
  • Prevent caching of objects after settings change (untick)
  • Don’t set cookies for static files (tick)
  • Do not process 404 errors for static objects with WordPress (tick)
  • 404 error exception list: (keep default)

W3TC Browser Cache General

CSS

  • Set Last-Modified header (tick)
  • Set expires header (tick)
  • Expires header lifetime: 31536000 seconds
  • Set cache control header (tick)
  • Cache Control policy: cache (「public」)
  • Set entity tag (ETag) (tick)
  • Set W3 Total Cache header (tick)
  • Enable HTTP (gzip) compression (tick)
  • Prevent caching of objects after settings change (untick)
  • Disable cookies for static files (tick)

W3TC Browser Cache CSS JS

HTML & XML

  • Set Last-Modified header (tick)
  • Set expires header (tick)
  • Expires header lifetime: 7200 seconds
  • Set cache control header (tick)
  • Cache Control policy: cache with max-age (「public, max-age=EXPIRES_SECONDS」)
  • Set entity tag (ETag) (tick)
  • Set W3 Total Cache header (tick)
  • Enable HTTP (gzip) compression (tick)

W3TC Browser Cache HTML XML

Media & Other Files

  • Set Last-Modified header (tick)
  • Set expires header (tick)
  • Expires header lifetime: 31536000 seconds
  • Set cache control header (tick)
  • Cache Control policy: cache (「public」)
  • Set entity tag (ETag) (tick)
  • Set W3 Total Cache header (tick)
  • Enable HTTP (gzip) compression (tick)
  • Prevent caching of objects after settings change (untick)
  • Disable cookies for static files (tick)

W3TC Browser Cache Media & Other Files

Browser Cache 的保留時間越長,對 server 的負荷會較低,而網頁的速度亦會因為不用下載而再加快。
不過網頁 update 後用戶未必能即時更新,而 「Prevent caching of objects after settings change」 可以防止這情況,但是 search engine 對不同版本的網頁可能當作新一頁,不利 SEO (即時在搜尋引擎排名會較低)。
所以不建議開啓這個選項。
[nextpage title=」CDN」]

General

為甚麽要設定 CDN 呢,因為一般瀏覽器對一個網站的同時連線上限為 6 (WinXP 等較舊系統只有 2)。而 WordPress 等 blog 都有大量圖示,相片,CSS,JS 等等下載,而一般網站根本用不盡寬頻的速度,所以設定 CDN 可以將流量分流,每一部份都有專用的 domain name,如果分開 8 個 domain 就變相可以同時有 6 x 8 = 48 條連線,大大加速了網站的速度。

  • Host attachments (tick)
  • Host wp-includes/ files (tick)
  • Host theme files (tick)
  • Host minified CSS and JS files (tick)
  • Host custom files (tick)
  • Import external media library attachments (untick)
  • Add canonical header (tick)

W3TC CDN General

Configuration

SSL support: Auto
Replace site’s hostname with: (隨用戶喜歡)
W3TC CDN Configuration

Advanced

Advanced 主要需要 enable

  • Set cookie domain to 「YOUR DOMAIN」 (tick)

另外 Disable CDN for the following roles 可以隨用戶喜好 enable or disable.

W3TC CDN Advanced

設定 Domain

在第二 part Configuration 用戶加了不少 domain,當然所設定的 Domain 都需要真有其名才可以。
而自行架設 WordPress 的人相信都會有自己的 Damin 吧,所以就需要到買 domain 的公司設定,如 GoDaddy。
只要將 domain 名加入你的 DNS 就可以了。
如 GoDaddy 等,只需要將 domain name 如我設定的 cdn1.enterpr1se.info 用 CNAME 指向 www.enterpr1se.info 就可以了,非常簡單,在 Configuration 設定了多少就在 DNS 設定多少。

GoDaddy Zone Record

設定 W3 Total Cache 教學部份到此為止,相信網站速度應該提升了。
不過如果想再提速,可以使用真正的 CDN,速度又會到另一層次。

[nextpage title=」Cloudflare CDN 教學」]

cloudflare logo

Cloudflare CDN 最近都應該聽過它的名字,在 popvote 對應國家級網絡攻擊時,UdomainAmazon在攻擊前跪低,唯有 Cloudflare 抵擋了這次有史以來第二大的攻擊。
所以 Cloudflare 的 CDN 服務是非常不錯,香港也有伺服器,而難得的是它對一般用戶免費 !!
所以無論真正的伺服器是放在那裏,對香港的用戶來說都像伺服器在香港一樣,超快。

Cloudflare sign up
首先 sign up cloudflare
cloudflare scanning domain
登記資料開啓帳號後,就可以輸入 domain。
Cloudflare 會掃描你現在的設定,完成後按 Continue Setup 就可以了。
Cloudflare domain DNS
可以看到 Cloudflare 已經將舊 DNS 的資料抄過來。
留意到最右手邊,橙色雲代表那個 domain 會被 Cloudflare 加速,灰色的話就代表沒有加速。
記得將 www, 和在 W3TC 中 CDN 設定的 domain 都變成橙色加速呀。
Cloudflare choose plan
之後就到選擇計劃,大家用免費就可以了。
Performance 可以選擇 CDN + full optimizations (bleeding edge speed)
Cloudflare change name server
之後將 Domain 的 Name Server 轉過來 Cloudflare 就可以了。
GoDaddy change Nameservers
最後要到 domain 的公司更改 Nameserver 到剛才 Cloudflare 給你的地址。
更改完後可能需要數小時到 24 小時才生效。

Cloudflare 最基本的設定已經完成,所有網站的 CSS, JS, 相片圖示等,都會經過 Cloudflare 加速,不過如果想將網站完全放在 Cloudflare 100% 加速的話,就需要進階設定。
[nextpage title=」Page Rules」]
經過 W3TC 優化網頁後,其實 WordPress 已經變成了 HTML + CSS + JS + 相的網站。而 Cloudflare 已經加速了 CSS + JS + 相,那麽可否連 HTML 也加速呢?
答案是可以的,解決方法就在 Page Rules.

Cloudflare Pagerules

Page Rules 免費版只有三行,所以要最大化利用 (YOUR_DOMAIN.COM = 你的網站 domain name)

  • *YOUR_DOMAIN.COM/*
  • *YOUR_DOMAIN.COM/wp-login.php*
  • *YOUR_DOMAIN.COM/wp-admin/*

第一行是將所有網頁都使用 Cloudflare 加速,包括 cache HTML。
第二和第三行是避免 WordPress login page 和後台被影響到。

第一行 ( *YOUR_DOMAIN.COM/* ) 詳細設定

  • Custom caching : Cache Everything
  • Edge cache expire TTL : 1 week
  • Browser cache expire TTL : 30 min (即是每 30 分鐘 用戶 browser 的 cache 就會過期,會再在 Cloudflare 下載新資料)
  • Always Online : On
  • Apps : On
  • Smart Errors : On
  • Performance : On
  • Rocket Loader : Default
  • Security : On
  • Security Level : Default
  • Browser Integrity Check : Default

Cloudflare Pagerules all

wp-login 和 wp-admin 詳細設定

  • Custom caching : ByPass cache
  • Browser cache expire TTL : 30min
  • Always Online : Off
  • Apps : Off
  • Smart Errors : Off
  • Performance : Off
  • Rocket Loader : Default
  • Security : Default
  • Security Level : Default
  • Browser Integrity Check : Off

Cloudflare Pagerules wp-login

Cloudflare Pagerules wp-admin

其實 Cache Everyone 有好處亦有壞處,好處當然是網站可以幾乎彈出來一樣,超快。
壞處是 Admin 也會看到 Cache 版網頁,如果有更新的話,未必能即時看到結果;每次想去後台也需要自行在網址列打上 http://domain.com/wp-admin 才能進入。
管理上雖然不太方便但對server 負載或連速都無可挑剔。
就如早前東周刊測試 apps 和機頂盒那篇報導很受歡迎,在 Google Analytics 看到 Real Time 的人數超過 200 人,但 server 負載連 10% 也沒有,人再多也沒有壓力。

server loading
毫無壓力,但如果不使用 CDN 一定沒有這麽輕鬆了。

更新網頁

如果更新了網頁想用戶即時看到怎樣辦呢?
就要首先到 All Posts list 內,選擇 Purge from cache (其實在 Page Cache 一欄內鈎選了 Preload the post cache upon publish events 就應該會在 update 時自動更新 cache,不過清多一次確定一下吧。)

Purge from cache

清空了那一頁的 Cache 後,就到 Cloudflare 網站,選 Cloudflare Settings

Cloudflare CloudFlare settings

Cloudflare Settings Cache Purge
按 Purge single file 再打上網址,之後 click 「Purge File」 就可以了

網址可以 copy & paste 你更改了的那一頁。
等 Cloudflare 移除了那一頁後,就可以用隱身模式再開啓那一頁,應該已經看到更新了。
(如果不開啓隱身模式會看到之前儲在用家電腦的舊版本)