網站速度優化：點樣將載入時間由 5 秒降到 1 秒

為何網站速度咁重要

網站速度對業務嘅影響遠超你諗像：

• SEO 排名——Google 2021 年起將 Core Web Vitals 納入排名因素，慢網站排名會被罰
• 轉換率——載入時間由 1 秒增加到 3 秒，電商轉換率跌 30%
• 跳出率——載入超過 3 秒，53% 用戶會直接離開
• 行動版更關鍵——手機用戶對速度更敏感，香港 70% 網站流量來自手機
• AI 引擎收錄——慢網站會被爬蟲減少抓取頻率，影響 SEO 同 GEO

更具體嘅數據：Amazon 研究發現，載入時間每慢 100ms，營業額跌 1%。對香港電商嚟講，呢個數字直接關係到真金白銀。

Core Web Vitals 全面解析

Core Web Vitals 係 Google 制定嘅三個核心速度指標，係 SEO 嘅硬指標：

指標	全名	衡量	良好	需改善
LCP	Largest Contentful Paint	最大內容元素載入時間	< 2.5s	> 4.0s
INP	Interaction to Next Paint	互動反應時間（2024 取代 FID）	< 200ms	> 500ms
CLS	Cumulative Layout Shift	視覺穩定性	< 0.1	> 0.25

呢三個指標要全部達標先有最佳排名效果。要喺 Google Search Console「Core Web Vitals」報告入面，睇你網站嘅實際數據。

LCP（最大內容繪製）優化

LCP 衡量頁面最大元素（通常係 hero 圖、標題、影片）嘅載入時間。優化方法：

• 優化 hero 圖——用 WebP / AVIF 格式，壓縮到 100KB 以下
• Lazy load 次要圖片——首屏以下嘅圖片用 loading="lazy"
• 預載入關鍵資源——用 link rel="preload" 提前載入 hero 圖
• 避免阻塞渲染嘅 CSS / JS——critical CSS inline，其他 async / defer
• 用 CDN 加速——靜態資源分發到全球節點
• 優化伺服器響應——TTFB 控制喺 600ms 以下

FID / INP（互動反應）優化

INP（2024 年 3 月取代 FID）衡量用戶點擊、輸入後，頁面反應所需時間。優化重點：

• 減少 JavaScript 體積——JS 越多，主線程越忙
• 拆分長任務——超過 50ms 嘅任務要拆細，用 setTimeout 或 requestIdleCallback
• 延遲載入非關鍵 JS——分析工具、廣告、聊天插件都 defer
• 用 Web Workers——將計算密集任務移到背景線程
• 避免第三方腳本阻塞——每個第三方腳本都會拖慢反應
• 優化事件監聽器——用 passive listeners、debounce / throttle

CLS（累積版面位移）優化

CLS 衡量頁面元素喺載入過程中「跳嚟跳去」嘅程度。呢個係體驗最差嘅問題——你撳一個掣，但個掣突然移咗位，結果撳錯嘢。優化方法：

• 所有圖片、影片、廣告都要設 width 同 height——瀏覽器預留空間
• 嵌入內容預留空間——YouTube、Facebook 插件都要預先留位
• 避免動態注入內容——除非喺現有內容下方
• 字體載入優化——用 font-display: swap，避免字體換裝導致跳動
• 廣告位預留——廣告載入前就預留固定空間
• 避免 CSS 動畫導致位移——用 transform 而唔改 top/left

圖片優化——提速嘅最大殺手

圖片通常佔網站體積嘅 50-80%，係速度嘅最大敵人。完整優化策略：

方法	效果	實施難度
轉用 WebP / AVIF 格式	比 JPEG 細 25-50%	低
響應式圖片 srcset	手機載入細圖	低
Lazy Load	首屏快咗 30%	低
圖片壓縮	無損壓縮 20-40%	低
移除 EXIF 資料	每張圖慳幾 KB	低
用 SVG 代替圖示	向量圖極細	中
用 CDN 圖片優化	自動轉格式、壓縮	低

香港好多公司直接上傳單反相機拍嘅高清圖（每張 5MB+），呢個係災難級問題。應該先壓縮到合理大小：縮圖、WebP 格式、控制喺 200KB 以內。

CSS / JavaScript 壓縮同優化

代碼體積直接影響載入同解析時間：

• Minify CSS / JS——移除空格、註解、簡短變數名，體積細 30-60%
• Tree Shaking——webpack、Vite 會移除未用嘅代碼
• Code Splitting——將代碼拆分，按需載入
• Critical CSS Inline——首屏 CSS 直接 inline 入 HTML
• 延遲載入非關鍵 CSS——用 media="print" onload 技巧
• 移除未用嘅 CSS——用 PurgeCSS 移除死代碼
• 避免大依賴——moment.js 改用 date-fns，jQuery 改用原生 JS

CDN（內容分發網絡）設定

CDN 將你嘅靜態資源（圖片、CSS、JS）複製到全球多個伺服器節點，用戶就近讀取，大幅降低延遲。

CDN 嘅好處：

• 降低延遲——香港用戶讀香港節點，美國用戶讀美國節點
• 減輕主伺服器負載——靜態資源唔使主伺服器處理
• 抗 DDoS——多數 CDN 自帶 DDoS 防護
• 自動圖片優化——Cloudflare Images、Cloudinary 等會自動轉格式
• HTTP/3 支援——更快嘅傳輸協議

推薦嘅 CDN：Cloudflare（免費 plan 已夠用）、AWS CloudFront（企業級）、Cloudinary（圖片專用）、Bunny CDN（性價比高）。

快取（Caching）策略

快取可以令回訪用戶秒速載入：

• 瀏覽器快取——用 Cache-Control、ETag 標頭，靜態資源快取一年
• 伺服器快取——頁面快取（Nginx FastCGI Cache、Redis）
• 應用層快取——資料庫查詢結果、計算結果快取
• CDN 快取——CDN 節點快取靜態資源
• OPcache——PHP 字節碼快取

對 WordPress 網站，安裝 WP Rocket 或 W3 Total Cache 可以一站式搞定多層快取。

伺服器響應時間（TTFB）

TTFB（Time To First Byte）係伺服器收到請求後，傳返第一個 byte 嘅時間。目標 < 600ms。優化方法：

• 升級主機——共享主機改 VPS、獨立伺服器
• 選近用戶嘅機房——香港 / 亞洲用戶用亞洲節點
• 優化資料庫——加索引、優化查詢、定期清理
• 用 PHP 8.x——比 7.x 快 30%
• 啟用 HTTP/2 或 HTTP/3——多路復用，大幅提速
• 優化伺服器配置——Nginx、PHP-FPM 調校

速度測試工具

工具	用途	費用
Google PageSpeed Insights	Lab + 真實用戶數據，CWV 評分	免費
Google Search Console	你網站真實 CWV 數據	免費
Chrome DevTools Lighthouse	本地詳細審計	免費
GTmetrix	詳細報告、瀑布圖	有限免費 + 付費
WebPageTest	深度測試、多地點多瀏覽器	有限免費 + 付費
Pingdom Speed Test	快速測試、簡單報告	免費
Cloudflare Speed	用緊 Cloudflare 嘅話內置分析	免費

建議工作流程：用 PageSpeed Insights 做初步評估 → 用 WebPageTest 睇瀑布圖搵瓶頸 → 實施優化 → 用 Search Console 監測長期數據。

實戰案例：5 秒降到 1.2 秒

我哋一個香港電商客戶嘅案例：

優化前：

• 首頁載入：5.2 秒
• LCP：4.8 秒，CLS：0.32，INP：380ms
• 跳出率：68%
• 轉換率：1.2%
• Google PageSpeed 分數：32/100（手機）

實施嘅優化：

1. 500 張產品圖全部轉 WebP，平均 2MB 壓縮到 150KB
2. 啟用 Cloudflare CDN + 圖片優化
3. 安裝 WP Rocket，啟用頁面快取同瀏覽器快取
4. Minify 同 combine CSS / JS
5. Lazy load 所有首屏以下圖片
6. 移除 5 個唔必要嘅 WordPress 插件
7. 升級主機由共享到 VPS，PHP 7.4 升到 8.2
8. 所有圖片加 width / height，CLS 歸零
9. 延遲載入 Google Analytics、Facebook Pixel、聊天插件

優化後：

• 首頁載入：1.2 秒（提升 76%）
• LCP：1.8 秒，CLS：0.02，INP：120ms（全部良好）
• 跳出率：42%（跌 26 個百分點）
• 轉換率：2.8%（提升 133%）
• Google PageSpeed 分數：91/100（手機）
• SEO 自然流量三個月內升 35%

呢個案例最值得留意嘅唔係速度本身，而係轉換率提升 133%。同樣嘅流量、同樣嘅產品，淨係因為網站變快，每月營業額就多咗一倍以上。呢個先係網站優化嘅真正價值。