跳至正文

⚡ 網站效能最佳化

📖 定義​

網站效能最佳化是改善網站載入速度和回應性以增強使用者體驗的過程。快速的網站可以提高使用者滿意度、SEO排名和轉換率。

🎯 簡單類比​

餐廳服務速度​

慢餐廳（未最佳化）
├─ 點餐慢（伺服器慢）
├─ 廚房混亂（程式碼低效）
└─ 菜品分開上（資源分散）

快餐廳（已最佳化）
├─ 快速接單（伺服器快）
├─ 高效廚房（程式碼最佳化）
└─ 按順序上菜（優先載入）

⚙️ 運作原理​

1. DNS查詢
2. TCP連線
3. HTTP請求
4. 伺服器回應
5. HTML解析
6. 資源載入
7. 渲染

💡 關鍵範例​

圖片最佳化​

<!-- ❌ 未最佳化 -->
<img src="photo.jpg">

<!-- ✅ 已最佳化 -->
<img
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  src="photo-800w.jpg"
  loading="lazy"
  alt="描述"
>

<!-- 現代格式 -->
<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="描述">
</picture>

JavaScript最佳化​

// ❌ 同步腳本
<script src="app.js"></script>

// ✅ defer
<script defer src="app.js"></script>

// 程式碼分割（React）
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// 防抖
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

快取策略​

// HTTP快取
app.use('/static', express.static('public', {
  maxAge: '1y',
  immutable: true
}));

// Service Worker快取
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

🤔 常見問題​

Q1. 最佳化優先順序？​

A:

1. 使用者感知（最重要）
   - 初始載入速度（FCP、LCP）
   - 互動回應性（FID）
   - 視覺穩定性（CLS）

2. 資源大小
   - 圖片最佳化
   - JavaScript套件大小

測量 → 分析 → 改進 → 重複

Q2. 圖片格式？​

A:

WebP（廣泛支援）
- 壓縮率: ⭐⭐⭐⭐
- 支援: 大多數瀏覽器

JPEG（傳統）
- 壓縮率: ⭐⭐⭐
- 支援: 所有瀏覽器

推薦:
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="...">
</picture>

🎬 總結​

網站效能最佳化是使用者體驗的關鍵：

  • 測量: 資料驅動方法
  • 優先順序: 先處理影響大的
  • 漸進式: 逐步進行
  • 持續: 定期監控和改進

快1秒，轉換率提高7%！ ⚡✨