什麼是頁面速度？

定義

頁面速度（Page Speed）是指網頁完全載入所需的時間。更準確地說，是從使用者點選連結或輸入URL的那一刻到瀏覽器中頁面的所有內容完全顯示的時間。頁面速度是網站效能最重要的指標之一，對使用者體驗和搜尋引擎最佳化（SEO）都有重大影響。

頁面速度分為幾個詳細指標。包括首次內容繪製（First Contentful Paint，FCP），即首次內容出現在螢幕上的時間；可互動時間（Time to Interactive，TTI），即頁面變得可互動的時間；以及最大內容繪製（Largest Contentful Paint，LCP），即最大內容載入的時間。Google使用綜合這些指標的Core Web Vitals作為排名因素，使頁面速度不僅對使用者體驗而且對SEO策略都成為必要因素。

影響頁面速度的因素非常多樣。伺服器回應時間、圖片和影片等媒體檔案的大小和最佳化狀態、JavaScript和CSS檔案的容量和執行方式、瀏覽器快取設定、內容傳遞網路（CDN）使用情況等都會影響頁面速度。因此，頁面速度最佳化需要從多個角度進行全面的工作。

特點

直接影響使用者體驗：快速的頁面載入提高使用者滿意度並大幅降低跳出率。研究顯示，頁面載入每延遲1秒，轉換率就會下降7%。
搜尋排名因素：包括Google在內的主要搜尋引擎將頁面速度作為搜尋排名決定因素使用。在行動搜尋中尤為重要。
與收益直接相關：對於電子商務網站，研究顯示，頁面速度每提高1秒，轉換率可增加高達2倍。
在行動端更重要：行動網路通常比桌面慢，這使得行動端的頁面速度最佳化尤為關鍵。
可測量和可改進：可以使用Google PageSpeed Insights、Lighthouse等工具準確測量，並檢視具體的改進措施。

使用方法

以下是測量和最佳化頁面速度的方法。

第1步：測量當前速度 首先需要準確測量網站當前的頁面速度。使用Google PageSpeed Insights、GTmetrix、WebPageTest等工具在桌面和行動裝置上測量速度。這些工具不僅提供分數，還提供具體的問題和改進建議。

第2步：圖片最佳化 圖片在大多數網頁上佔據最大的空間。調整到適當的尺寸，轉換為WebP或AVIF等現代格式，並實施延遲載入（Lazy Loading），僅在需要時載入圖片。圖片壓縮工具可以在不損失品質的情況下將檔案大小減少50-80%。

第3步：JavaScript和CSS最佳化 刪除不必要的JavaScript和CSS，壓縮（minify）檔案，將關鍵CSS內聯包含，其餘非同步載入。儘可能將JavaScript放在頁面底部，或使用defer/async屬性以避免阻塞頁面渲染。

第4步：改善伺服器回應時間 改善伺服器效能，遷移到更快的託管服務，或使用CDN（內容傳遞網路）向全球使用者更快地提供內容。最佳化資料庫查詢和實施伺服器端快取也很有效。

第5步：利用瀏覽器快取 設定適當的快取標頭，以便回訪使用者可以更快地載入頁面。為靜態資源（圖片、CSS、JavaScript）設定較長的快取期限，並在檔名中包含版本或雜湊以在更新時使快取失效。

第6步：使用HTTP/2或HTTP/3 使用現代HTTP協定可以同時傳輸多個檔案，大大提高頁面載入速度。大多數現代伺服器和CDN支援HTTP/2。

第7步：持續監控 頁面速度最佳化不是一次性任務。每次新增新內容或功能時都要檢查對速度的影響，並定期監控效能，以便在出現問題時立即回應。

範例

範例1：實現圖片延遲載入

<!-- 基本圖片標籤 -->
<img src="large-image.jpg" alt="大圖片">

<!-- 應用延遲載入 -->
<img src="large-image.jpg" alt="大圖片" loading="lazy">

<!-- 使用Intersection Observer API的高階延遲載入 -->
<img data-src="large-image.jpg" alt="大圖片" class="lazy">

<script>
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll("img.lazy");

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => imageObserver.observe(img));
});
</script>

範例2：CSS和JavaScript最佳化

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>頁面速度最佳化範例</title>

  <!-- 關鍵CSS內聯 -->
  <style>
    /* 僅包含首屏所需的CSS */
    body { margin: 0; font-family: sans-serif; }
    .hero { height: 100vh; background: #f0f0f0; }
  </style>

  <!-- 非同步載入其餘CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <!-- 頁面內容 -->

  <!-- 在頁面底部使用defer屬性載入JavaScript -->
  <script src="main.js" defer></script>

  <!-- 或使用async屬性（當執行順序不重要時） -->
  <script src="analytics.js" async></script>
</body>
</html>

範例3：Next.js中的圖片最佳化

import Image from 'next/image'

function BlogPost() {
  return (
    <article>
      <h1>部落格文章標題</h1>

      {/* Next.js Image元件自動最佳化 */}
      <Image
        src="/images/hero.jpg"
        alt="主圖"
        width={1200}
        height={630}
        priority // 首屏圖片優先載入
        placeholder="blur" // 模糊效果改善載入
        blurDataURL="data:image/jpeg;base64,..."
      />

      <p>正文內容...</p>

      {/* 需要滾動的圖片延遲載入 */}
      <Image
        src="/images/content.jpg"
        alt="內容圖片"
        width={800}
        height={600}
        loading="lazy"
      />
    </article>
  )
}

export default BlogPost

範例4：伺服器回應快取設定（Next.js API）

// pages/api/data.js
export default async function handler(req, res) {
  // 設定快取標頭（快取5分鐘，無需重新驗證即可使用）
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=300, stale-while-revalidate=59'
  )

  const data = await fetchDataFromDatabase()

  res.status(200).json(data)
}

範例5：透過Webpack進行套件最佳化

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 刪除console.log
        },
      },
    })],
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    // Gzip壓縮
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
}

優缺點

優點

更高的轉換率：快速的頁面速度提高使用者滿意度並降低跳出率，最終提高轉換率。根據亞馬遜的研究，頁面載入每快100ms，銷售額就會增加1%。
改善搜尋排名：由於Google正式使用頁面速度作為排名因素，較快的頁面更有可能在搜尋結果中排名更高。這在行動搜尋中尤為重要。
更好的使用者體驗：使用者更信任快速的網站並更頻繁地造訪它們。研究顯示，如果頁面在3秒內未載入，53%的行動使用者會離開網站。

缺點

最佳化成本和時間：顯著改善頁面速度需要大量的開發資源和時間。特別是對於遺留系統或複雜的Web應用程式，可能需要全面重構。
與功能的權衡：有時新增華麗的動畫、高解析度圖片或複雜互動等功能可能會降低頁面速度。需要在功能和效能之間找到平衡。
考慮各種環境：由於使用者的網路速度、裝置效能和瀏覽器類型都不同，很難在所有環境中保證完美的效能。如果考慮到開發中國家的慢速網路環境，最佳化會變得更加複雜。

常見問題

問：頁面速度多少合適？ 答：根據Google的Core Web Vitals標準，LCP（Largest Contentful Paint）應在2.5秒以內，FID（First Input Delay）應在100ms以內，CLS（Cumulative Layout Shift）應在0.1以內才能獲得「良好」評級。理想情況下，整個頁面應在3秒內完全載入。電子商務網站或行動網站特別受益於更快的速度。

問：我應該優先考慮行動端還是桌面端？ 答：由於Google使用行動優先索引（Mobile-First Indexing），您應該優先最佳化行動端效能。此外，全球超過60%的網路流量來自行動端，因此從使用者體驗的角度來看，行動端也更重要。理想情況下，您應該在兩種環境中都提供良好的效能。

問：CDN可以使網站快多少？ 答：使用CDN（內容傳遞網路）可以從靠近使用者的伺服器提供內容，大大減少延遲。平均可以將頁面載入時間減少50%以上，對於面向全球使用者的網站特別有效。考慮使用Cloudflare、AWS CloudFront或Fastly等CDN服務。

問：我的頁面速度分數很低，但使用者說感覺很快。我應該改善分數嗎？ 答：PageSpeed Insights等工具的分數只是參考，實際使用者體驗更重要。但是，低分數意味著有改進的空間,因此在合理範圍內進行最佳化是好的。此外，請檢視Google Search Console中的Core Web Vitals報告，以監控基於實際使用者資料的效能指標。搜尋排名受實際使用者資料影響。

定義​

特點​

使用方法​

範例​

優缺點​

優點​

缺點​

常見問題​

定義

特點

使用方法

範例

優缺點

優點

缺點

常見問題