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

我的 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 設定最佳化

0d9743a94b19d92224b6928a6c2f8ad1?s=128

WordCamp Taipei

December 28, 2019
Tweet

Transcript

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

  2. 天下武功 唯快不破 • F1一級方程式賽車,維修站更換四顆輪胎只要1.88秒, 你的網站載入要幾秒? • 網站的搜尋引擎排序和載入速度息息相關 • 當網頁載入時間超過3秒,40%的使用者會選擇跳出不再 等待

    • AMAZON 自身估計,當他們的網站載入時間每慢 1 秒, AMAZON 的損失就可能高達 16 億美元
  3. 全站AMP網頁 透過Astra佈景主題+AMP 外掛 + Gutenberg編輯器 AMP相容佈景主題和外掛列表 https://amp-wp.org/ecosystem/

  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%
  5. 免費 V.S. 付費 DNS

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

  7. NGINX + FASTCGI CACHE + PHP7 Nginx處理靜態內容(Static content) 的效能為APACHE的2倍 Fastcgi

    快取讓PHP反應時間更快 PHP7.3速度是PHP5.6的三倍快
  8. PHP 7.4 & 預載功能

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

    請用PHPREDIS, PHPREDIS的速度是PREDIS的6倍快
  10. HTTP/2 V.S. HTTP/3 HTTP/1 HTTP/2

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

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

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

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

    CACHE 或 WP ROCKETS等速度最佳化外掛? 因為PHP慢…
  15. 資料庫查詢最佳化 • 採用INNODB,不要用MYISAM Options 資料表Autoload欄位設定索引 前 後

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

  17. PLUGINS 設定最佳化 • 使用程式寫得好的Plugins • 不要用來路不明的Plugins • Plugins正確設定 • 將Plugins移除乾淨

    https://kinsta.com/best-wordpress-plugins/ 程式效能寫的較佳的推薦外掛
  18. 卸載非必須檔案 非WooCommerce頁面,卸載WooCommerce相關的 CSS 和 JavaScript 檔案

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

  20. 關閉WordPress排程工作(WP cron jobs) • WORDPRESS的排程工作在【每次網頁被瀏覽】的 時候,都會先去比對當前是否有排程工作要執行, 如果你安裝的PLUGIN偷偷幫你排程了甚麼執行很 久或含有大量資料庫查詢的排程工作,便會大量消 耗你的CUP、記憶體和佔據PHP WORKER

    ,增加你 主機的負擔。 • 改由”作業系統”來排程工作 • 安裝CORN 管理外掛來刪除不必要的排程工作
  21. 找出速度瓶頸 NEW RELIC