[優化] 使用W3 total cache 讓自己的wordpress變得更快吧

這篇文章只是大概介紹一下使用W3 total cache的安裝方法,跟演示一下效果uwu

安裝方法

首先,進入你的wordpress控制台 (Dashboard)
左側工具欄 (外掛 —-> 安裝外掛)

image

在搜尋欄搜尋 “W3 total cache”

image

按下那個大大的 “立即安裝” 就對了

安裝完之後,因為我是用NginxWordPress的關係
我們要在 .conf 裡面添加東西

(.conf 通常會在 /etc/nginx/site-available 裡面)

添加的東西如下

# BEGIN W3TC Minify cache
location ~ /wp-content/cache/minify/.*js_gzip$ {
    gzip off;
    types {}
    default_type application/x-javascript;
    add_header Content-Encoding gzip;
    etag off;
    if_modified_since exact;
    add_header Pragma "public";
    add_header Cache-Control "max-age=31536000, public";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    add_header Vary "Accept-Encoding";
}
location ~ /wp-content/cache/minify/.*css_gzip$ {
    gzip off;
    types {}
    default_type text/css;
    add_header Content-Encoding gzip;
    etag off;
    if_modified_since exact;
    add_header Pragma "public";
    add_header Cache-Control "max-age=31536000, public";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    add_header Vary "Accept-Encoding";
}
# END W3TC Minify cache
# BEGIN W3TC Minify core
set $w3tc_enc "";
if ($http_accept_encoding ~ gzip) {
    set $w3tc_enc _gzip;
}
if (-f $request_filename$w3tc_enc) {
    rewrite (.*) $1$w3tc_enc break;
}
rewrite ^/wp-content/cache/minify/ /index.php last;
# END W3TC Minify core
# BEGIN W3TC Browser Cache
gzip on;
gzip_types text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel;
location ~ \.(css|htc|less|js|js2|js3|js4)$ {
    etag off;
    if_modified_since exact;
    add_header Pragma "public";
    add_header Cache-Control "max-age=31536000, public";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    try_files $uri $uri/ /index.php?$args;
}
location ~ \.(html|htm|rtf|rtx|txt|xsd|xsl|xml)$ {
    etag off;
    if_modified_since exact;
    add_header Pragma "public";
    add_header Cache-Control "max-age=3600, public";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    try_files $uri $uri/ /index.php?$args;
}
location ~ \.(asf|asx|wax|wmv|wmx|avi|avif|avifs|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|_ttf|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    etag off;
    if_modified_since exact;
    add_header Pragma "public";
    add_header Cache-Control "public";
    add_header Referrer-Policy "no-referrer-when-downgrade";

    location ~* ^(?<path>.+)\.(jpe?g|png|gif)$ {
        if ( $http_accept !~* "webp|\*/\*" ) {
            break;
        }

        expires 31536000s;
        etag off;
        if_modified_since exact;
        add_header Pragma "public";
        add_header Cache-Control "public";
        add_header Referrer-Policy "no-referrer-when-downgrade";
        add_header Vary Accept;
        try_files ${path}.webp $uri /index.php?$args;
    }

    try_files $uri $uri/ /index.php?$args;
}

或是你可以去 wp-admin/admin.php?page=w3tc_install 的頁面往下滑
他會自動生成 config 給你
添加完之後SSH輸入 nginx -s reload
就可以開始設定W3 total cache了

基本設定

這個外掛可以設定的東西有很多,有時間的話可以自己一個一個調看看
想要間單一點的就幾個選項勾一勾就好ㄌ
下面列幾個,開了效果蠻大的功能

設定功能

Page Cache

  • Page Cache Method: Disk: Basic (因為用到HTTP/2 push)

Minify

  • Minify mode: Auto
  • Minify Cache Method: Disk
  • HTML minifier: Minify
  • JS minifier: JSMin
  • CSS minifier: Minify

在左側工具欄 Performance —> Minify
JS 和 CSS有 HTTP/2 push這個選項
都打勾之後按右下的Save Settings & Purge Caches 就可以了

Database Cache

  • Database Cache: Disk

效果

使用前:

image

19 個請求 (扣掉預先載入的頁面為14個請求)

使用後:

image

14個請求 (扣掉預先載入的頁面為9個請求)

總之效果還是不錯的,推薦大家使用看看