我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao

這場議程將告訴你如何不花一毛錢提升 40% 業績。網路上的商業競爭，當你的網站載入時間超過 3 秒，40% 的使用者會選擇跳出不再等待，意味著你花大錢廣告，讓客戶點擊你的網址，其中有 4 成廣告費都砸在水裡。 比比看，F1 一級方程式賽車，維修站換好四顆輪胎只要 1.91 秒，你的網站顯示要幾秒？議程內容將包含：

全站 AMP 網頁 + Server-side rendering + CDN + Premium DNS
Nginx + Fastcgi Cache + Redis Cache + HTTP2 (or HTTP3)
Php-fpm workers
Brotli 壓縮 + TLS1.3 0-RTT
Ngx_pagespeed
New Relic rpm 偵測速度瓶頸
資料庫查詢最佳化
Plugins 設定最佳化

Transcript

1. WordPress 全端速度優化
   紅米青年旅館 JOSH
   Line討論群
   

   View Slide

2. 天下武功 唯快不破
   • F1一級方程式賽車，維修站更換四顆輪胎只要1.88秒，
   你的網站載入要幾秒?
   • 網站的搜尋引擎排序和載入速度息息相關
   • 當網頁載入時間超過3秒，40%的使用者會選擇跳出不再
   等待
   • AMAZON 自身估計，當他們的網站載入時間每慢 1 秒，
   AMAZON 的損失就可能高達 16 億美元
   

   View Slide

3. 全站AMP網頁
   透過Astra佈景主題+AMP 外掛 + Gutenberg編輯器
   AMP相容佈景主題和外掛列表
   https://amp-wp.org/ecosystem/
   

   View Slide

4. 伺服器端渲染(SSR)
   • AMP 會先隱藏網頁畫面，直到畫面布局計算完成，才顯示網頁畫面
   • SSR可以再加快58%的網頁渲染速度
   Load Time
   (s)
   Start Render
   (s)
   First
   Interactive (s)
   Original 5.435 4.591 5.367
   AMP 4.591 -15.53% 4.566 -0.54% 5.094 -5.09%
   AMP + SSR 4.095 -24.66% 1.892 -58.79% 4.818 -10.23%
   

   View Slide

5. 免費 V.S. 付費 DNS
   

   View Slide

6. CDN
   TTFB (不使用 CDN) TTFB (使用 CDN)
   

   View Slide

7. NGINX + FASTCGI CACHE + PHP7
   Nginx處理靜態內容(Static content)
   的效能為APACHE的2倍 Fastcgi 快取讓PHP反應時間更快 PHP7.3速度是PHP5.6的三倍快
   

   View Slide

8. PHP 7.4 & 預載功能
   

   View Slide

9. 資料庫查詢快取
   • REDIS CACHE可以暫存資料庫查詢結果，減少資料庫查詢浪費的時間
   • REDIS有兩種： PHPREDIS(C語言撰寫) 和 PREDIS(用PHP撰寫)
   • 請用PHPREDIS， PHPREDIS的速度是PREDIS的6倍快
   

   View Slide

10. HTTP/2 V.S. HTTP/3
    HTTP/1 HTTP/2
    

    View Slide

11. 減少建立HTTPS連線耗時
    100ms
    200ms
    0-RTT (Zero Round Trip Time Handshake)
    

    View Slide

12. PHP-FPM WORKERS
    PHP-FPM Workers就像大賣場收銀員，收銀員越多結帳速度越快
    *電子商務型網站，收銀員數量很重要
    

    View Slide

13. BROTLI文字檔案壓縮
    Brotli比gzip壓縮再減少26%檔案大小
    壓縮等級 比GZIP解壓縮速度 比GZIP壓縮檔案大小
    Brotli (4) 快21% 小9%
    

    View Slide

14. PAGESPEED模組
    • 優化傳輸頻寬（過濾）（壓縮圖片、CSS、JS文件，去除HTML空白）、降低請求（CSS、
    JS文件合併、識別並重新定向常用JS庫、CACHE控制）、DOMAIN映射（支援CDN）、
    提升客戶端體驗（圖片預載、延遲加載，圖像最佳化）…
    • 讓PAGESPEED模組來幫你幹這些網頁速度最佳化的粗活
    • 為什麼不用WP SUPER CACHE 或 WP ROCKETS等速度最佳化外掛?
    因為PHP慢…
    

    View Slide

15. 資料庫查詢最佳化
    • 採用INNODB，不要用MYISAM Options 資料表Autoload欄位設定索引
    前 後
    

    View Slide

16. 主從式資料庫架構
    https://wordpress.org/plugins/hyperdb/
    需安裝HyperDB Plugin，讓WordPress支援主從式資料庫架構
    

    View Slide

17. PLUGINS 設定最佳化
    • 使用程式寫得好的Plugins
    • 不要用來路不明的Plugins
    • Plugins正確設定
    • 將Plugins移除乾淨
    https://kinsta.com/best-wordpress-plugins/
    程式效能寫的較佳的推薦外掛
    

    View Slide

18. 卸載非必須檔案
    非WooCommerce頁面，卸載WooCommerce相關的 CSS 和 JavaScript 檔案
    

    View Slide

19. 卸載WordPress累贅的功能
    停用 RSS Feeds、移除 jQuery Migrate、移除 RSD連結、移除 wlwmanifest連結、移除檔案版本…
    減少主機負載
    

    View Slide

20. 關閉WordPress排程工作(WP cron jobs)
    • WORDPRESS的排程工作在【每次網頁被瀏覽】的
    時候，都會先去比對當前是否有排程工作要執行，
    如果你安裝的PLUGIN偷偷幫你排程了甚麼執行很
    久或含有大量資料庫查詢的排程工作，便會大量消
    耗你的CUP、記憶體和佔據PHP WORKER ，增加你
    主機的負擔。
    • 改由”作業系統”來排程工作
    • 安裝CORN 管理外掛來刪除不必要的排程工作
    

    View Slide

21. 找出速度瓶頸 NEW RELIC
    

    View Slide