網頁載入速度優化:5秒變2秒嘅實戰方法
網站慢1秒,轉化率跌7%。本文提供完整嘅速度優化指南,由圖片壓縮、Caching、CDN到JavaScript優化,實戰將載入時間由5秒壓到2秒以內。
Amazon曾經做過實驗:網站每慢100毫秒,銷售跌1%。Walmart嘅數據顯示,首頁速度由5秒減到2秒,轉化率提升2倍。網頁速度唔再係技術細節,而係直接影響營業額嘅商業議題。
本文提供詳細嘅網站速度優化指南,適合中小企老闆同webmaster參考。
速度嘅3大關鍵指標
Core Web Vitals
- LCP(Largest Contentful Paint):最大內容載入時間,目標<2.5秒
- FID(First Input Delay)/ INP:首次互動延遲,目標<200ms
- CLS(Cumulative Layout Shift):版面位移,目標<0.1
呢三個指標係Google排名因素之一。詳情可參考技術SEO審計。
速度測試工具
- Google PageSpeed Insights:綜合分析,有改善建議
- GTmetrix:詳細waterfall chart
- WebPageTest.org:多地區測試
- Chrome Lighthouse:DevTools內建
10個實戰優化方法
1. 圖片優化
圖片通常係網站最大嘅資源。優化方法:
- 適當尺寸:唔好用5,000px大圖縮細顯示
- 新格式:用WebP代替JPG(細50-70%)、AVIF更先進
- 壓縮:用TinyPNG、Squoosh、ImageOptim
- Lazy Loading:用
loading="lazy"屬性,圖片只喺quasi visible先載入 - Responsive Images:用
srcset提供不同解析度
單係圖片優化通常可以提升20-40%速度。
2. Caching
三種主要caching:
- Browser Caching:用戶第二次訪問,直接從browser cache載入
- Server Caching:減少server處理時間(WP Rocket、W3 Total Cache for WordPress)
- Object Caching:Redis/Memcached cache database queries
3. CDN(Content Delivery Network)
CDN將你嘅靜態資源(圖、CSS、JS)分發到全球節點,用戶從最近嘅server下載。
常用CDN:
- Cloudflare(免費版已經夠用)
- BunnyCDN(性價比高)
- AWS CloudFront(企業級)
4. 主機升級
$30/月嘅shared hosting vs $200/月嘅VPS,速度可以差5倍。建議:
- 初創:Shared hosting(SiteGround、Hostinger)
- 成長期:VPS(DigitalOcean、Linode)
- 成熟期:Managed hosting(Kinsta、WP Engine)
5. CSS/JavaScript Minification
移除空格、注釋、不必要字符,通常檔案減20-30%。
6. Combine Files
將多個小CSS/JS file合併成一個,減少HTTP requests。
7. Defer / Async Loading
JavaScript預設係blocking — 必須載入完先render頁面。用defer或async令JS非阻塞載入。
8. Database優化(WordPress)
- 定期清理revisions、spam comments、transients
- 用WP-Optimize、WP Sweep等插件
- 大型網站用Object Cache(Redis)
9. 減少Plugins
WordPress裝50個plugin,速度一定慘。原則:
- 每個plugin必須有實際用途
- 定期審視同移除唔用嘅
- 選用輕量級plugin
10. 第三方腳本管理
Google Analytics、Facebook Pixel、聊天widget — 每個都拖慢速度。建議:
- 只用必要嘅
- 用Google Tag Manager統一管理
- Defer非critical scripts
進階優化
HTTP/2 同 HTTP/3
新版HTTP協定支援多路復用,大幅減少connections時間。
Edge Computing
Cloudflare Workers、Vercel Edge等服務令動態內容都可以由edge node處理。
Image LCP優化
對Hero image用fetchpriority="high",優先載入。
Font Optimization
- 用
font-display: swap避免不可見文字 - Subset fonts只載入需要嘅字符
- Self-host fonts vs Google Fonts
速度優化前後比較
| 優化前 | 優化後 | 影響 |
|---|---|---|
| LCP 5.2秒 | LCP 2.1秒 | SEO排名上升、跳出率下降 |
| 速度評分 35 | 速度評分 87 | Google排名加分 |
| 主頁2.5MB | 主頁800KB | 節省70%數據 |
常見錯誤
1. 用太多Slider
主頁裝5張Slider大圖,每張2MB,主頁就10MB。Slider通常只有第一張被睇到,其餘係浪費。
2. Embed過多影片
YouTube embed每個都加載300KB+ JavaScript。用Lite YouTube Embed代替。
3. 唔測試
優化前後一定要測試,確認改善。有時優化反而令網站壞咗。
WordPress速度優化Stack
建議組合:
- Hosting: Hostinger / Cloudways
- Theme: GeneratePress / Astra(輕量)
- Cache: WP Rocket / FlyingPress
- Image: ShortPixel / Imagify
- CDN: Cloudflare
- DB: WP-Optimize
呢個stack可以將WordPress網站做到90+ PageSpeed分數。
結語
網站速度同UI/UX、SEO、轉化率優化緊密相關。AOOAHK提供完整嘅網頁開發同優化服務,如果你嘅網站速度評分低於70,值得做完整評估。聯絡我哋了解詳情。