[WordCamp Taipei 2018] 經營10年以上、使用30個外掛、資料庫有千篇以上文章的WordPress網站，作者吃飽撐著沒事就想把網站的頁面顯示速度弄快一點。從主機、外掛、到CDN全面調整，最終達成1秒顯示首頁的愛與眼淚的故事，網站優化總集篇。 附註：投影片記載的最佳化方式是節錄過去各種踩地雷嘗試之後覺得還不錯，可以和大家分享的內容。測試結果是依據投影片製作當時的資料，和現行網站系統架構並不一定完全相同。

1. 1秒鐘的奮戰：
WordPress網站優化的愛恨情仇
Speaker: WilliamTai
2018/10/21
WordCamp Taipei 2018
#WCTPE
1
WordPress Optimize:
A Love-hate Relationship

2. WHO AM I
• 旅日工作的工程師
• 日本WordCamp忠實聽眾
• WordPress經歷10年以上
• コミケ常客
• 中文能力退化中
2
WilliamTai

3. 講這麼多
3

4. 就只是個肥宅！
4

5. 概要
• 「慢」是怎麼回事
• WordPress網站最佳化甘苦談
• 我的最佳化原則
• 結論
5

6. 希望各位帶回去的
• 網頁最佳化的整體概念
• 相關外掛/關聯技術的關鍵字
6

7. 網站特性
• 照片很多
首頁很重
• 外掛很多
各種JS掛好掛滿
• 作者富奸上身
雖然我沒有PS4
7

8. 目標
• 首頁載入8~10秒 -> 1秒
測試工具：Pingdom Website Speed Test
• 高解析照片不能少
身為Mac用戶的堅持！
• 網站功能不減少
功能少了看起來就Low了！（偏見
8

9. 先看結果
9

10. 10

11. 11

12. 「慢」是怎麼回事
12

13. 13
網站很慢
（使用者觀點）

14. 14
網站很慢
（工程師觀點）

15. 15
網站很慢
（問題分析）
伺服器端中繼網路

16. 伺服器端
16

17. 伺服器端改善
• 伺服器系統相關
硬體：AWS EC2 Instance
伺服器設定（重點）：HTTP/2
• WordPress網站內部
快取外掛
WebP圖檔格式
17

18. HTTP/2
• HTTP/1.1 vs HTTP/2
https://http2.akamai.com/demo
18
• Chrome開發人員工具/Network

19. 快取外掛
• W3 Total Cache
火力強大，設定複雜
部分功能可能破壞網頁佈局，需不斷測試
• WP Super Cache
安全牌，該有的都有
• Cache Enabler
設定陽春，支援WebP格式
• …etc
19

20. WebP格式
• Google釋出的圖像格式
https://developers.google.com/speed/webp/
• 檔案大小
無失真壓縮比PNG小25%
失真壓縮比JPEG小25-34%
• Chrome、Opera支援
• EWWW Image Optimizer外掛支援JPG->WebP
20

21. 中繼網路
21

22. CloudFlare
• CDN兼DNS兼防火牆
• 小課金：Argo（月費制：USD$5+使用量）
Time to First Byte (TTFB)改善約30%
• 常見台灣用戶節點：台北/香港/美西
22

23. Argo效能改善範例
23

24. 課題
• 瀏覽器相依性
Ex.WebP格式不是所有瀏覽器支援
• 外部服務的JS檔案
Google Analytics、Facebook pixel…etc
• WordPress核心/外掛/佈景升級
• 測試結果並不完全等同於使用者實際體驗
24

25. 我的最佳化原則
• 1人也能執行的最小管理負擔原則
• WordPress檔案不碰
• 功能增減以外掛/佈景為單位
• 分散伺服器負擔
25

26. 結論
• 網站頁面構成、網站主機、CDN都是影響網頁顯
示速度的因素
• Case by case、沒有唯一解
• 保持系統最佳化與擴充性的平衡
26

27. 27
Facebook
https://go.wtai.moe/fbpage
Thank you