Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1 秒鐘的奮戰:WordPress 網站優化的愛恨情仇/WordPress Optimize: A Love-hate Relationship

482 views

Published on

[WordCamp Taipei 2018]
經營10年以上、使用30個外掛、資料庫有千篇以上文章的WordPress網站,作者吃飽撐著沒事就想把網站的頁面顯示速度弄快一點。從主機、外掛、到CDN全面調整,最終達成1秒顯示首頁的愛與眼淚的故事,網站優化總集篇。

附註:投影片記載的最佳化方式是節錄過去各種踩地雷嘗試之後覺得還不錯,可以和大家分享的內容。測試結果是依據投影片製作當時的資料,和現行網站系統架構並不一定完全相同。

Published in: Software
  • Be the first to comment

  • Be the first to like this

1 秒鐘的奮戰:WordPress 網站優化的愛恨情仇/WordPress Optimize: A Love-hate Relationship

  1. 1. 1秒鐘的奮戰: WordPress網站優化的愛恨情仇 Speaker: WilliamTai 2018/10/21 WordCamp Taipei 2018 #WCTPE 1 WordPress Optimize: A Love-hate Relationship
  2. 2. WHO AM I • 旅日工作的工程師 • 日本WordCamp忠實聽眾 • WordPress經歷10年以上 • コミケ常客 • 中文能力退化中 2 WilliamTai
  3. 3. 講這麼多 3
  4. 4. 就只是個肥宅! 4
  5. 5. 概要 • 「慢」是怎麼回事 • WordPress網站最佳化甘苦談 • 我的最佳化原則 • 結論 5
  6. 6. 希望各位帶回去的 • 網頁最佳化的整體概念 • 相關外掛/關聯技術的關鍵字 6
  7. 7. 網站特性 • 照片很多 首頁很重 • 外掛很多 各種JS掛好掛滿 • 作者富奸上身 雖然我沒有PS4 7
  8. 8. 目標 • 首頁載入8~10秒 -> 1秒 測試工具:Pingdom Website Speed Test • 高解析照片不能少 身為Mac用戶的堅持! • 網站功能不減少 功能少了看起來就Low了!(偏見 8
  9. 9. 先看結果 9
  10. 10. 10
  11. 11. 11
  12. 12. 「慢」是怎麼回事 12
  13. 13. 13 網站很慢 (使用者觀點)
  14. 14. 14 網站很慢 (工程師觀點)
  15. 15. 15 網站很慢 (問題分析) 伺服器端中繼網路
  16. 16. 伺服器端 16
  17. 17. 伺服器端改善 • 伺服器系統相關 硬體:AWS EC2 Instance 伺服器設定(重點):HTTP/2 • WordPress網站內部 快取外掛 WebP圖檔格式 17
  18. 18. HTTP/2 • HTTP/1.1 vs HTTP/2 https://http2.akamai.com/demo 18 • Chrome開發人員工具/Network
  19. 19. 快取外掛 • W3 Total Cache 火力強大,設定複雜 部分功能可能破壞網頁佈局,需不斷測試 • WP Super Cache 安全牌,該有的都有 • Cache Enabler 設定陽春,支援WebP格式 • …etc 19
  20. 20. WebP格式 • Google釋出的圖像格式 https://developers.google.com/speed/webp/ • 檔案大小 無失真壓縮比PNG小25% 失真壓縮比JPEG小25-34% • Chrome、Opera支援 • EWWW Image Optimizer外掛支援JPG->WebP 20
  21. 21. 中繼網路 21
  22. 22. CloudFlare • CDN兼DNS兼防火牆 • 小課金:Argo(月費制:USD$5+使用量) Time to First Byte (TTFB)改善約30% • 常見台灣用戶節點:台北/香港/美西 22
  23. 23. Argo效能改善範例 23
  24. 24. 課題 • 瀏覽器相依性 Ex.WebP格式不是所有瀏覽器支援 • 外部服務的JS檔案 Google Analytics、Facebook pixel…etc • WordPress核心/外掛/佈景升級 • 測試結果並不完全等同於使用者實際體驗 24
  25. 25. 我的最佳化原則 • 1人也能執行的最小管理負擔原則 • WordPress檔案不碰 • 功能增減以外掛/佈景為單位 • 分散伺服器負擔 25
  26. 26. 結論 • 網站頁面構成、網站主機、CDN都是影響網頁顯 示速度的因素 • Case by case、沒有唯一解 • 保持系統最佳化與擴充性的平衡 26
  27. 27. 27 Facebook https://go.wtai.moe/fbpage Thank you

×