$30 off During Our Annual Pro Sale. View Details »

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

WordCamp Taipei

December 28, 2019
Tweet

More Decks by WordCamp Taipei

Other Decks in Technology

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