Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

伺服器端渲染(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%

Slide 5

Slide 5 text

免費 V.S. 付費 DNS

Slide 6

Slide 6 text

CDN TTFB (不使用 CDN) TTFB (使用 CDN)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

PHP 7.4 & 預載功能

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

找出速度瓶頸 NEW RELIC