性能優化：如何提昇 Wordpress 網站速度和使用體驗
優化 WordPress 網站的速度，不僅能顯著提升用戶的體驗，還能改善 SEO 排名並降低跳出率。
在大叔的經驗中，讓用戶停留閱讀我們文章，第一件重點就是我們：「WordPress 網站的速度」。例如說，我進入一個網站，結果等了 3 秒、5 秒、 10 秒，中間的圈圈還在轉轉轉，畫面一片空白，那一定會離開。
根據Google的研究，有 50 %的使用者會在網頁無法在 3 秒內讀取時離開，而最大的原因取決於主機的速度，當然用戶的網路速度也很重要，但這我們無法計算。 😈
簡單來說，網站順不順暢和使用者的體驗有很大的關係，所以優化 WordPress 的性能就是一個重要的工作。我們需要通過考慮主機、插件、主題、圖像、和內容管理系統的各個方面，才能有效提高網站的性能和用戶滿意度，例如：
- 使用效能高的主機。
- 使用快取插件提升網站載入速度。
- 壓縮圖片大小，使用工具如 Smush。
- 考慮使用內容傳遞網絡（CDN）來加快全球訪問速度。
如何檢視 Wordpress 網站的速度
檢視 WordPress 網站的速度對於優化性能和改善使用者體驗非常重要。以下是一些常用的方法和工具來檢視你的 WordPress 網站速度：
Google PageSpeed Insights
PageSpeed Insights 是 Google 提供的一個速度測試工具，它提供網站的桌面和行動版速度評分，並給出優化建議。它會分析你的網站並提供具體的改進建議，如圖像優化、縮小 JavaScript 等。
Pingdom
Pingdom 提供網站速度測試，並給出網站在世界不同地區的加載時間和性能評分。它也提供詳細的分析，如每個資源加載的時間和大小。
比較起 Google 的 PageSpeed Insights，它可以選擇測試的地點，也會詳細地指出網頁上的問題，讓你去改善。
分析工具的關鍵指標
測試工具會提供多個關鍵性能指標，理解這些指標有助於更好地了解網站性能：
- 頁面加載時間（Load Time）：指網站完全加載所需的時間。加載時間越短，使用者體驗越好，通常建議在 3 秒以內。
- Cumulative Layout Shift (CLS)：CLS 是針對網頁整個生命週期中每個「非預期」版面配置位移，所產生最大量的版面配置位移分數分數。(更多內容)
- 首字節時間（Time to First Byte, TTFB）：這是從用戶向伺服器發出請求，到瀏覽器接收到第一個字節響應所花費的時間。TTFB 可以幫助判斷伺服器的響應速度。
- 首次有意義繪製（First Contentful Paint, FCP）：指第一個可見內容（如文字、圖片）顯示出來所需的時間。它衡量使用者在點擊鏈接後看到有內容出現的速度。
- 完全加載時間（Fully Loaded Time）：指所有資源（包括圖片、JavaScript、CSS 等）完全加載的時間，這影響到頁面上所有功能是否可以正常使用。
Largest Contentful Paint (LCP)：LCP 會回報可視區域中最大圖片、文字區塊或影片的顯示時間 (相對於使用者首次瀏覽至相應頁面的時間)。在 Google 的建議裡，LCP 盡量在 2.5 秒以內。(更多內容)
如何提昇 Wordpress 網站的速度和使用體驗?
選擇快速的主機服務
影響網站速度最重要的第一因素就是「主機」。
所以我們應該選擇一個高效的主機供應商，根據網站流量選擇合適的方案，但新手可能會對於主機的選擇有一些困擾，像是：
- 什麼是 VPS（Virtual Private Server）、共享主機
- 怎麼選擇主機
從概念與架構來說：
- 共享主機（Shared Hosting）：
- 在共享主機中，許多網站共用同一台物理伺服器的資源，包括 CPU、RAM、硬碟等。
- 每個網站都處於相同的環境中，資源是共享的，因此一個網站的高負載可能影響其他共用伺服器的網站。
- VPS（虛擬私人伺服器）：
- VPS 是通過虛擬化技術在一台物理伺服器上劃分出的多個虛擬伺服器。每個 VPS 都有獨立的操作系統和分配的資源，如 CPU、RAM 和存儲。
- 雖然多個 VPS 共用同一物理伺服器，但每個 VPS 都是獨立運行的，不會受到其他 VPS 的影響。
所以共享主機比較像是我們的手機網路，一般使用沒有問題，但到了人多和尖峰使用的時段，就會有變慢的感覺。而 VPS 就像是一個專線網路，不會和別人共用，使用上比較穩定。
但一分錢一分貨，VPS 的費用還是高於共享主機。
Cloudways 主機採用的是 VPS ，雖然費用較高，但速度和穩定性高，比較適合用在經營電子商務或是企業。
圖像優化
在 WordPress 網站中，圖像優化是提升網站速度和使用者體驗的重要步驟。具體來說，圖像優化有下列好處：
- 提高網站加載速度
- 圖片是網站中占用最大空間的元素之一，未經優化的圖片會顯著增加頁面大小和加載時間。
- 網站加載速度越快，用戶體驗越好，能有效降低跳出率。根據研究，網站加載時間每增加一秒，訪客的滿意度會大幅降低，可能導致用戶流失。
- 提升 SEO 排名
- 搜索引擎將網站的加載速度作為 SEO 排名的考量因素之一。圖像優化後，網站的加載速度變快，有助於提升搜索引擎的排名，讓更多人能夠找到你的網站。
- 圖像的替代文字（Alt Text）和檔案名經過優化後，還能幫助搜索引擎理解圖片內容，提升網站在圖像搜索中的可見性。
- 節省伺服器資源和頻寬
- 優化圖片可以大幅減少其檔案大小，從而降低伺服器存儲需求和頻寬消耗，有助於減少運營成本，特別是當網站流量很大時。
- 更好的用戶體驗
- 網站圖像優化能提高網站的整體性能和加載體驗，用戶在打開頁面時不必等待太長時間，這有助於增加用戶的參與度和停留時間。
所以使用一個 WordPress 主機的時候，如何進行圖像優化？
第一，我們應該選擇合適的圖像格式，例如說：WebP：這是一種新型的圖片格式，通常比 JPEG 和 PNG 更小，但具有類似的質量，非常適合網站圖像使用。
根據 Google的WebP壓縮研究，WebP 影像比 PNG 小26%，比同類圖像小 25-34%，同時保持相同的品質。JPEG 檔。WebP 已經為YouTube和 eBay 等公司的許多網站提供支援。
然後，下載 WordPress 圖像壓縮外掛，像是：Converter for Media，就可以在網站裡轉換圖片成為 WebP 格式。
然後，請確認你的主機有支援 WebP，如果你是使用 Cloudways 的朋友，請進入「 Application Setting 」頁面中找到「 Webp Redirection 」然後開啟它。詳細說明可以參考：https://support.cloudways.com/en/articles/5799334-how-to：use-and-serve-webp-images-in-wordpress
第二，利用 lazy loading（延遲加載）技術，延後頁面中的圖像載入以提升初始頁面速度。
WordPress 網站有很多方法可以做到 lazy loading，例如說使用 Cloudways 的朋友，預設安裝 breeze 的外掛，在基本設定裡就可以找到圖片延遲載入的功能。
又或是使用一些主題或是網頁編輯的外掛，像是 Elementor 也可以在「設定」中找到 Proformace 裡的 Lazy Load Background Images 的功能。
總之，圖像優化有助於優化我們 WordPress 網站的速度，而且相對比較簡單優化速度的工作。
使用 CDN（內容分發網絡）
CDN（ 內容分發網絡，Content Delivery Network）是一種分布式伺服器系統，旨在將網站內容（包括圖片、影片、CSS、JavaScript 等靜態資源 ）儲存在多個地理位置上的伺服器中，以便將內容更快速地傳遞給用戶。CDN 能夠顯著提高網站的加載速度，降低伺服器負載，並改善用戶體驗。
例如 Cloudflare，將靜態資源儲存在多個地點，減少延遲。以 Cloudways 主機為例，在應用軟體頁面，就可以找到「Cloudflare」的服務，這應該是 Cloudflare 和 Cloudways 的合作服務。提供 1 到 4 個 Domains 只要每個月 4.99 美金。
在 Cloudflare 的官網上，最便宜的 Pro 方案每個月也要 20 鎂，Cloudways 提供的是 Cloudflare Cloudflare 方案只要 5 美金真的超值。完整的教學在：https://support.cloudways.com/en/articles/6009152-how-to-integrate-cloudflare-with-your-application。
使用高效的快取插件
快取插件（Caching Plugin）對於 WordPress 網站的性能優化至關重要。它通過將靜態版本的網頁內容暫存起來，以加快網站加載速度、減少伺服器負載和改善用戶體驗。
常見的快取插件如下：
- WP Rocket：優點：WP Rocket 是一個付費的高級快取插件，提供全方位的性能優化功能，包括頁面快取、Gzip 壓縮、瀏覽器快取、縮小代碼、延遲加載圖片（Lazy Load）等。它易於配置且用戶友好。
- W3 Total Cache：W3 Total Cache 是一款功能強大的免費快取插件，支持頁面快取、物件快取、瀏覽器快取、縮小代碼等功能。它可以與多種 CDN 集成來進一步提升網站性能。
- WP Super Cache：WP Super Cache 是一款由 Automattic（WordPress 的官方公司）開發的免費插件，它通過生成靜態 HTML 頁面並提供給訪客來提升網站速度，特別適合沒有太多技術背景的用戶。
- LiteSpeed Cache ：LiteSpeed Cache 是一款功能豐富且非常高效的快取插件，特別適用於使用 LiteSpeed 網頁伺服器的用戶。它提供頁面快取、物件快取、縮小代碼、CDN 集成等功能，且免費。
這麼多選擇，那個好呢? 如果使用 Cloudways 主機的話，已安裝預設 breeze 外掛。只要將快取系統開啟就可以了。
新功能「行動版網站快取」，要先到 Cloudways 後台將 「Device Detection」打開。
總之，快取插件是優化 WordPress 網站性能不可或缺的工具。它可以顯著提高網站加載速度、減少伺服器負載、改善用戶體驗，並且對網站的 SEO 排名有直接的積極影響。選擇合適的快取插件並進行合理配置，可以有效地提升網站整體性能。
精簡 CSS、JavaScript 和 HTML
精簡（Minify）CSS、JavaScript 和 HTML 是網站性能優化中的一個重要步驟，它通過移除代碼中的空白符號、註解和不必要的字符，來縮小文件大小。這種操作有助於提升網站速度，減少資源的加載時間和伺服器負載。
在經驗中，現在網路速度已經夠快，所以我個人的經驗優化精簡 CSS、JavaScript 和 HTML 的成效很有限，由於 breeze 外掛也有這功能，打開並不會花多少時間。
使用輕量主題
選擇經過良好優化的輕量化 WordPress 主題，例如 Astra 或 Hello Elementor。過去我使用過不少主題，許多付費主題功能強大，但對於新手而言，主機的效能是無法負荷的，就像是最新的 IOS 安裝在 Iphone 6 的手機上，功能再強，跑不動就沒有意義。
所以選擇輕量化 WordPress 主題、減少安裝外掛，都有助於減少主機的負載。
Cloudways 也提供 Astra Pro 的優惠，每個月只要 4 美金，第一年還免費。
小結 & 心得
提昇 Wordpress 網站的速度可以提高用戶的使用體驗。而隨著網站的使用時間增加，網站就會更肥大，使用的速度就會下降，所以我們需要學習利用外掛來幫助我們提昇速度、優化網站。
真的速度降不下來的時候，我才會考慮升級主機，因為每升級一次主機，月租的成本就翻倍，所以優化也算是節省成本的工作。
在我的實務經驗中，你應該先從這下手：打開快取 → 圖像優化 → 修改設計 → 升級主機。
