第二堂：前端效能優化與圖片處理

「你的網站是不是載入半天，圖片才一張一張慢慢跑出來？別懷疑，多半是圖片跟前端程式碼在搞鬼！這一堂課，我們要徹底改造網站的外衣，從圖片壓縮到 CSS/JS 優化，讓你的網站像跑車一樣，『咻』一下就開到使用者眼前！」

1. 圖片壓縮與最佳化：網站速度的頭號殺手！

圖片是網站內容的靈魂，但也是拖慢網站速度的頭號殺手！一張幾 MB 的圖片，會讓你的網站載入時間增加好幾秒。

• 上傳前壓縮：
  • 原理： 在上傳到 WordPress 前，先用工具壓縮圖片大小。
  • 工具推薦：
    • TinyPNG / TinyJPG (線上工具)： 免費且好用，直接拖曳圖片就能壓縮。
    • ImageOptim (macOS)： 免費桌面軟體，效果超棒。
    • RIOT (Windows)： 免費桌面軟體，功能齊全。
  • 實作： 選擇一張圖片，分別用上述工具壓縮，比較壓縮前後的大小。你會發現效果驚人！
• WordPress 外掛自動壓縮：
  • 原理： 網站上已經有大量圖片，或你想讓未來上傳的圖片自動壓縮。
  • 外掛推薦：
    • ShortPixel Image Optimizer： 功能強大，提供免費額度，支援 WebP 轉換。
    • Imagify： 自動優化圖片，也有免費額度。
    • Smush – Lazy Load Images, Optimize & Compress Images： 熱門免費外掛，提供基礎壓縮與 Lazy Load。
  • 實作：
    1. 到 WordPress 後台「外掛 (Plugins)」>「安裝外掛 (Add New)」。
    2. 搜尋並安裝「ShortPixel Image Optimizer」。
    3. 啟用外掛後，依指示填入 API Key (通常外掛會引導你取得)。
    4. 到「設定 (Settings)」>「ShortPixel」調整壓縮等級 (例如：Glossy 或 Lossy)。
    5. 點擊「Bulk Optimize」開始批量優化你現有的圖片。
• 圖片格式選擇：
  • JPEG： 適合照片或複雜圖片，壓縮率高。
  • PNG： 適合圖標、透明背景圖片，保留清晰度。
  • WebP： Google 推出的新格式，壓縮率比 JPEG 更高，且支援透明背景，強烈推薦使用！ (ShortPixel 等外掛通常能自動轉換為 WebP)。

2. Lazy Load (延遲載入)：讓內容分批出現！

你可能聽過「圖片還沒看到，網頁就先載入好了」的概念，這就是 Lazy Load！它能讓非可視區域的圖片或影片，在使用者捲動到時才載入，大幅提升首次載入速度。

• 原理： 網頁一開始只載入螢幕可見範圍的內容，其他內容等到使用者捲動到時才載入。
• 實作：
  • 許多快取外掛 (如 WP Rocket, LiteSpeed Cache) 和圖片壓縮外掛 (如 Smush, ShortPixel) 都內建 Lazy Load 功能，通常在設定中勾選即可啟用。
  • 小撇步： 啟用 Lazy Load 後，再次用 Google PageSpeed Insights 測試，你會發現分數提升不少！

3. CSS/JS 檔案壓縮與合併：瘦身程式碼！

網站的樣式表 (CSS) 和腳本 (JavaScript) 檔案，如果沒有經過壓縮，裡面會包含大量空白、註解等。而過多的 CSS/JS 請求，也會拖慢載入速度。

• 壓縮 (Minify)：
  • 原理： 移除 CSS/JS 檔案中的空白、註解、換行符號，讓檔案體積變小。
  • 實作： 大部分的快取外掛都內建此功能。
    1. 如果你使用 WP Rocket，到「檔案優化 (File Optimization)」> 勾選「壓縮 CSS 檔案」和「壓縮 JavaScript 檔案」。
    2. 如果你使用 LiteSpeed Cache，到「頁面優化 (Page Optimization)」> 勾選「CSS Minify」和「JS Minify」。
  • 注意： 壓縮後務必檢查網站功能和樣式是否正常！
• 合併 (Combine)：
  • 原理： 將多個小的 CSS 檔案合併成一個，或將多個 JS 檔案合併成一個，減少瀏覽器發送的請求數量。
  • 實作： 同樣在快取外掛的「檔案優化」設定中，勾選「合併 CSS 檔案」和「合併 JavaScript 檔案」。
  • 注意： 合併功能有時會導致網站功能異常，特別是 JavaScript。啟用後務必徹底測試網站功能！如果出問題，請取消合併功能。

4. 非同步載入與延遲解析：讓關鍵內容優先！

某些 CSS/JS 檔案在載入時會「阻塞渲染」，也就是瀏覽器必須等到這些檔案載入完成後才能顯示頁面內容。我們可以讓它們「非同步」或「延遲」載入。

• 原理： 讓一些非關鍵的 CSS/JS 檔案在背景載入，不阻礙頁面內容的顯示。
• 實作： 許多快取外掛也提供此功能，例如 WP Rocket 的「延遲 JavaScript 執行」或 LiteSpeed Cache 的「JS延遲加載」。
  • 小撇步： 啟用這些功能後，再次測試 Google PageSpeed Insights，關注「消除渲染阻塞資源」的建議是否改善。

本單元小結：

太棒了！透過本單元的學習，你已經掌握了網站前端優化的利器：圖片壓縮、Lazy Load、CSS/JS 壓縮與合併。這些技巧能顯著提升網站的載入速度，讓你的訪客不再等到天荒地老！

下一單元，我們要深入網站的後端，探索更進階的效能優化技術，包括資料庫清理和更強大的快取機制設定，讓你的網站跑得更順暢！

別忘了： 每次優化後，務必到網站前台多測試幾個頁面，確保功能正常！如果有任何問題，歡迎在下方留言討論喔。