1 秒鐘的奮戰：WordPress 網站優化的愛恨情仇/WordPress Optimize: A Love-hate Relationship
- 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
- 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 網站很慢 （工程師觀點）
- 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