網站速度優化
Google 自 2010 年起就將網站速度納入排名信號，2018 年更進一步推出「速度更新（Speed Update）」，明確宣布行動版頁面的載入速度直接影響行動搜尋排名。
為什麼網站速度是 SEO 的硬門檻？
Google 自 2010 年起就將網站速度納入排名信號，2018 年更進一步推出「速度更新（Speed Update）」，明確宣布行動版頁面的載入速度直接影響行動搜尋排名。
數據顯示：頁面載入時間從 1 秒增加到 3 秒，跳出率增加 32%。從 1 秒增加到 5 秒，跳出率增加 90%。
速度既是排名因子，也是轉換率殺手。
香港場景：速度點樣直接影響生意
| 香港場景 | 速度慢嘅代價 |
|---|---|
| 香港網店（例如旺角時裝網店、寵物用品網店） | 購物車放棄率上升，HK$ 生意直接流失 |
| 餐廳網站（放餐牌、訂位、OpenRice 連結） | 用家喺街上用手機睇餐牌，load 唔到就轉去 OpenRice 第間 |
| 補習社 / 教育中心 | 家長喺 WhatsApp 群收到連結，開唔到就唔會報名 |
| 地產代理樓盤頁 | 大量樓盤相，慢一秒就跳去 28Hse / 星之谷 |
| B2B / 專業服務 | 決策者用手機睇 Profile，慢即係唔專業 |
香港網絡現實：香港 5G 同光纖入屋普及，但用家實際瀏覽環境多數係港鐵車廂、商場、街上、辦公室 Wi-Fi——網絡唔穩定、訊號時強時弱。加上香港手機流量佔比超過七成，行動版速度就係你嘅排名與生意。
網站速度的四大診斷工具
| 工具 | 用途 | 費用 |
|---|---|---|
| Google PageSpeed Insights | 頁面速度分析 + 優化建議 | 免費 |
| Google Lighthouse | 綜合性能審查（開發者工具內建） | 免費 |
| GTmetrix | 瀑布圖（Waterfall）分析 | 有限免費 |
| WebPageTest | 全球多點位速度測試 | 免費 |
香港測試設定貼士：
- GTmetrix / WebPageTest：測試地點揀香港（Hong Kong）或亞洲節點，先反映香港用家真實體驗；同時開「Mobile / 4G」profile。
- PageSpeed Insights：分數係全球數據 + 現場數據（CrUX），記得睇「現場數據」嗰欄，因為嗰個先係香港真實用家嘅體驗。
- 如果客源包埋大灣區或東南亞，額外跑一次深圳／新加坡節點對比。
PageSpeed Insights 分數解讀
| 分數 | 狀態 | 行動 |
|---|---|---|
| 90-100 | 🟢 優秀 | 保持並監控 |
| 50-89 | 🟡 需要優化 | 依建議逐一改善 |
| 0-49 | 🔴 差 | 立即優先處理 |
網站速度優化六大策略
策略 1：圖片優化（通常能省下 40-60% 的載入時間）
這是最簡單、效果最大的優化項。
| 行動 | 效果 |
|---|---|
| 使用 WebP / AVIF 格式 | 檔案大小減少 25-35% |
| 適當壓縮圖片 | 100-200KB 為目標 |
| 設定圖片尺寸 | 避免瀏覽器重新計算佈局 |
| 使用 srcset 響應式圖片 | 行動裝置不下載桌面大圖 |
| 懶加載（Lazy Loading） | 首屏不載入非可視區圖片 |
香港例子：一間中環餐廳嘅網站首頁放咗 12 張 2MB 嘅食物相（用相機直出、未壓縮），總共 24MB。用手機喺港鐵入面開，LCP 隨時 8 秒以上。轉 WebP + 壓縮到 150KB 一張 + lazy loading，總量跌到 1.8MB，LCP 落到 2 秒內——呢個差別就係客人留低定走人。
策略 2：啟用瀏覽器快取（Browser Caching）
設定伺服器告訴瀏覽器「這些資源可以暫存，不用每次都下載」。
Apache .htaccess 範例：
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
效果：回訪者的頁面載入速度可提升 50-80%。
策略 3：壓縮與最小化資源
| 資源類型 | 行動 | 工具 |
|---|---|---|
| CSS | 最小化（移除空白和註解）+ 合併 | CSSNano、PurgeCSS |
| JavaScript | 最小化 + 延遲載入非關鍵 JS | Terser、UglifyJS |
| HTML | 最小化 | HTMLMinifier |
| 字體 | 只載入使用的字重和子集 | Google Fonts API 參數 |
香港雙語站特別注意：繁中網站若載入整個中文字體檔（思源黑體、Noto Sans TC 全套），隨時 5-10MB，係香港網站慢嘅頭號元兇之一。建議：
- 用系統字體堆疊（
system-ui, -apple-system, "PingFang HK", "Microsoft JhengHei"）- 真係要自訂字體就用字體子集化（只包常用字）或
unicode-range分段載入- 用
font-display: swap避免文字空白（FOIT）
策略 4：使用 CDN（內容傳遞網路）
CDN 運作原理：將網站靜態資源複製到全球多個伺服器節點，使用者從距離最近的節點獲取資源。
| CDN 服務 | 特色 |
|---|---|
| Cloudflare | 免費方案、全球節點（有香港節點）、DDoS 防護 |
| CloudFront | AWS 生態、S3 整合（亞洲節點包括香港／新加坡／東京） |
| BunnyCDN | 性價比高、亞洲節點多 |
| KeyCDN | 即付即用、HTTP/3 支援 |
香港選點建議：做香港生意，一定要揀有香港 PoP 節點嘅 CDN（Cloudflare、CloudFront、BunnyCDN 都有香港節點）。香港本身網絡基建極好，本地節點 TTFB 可以做到 10-30ms；但如果 CDN 冇香港節點、要由東京或新加坡回源，TTFB 隨時 80-150ms，LCP 直接被拖慢。
策略 5：減少 HTTP 請求
每個檔案（CSS、JS、圖片、字體）都需要一個 HTTP 請求。
| 行動 | 效果 |
|---|---|
| 合併 CSS/JS 檔案 | 減少請求數 |
| 使用 CSS Sprites | 多個小圖標合併為一張圖 |
| 內聯關鍵 CSS | 首屏渲染不等待外部 CSS |
| 延遲載入非關鍵 JS | 使用 defer 或 async 屬性 |
<!-- async: 下載完就執行，不保證順序 -->
<script src="analytics.js" async></script>
<!-- defer: 等 HTML 解析完再按順序執行 -->
<script src="main.js" defer></script>
香港常見地雷：香港中小企網站好鍾意裝一大堆第三方 script——Facebook Pixel、Google Analytics、WhatsApp 浮標、IG Feed、線上客服、多套廣告追蹤碼。每粒都係一個請求 + 一段 JS 執行時間，INP 同 LCP 一齊爆。建議每季清一次：冇再用嘅 script 全部剷走。
策略 6：伺服器端優化
| 行動 | 效果 |
|---|---|
| 升級 HTTP/2 或 HTTP/3 | 多路復用，並行載入資源 |
| 啟用 Gzip / Brotli 壓縮 | 文字資源減少 70-80% |
| 升級主機方案 | 避免共享主機的性能瓶頸 |
| 使用伺服器端快取 | Redis、Varnish、Nginx FastCGI Cache |
| 資料庫查詢優化 | 減少不必要的查詢、使用索引 |
香港主機選擇：香港本地主機商／雲端（阿里雲香港、AWS ap-east-1、Google Cloud asia-east2、Azure Hong Kong）延遲極低（香港用家 5-20ms）。如果目標客源係香港，就唔好揀美國或歐洲機房——單係 TTFB 已經輸 150-200ms。 要留意：如果同時做內地生意，中國大陸訪問香港機房要過防火牆，速度會慢；呢個情況要另設內地 CDN／備案站，唔可以靠香港站一腳踢。
速度優化優先級矩陣
投入成本
低 │
│ Q2: 中優先 │ Q1: 最高優先
│ 合併 CSS/JS │ 圖片優化 (WebP + 壓縮)
│ 減少 HTTP 請求 │ 啟用瀏覽器快取
│ │ 啟用 Gzip/Brotli
├──────────────────────┤
│ Q4: 有空再做 │ Q3: 值得投入
│ CSS Sprites │ 使用 CDN（揀有香港節點）
│ 字體子集化 │ 升級主機 / 轉香港機房
│ │ 升級 HTTP/2
高 │ │
└──────────────────────┴────→ 速度提升
小幅改善 大幅改善
速度優化檢查清單
- 圖片使用 WebP/AVIF 格式
- 圖片壓縮至合理大小（< 200KB）
- 實施了圖片懶加載
- 啟用了瀏覽器快取
- CSS/JS 已最小化
- 啟用了 Gzip 或 Brotli 壓縮
- 非關鍵 JS 使用 defer/async
- 使用 CDN 加速靜態資源（有香港節點）
- 主機位於香港或亞洲機房
- 中文字體已子集化或改用系統字體
- 已清理多餘第三方 script（FB Pixel、WhatsApp 浮標等）
- 用香港／亞洲節點、Mobile 4G profile 測過速度
- PageSpeed Insights 分數 ≥ 90（桌面版）≥ 70（行動版）
- 有檢查 GSC 嘅 Core Web Vitals 現場數據（真實香港用家）
重點回顧
- 速度 = 排名因子 + 轉換率殺手，1 秒到 3 秒跳出率增 32%
- 圖片優化效果最大——通常能省 40-60% 載入時間
- 瀏覽器快取 + Gzip + CDN 是三大基礎速度優化（CDN 要揀有香港節點）
- defer vs async：defer 保證執行順序，async 不保證
- 香港專屬地雷：中文字體檔過大、第三方 script 過多、主機喺歐美
- PageSpeed Insights ≥ 90（桌面）/ ≥ 70（行動） 是合理的目標，測試點要揀香港
- 速度優化不是一次性工程——每次發布新內容都要檢查
| ← 第 24 章：結構化資料 Schema Markup | 回索引 | 第 26 章：Core Web Vitals 完整解析 → |