主視覺太晚出現
手機版最大內容繪製（LCP）18.34s 實測
01原本的問題
店家說「官網手機打開好慢」，
我先量，再找原因
接手時的版本：WordPress＋Astra 佈景、五個外掛，圖片直接上傳原尺寸 PNG，沒有頁面快取，也沒有壓縮。
頁面太重
原尺寸 PNG 直接放上首頁，桌機版頁面總重量 10,241KiB 實測
請求數多
Font Awesome 從外部 CDN 載入、MetaSlider 與 Elementor 的樣式腳本全站載入，首頁請求 41 個 實測
沒有快取，也沒有壓縮
每次訪客進來，PHP 都重新產生整頁；HTML、CSS、JS 以未壓縮的形式傳送。
02我改了什麼
八件事，依序做完
每一步都只動一件事，做完重新量一次，確認沒有把網站弄壞才往下。內容與版面維持原樣。
圖片 PNG 轉 WebP
品質 78、寬度上限 1600，並重建所有縮圖為 WebP。
cwebp · wp media regenerate整頁快取
nginx FastCGI 快取訪客頁面，不必每次都跑 PHP。
fastcgi_cache開啟 gzip 壓縮
HTML、CSS、JS 壓縮後再傳。
gzip on停用沒用到的外掛
Font Awesome（含外部 CDN 樣式）、MetaSlider、Elementor。
wp plugin deactivate移除未使用的 CSS/JS
WooCommerce 訂單來源追蹤、jquery-migrate、emoji 腳本、沒用到的區塊樣式。
wp_dequeue_*前端 JS 全部 defer
腳本不再擋住第一次繪製。
defer主視覺先載
主視覺 preload＋fetchpriority=high，其餘圖片維持原生 lazy loading。
fetchpriority靜態檔快取標頭
圖片、CSS、JS 設 30 天快取。
expires 30d03實測數據
同一台機器、同一份內容，
前後各跑三次取中位數
實測 · 2026-10-17 本機測試 · Lighthouse 12.8.2
63
90
三次分數：優化前 63 / 65 / 63 · 優化後 92 / 90 / 90
優化前優化後
- 測試環境
- 本機 127.0.0.1，非正式上線主機
- 軟體
- WordPress 7.1.3 · PHP 8.4 · nginx 1.26
- 工具
- Lighthouse 12.8.2 · Chrome 155（headless）
- 方法
- 手機用預設手機模擬、桌機用 desktop preset，各跑 3 次取中位數
原始報告：summary-medians.json · before-mobile-1.json · after-mobile-2.json（共 12 份 JSON，在 lighthouse/ 資料夾）
04前後對照
同一個時間點，
訪客看到什麼
畫面取自 Lighthouse 報告裡的載入影格（優化前第 1 次、優化後第 2 次跑分，分數分別為 63 與 90）。拖動中間的把手比較左右，或用時間軸切換時間點。
優化前優化後
- 優化前 此刻畫面
- 尚未出現內容
- 優化後 此刻畫面
- 首頁已顯示
影格時間點為 Lighthouse 報告記錄的值 實測；LCP 等分數使用 Lighthouse 的手機模擬計算，兩者計時方式不同。
桌機版：看起來一樣，背後輕很多
05你的網站
想讓你的 WordPress
也變快？
我會先在測試環境量一次，告訴你慢在哪裡，再決定要動哪些地方。
- 先量測、再動手，每一步都留紀錄
- 內容與版面不變，只調整背後的設定
- 交付時附上前後的原始報告