網頁載入速度優化全攻略：提升Core Web Vitals分數

一、Core Web Vitals是什麼？

Core Web Vitals係Google於2020年推出嘅一組核心網頁體驗指標，用嚟衡量用戶喺網站上嘅實際體驗。呢啲指標已經成為Google搜尋排名嘅重要因素。

1.1 三大核心指標

1.2 INP取代FID

2024年3月，Google正式以INP（Interaction to Next Paint）取代FID（First Input Delay）作為Core Web Vitals指標。INP更全面咁衡量網站嘅互動回應性，因為佢測量所有互動，而唔係只係第一次互動。

1.3 評分標準

1.4 為什麼Core Web Vitals重要？

• SEO排名因素：Google明確將Core Web Vitals納入排名演算法
• 用戶體驗：直接影響跳出率同轉換率
• 商業價值：每改善100毫秒載入時間，轉換率可提升1%
• 競爭優勢：47%網站未達標，達標即有優勢

二、LCP優化：加速最大內容繪製

LCP（Largest Contentful Paint）衡量頁面主要內容嘅載入時間，係網頁速度最直觀嘅指標。

2.1 什麼元素會被計算為LCP？

• 圖片元素（<img>）
• 影片縮圖（<video>嘅poster）
• 背景圖片
• 大區塊文字元素

2.2 LCP優化策略

2.3 預載入LCP元素

對於英雄圖片（Hero Image），使用預載入可以顯著加快LCP：

<!-- 預載入LCP圖片 -->
<link rel="preload" as="image" href="hero-image.webp" 
      imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
      imagesizes="100vw">

<!-- 預載入關鍵字型 -->
<link rel="preload" as="font" href="font.woff2" 
      type="font/woff2" crossorigin>

2.4 優化伺服器回應時間（TTFB）

• 使用高效嘅主機服務
• 啟用伺服器端快取
• 使用CDN分發內容
• 優化數據庫查詢
• 升級至PHP 8.x或更新版本

三、INP優化：提升互動回應速度

INP（Interaction to Next Paint）係2024年新加入嘅Core Web Vitals指標，衡量用戶互動（點擊、輕觸、按鍵）到畫面更新嘅時間。

3.1 INP與FID的分別

3.2 INP優化策略

• 減少JavaScript執行時間：分拆長任務（Long Tasks）
• 避免主線程阻塞：使用Web Workers處理複雜計算
• 減少DOM操作：批量更新DOM
• 優化事件處理器：使用事件委託

3.3 分拆長任務

任何超過50毫秒嘅JavaScript任務都係「長任務」，會阻塞主線程：

// 差：長任務阻塞主線程
function processLargeArray(items) {
    items.forEach(item => {
        // 大量處理
    });
}

// 好：使用 requestIdleCallback 分拆任務
function processLargeArrayAsync(items) {
    const CHUNK_SIZE = 100;
    let index = 0;
    
    function processChunk(deadline) {
        while (index < items.length && deadline.timeRemaining() > 0) {
            // 處理單個項目
            processItem(items[index]);
            index++;
        }
        
        if (index < items.length) {
            requestIdleCallback(processChunk);
        }
    }
    
    requestIdleCallback(processChunk);
}

// 或使用 scheduler.yield()（較新API）
async function processWithYield(items) {
    for (const item of items) {
        processItem(item);
        if (navigator.scheduling?.isInputPending()) {
            await scheduler.yield();
        }
    }
}

3.4 使用Web Workers

// main.js - 將複雜計算移至Worker
const worker = new Worker('worker.js');

worker.postMessage({ data: complexData });

worker.onmessage = (e) => {
    updateUI(e.data.result);
};

// worker.js
self.onmessage = (e) => {
    const result = heavyComputation(e.data);
    self.postMessage({ result });
};

四、CLS優化：確保視覺穩定性

CLS（Cumulative Layout Shift）衡量頁面視覺穩定性，即元素喺載入過程中「跳動」嘅程度。

4.1 常見CLS問題

• 圖片/影片冇設定尺寸
• 廣告動態插入
• 字型載入導致文字重排
• 動態內容注入
• 第三方嵌入內容

4.2 CLS優化策略

4.3 為圖片預留空間

<!-- 方法1：直接設定尺寸 -->
<img src="image.jpg" width="800" height="600" alt="描述">

<!-- 方法2：使用aspect-ratio -->
<style>
img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
</style>

<!-- 方法3：容器預留空間 -->
<style>
.image-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
}
.image-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

4.4 避免動態內容導致CLS

/* 差：會導致佈局偏移 */
.notification {
    position: relative;
    /* 插入時會推開其他內容 */
}

/* 好：使用transform，唔影響佈局 */
.notification {
    position: fixed;
    top: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
.notification.show {
    transform: translateY(0);
}

五、圖片優化技術

圖片通常佔網頁總大小嘅50%以上，係效能優化嘅重點對象。

5.1 新一代圖片格式

5.2 響應式圖片

<picture>
    <!-- AVIF格式（最佳壓縮）-->
    <source type="image/avif"
            srcset="image-400.avif 400w,
                    image-800.avif 800w,
                    image-1200.avif 1200w"
            sizes="(max-width: 600px) 100vw, 50vw">
    
    <!-- WebP格式（良好支援）-->
    <source type="image/webp"
            srcset="image-400.webp 400w,
                    image-800.webp 800w,
                    image-1200.webp 1200w"
            sizes="(max-width: 600px) 100vw, 50vw">
    
    <!-- JPEG後備 -->
    <img src="image-800.jpg" 
         srcset="image-400.jpg 400w,
                 image-800.jpg 800w,
                 image-1200.jpg 1200w"
         sizes="(max-width: 600px) 100vw, 50vw"
         width="800" height="600"
         alt="圖片描述"
         loading="lazy">
</picture>

5.3 圖片壓縮工具

• 線上工具：Squoosh、TinyPNG、Compressor.io
• 命令行：ImageMagick、cwebp、avifenc
• 建構工具：Sharp、imagemin
• CDN自動優化：Cloudflare Images、imgix

5.4 圖片優化檢查清單

• ☐ 使用WebP/AVIF格式
• ☐ 提供多個尺寸（srcset）
• ☐ 設定width同height
• ☐ 非首屏圖片使用loading="lazy"
• ☐ 壓縮圖片質素（80-85%通常足夠）

六、CDN應用策略

CDN（Content Delivery Network）可以顯著提升網頁速度，將內容分發到全球各地嘅伺服器。

6.1 CDN的優點

• 減少延遲：內容從最近嘅伺服器傳送
• 減輕伺服器負擔：靜態資源由CDN處理
• 提升穩定性：分散流量，防止單點故障
• 自動優化：部分CDN提供圖片優化、壓縮

6.2 常用CDN服務

6.3 CDN設置建議

• 啟用HTTP/3（QUIC協議）
• 啟用Brotli壓縮
• 設定合適嘅快取TTL
• 啟用圖片優化功能
• 使用Edge Computing處理動態內容

七、代碼優化技術

優化HTML、CSS、JavaScript代碼係提升PageSpeed分數嘅基礎。

7.1 CSS優化

<!-- 關鍵CSS內聯 -->
<style>
/* 首屏必需嘅CSS */
header { ... }
.hero { ... }
</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>

7.2 JavaScript優化

<!-- 延遲非關鍵JavaScript -->
<script src="analytics.js" defer></script>

<!-- 異步載入獨立腳本 -->
<script src="widget.js" async></script>

<!-- 動態載入 -->
<script>
// 用戶互動後先載入
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        const script = document.createElement('script');
        script.src = 'non-critical.js';
        document.body.appendChild(script);
    }, 3000);
});
</script>

7.3 消除渲染阻塞資源

• CSS：內聯關鍵CSS，延遲非關鍵CSS
• JavaScript：使用async或defer屬性
• 字型：使用font-display: swap

7.4 代碼壓縮

• HTML：移除空白、註釋
• CSS：Minify、移除未使用嘅CSS（PurgeCSS）
• JavaScript：Minify、Tree Shaking

如果你唔熟悉代碼優化，可以參考我哋嘅網頁設計計劃，我哋會為你處理所有效能優化工作。

八、快取策略詳解

正確嘅快取策略可以大幅提升網頁速度，減少重複下載。

8.1 瀏覽器快取設定

# .htaccess 快取設定
<IfModule mod_expires.c>
    ExpiresActive On
    
    # 圖片快取1年
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/avif "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    
    # CSS/JS快取1年（配合版本號）
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    
    # 字型快取1年
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType font/woff "access plus 1 year"
    
    # HTML唔快取或短時間快取
    ExpiresByType text/html "access plus 0 seconds"
</IfModule>

# 啟用Gzip/Brotli壓縮
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

8.2 快取策略表

8.3 Service Worker快取

// service-worker.js
const CACHE_NAME = 'v1';
const ASSETS = [
    '/',
    '/styles.css',
    '/script.js',
    '/logo.webp'
];

// 安裝時預快取資源
self.addEventListener('install', (e) => {
    e.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(ASSETS))
    );
});

// 使用快取優先策略
self.addEventListener('fetch', (e) => {
    e.respondWith(
        caches.match(e.request)
            .then(response => response || fetch(e.request))
    );
});

九、延遲載入技術

延遲載入（Lazy Loading）可以顯著改善初始載入時間，係效能優化嘅重要技術。

9.1 原生圖片延遲載入

<!-- 首屏圖片：唔使用lazy loading -->
<img src="hero.webp" alt="Hero圖片" 
     fetchpriority="high">

<!-- 非首屏圖片：使用lazy loading -->
<img src="image.webp" alt="描述" 
     loading="lazy"
     width="800" height="600">

<!-- iframe延遲載入 -->
<iframe src="video.html" loading="lazy"></iframe>

9.2 Intersection Observer API

// 自訂延遲載入實現
const lazyImages = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.removeAttribute('data-src');
            observer.unobserve(img);
        }
    });
}, {
    rootMargin: '50px 0px', // 提前50px開始載入
    threshold: 0.01
});

lazyImages.forEach(img => imageObserver.observe(img));

9.3 組件延遲載入

// React動態import
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
    return (
        <Suspense fallback={<Loading />}>
            <HeavyComponent />
        </Suspense>
    );
}

// 基於路由嘅代碼分割
const routes = [
    {
        path: '/dashboard',
        component: () => import('./pages/Dashboard')
    }
];

十、伺服器端優化

伺服器效能直接影響TTFB（Time To First Byte），係網頁速度嘅基礎。

10.1 伺服器優化策略

• 升級PHP版本：PHP 8.3比7.4快15-25%
• 啟用OPcache：PHP代碼快取
• 數據庫優化：索引、查詢優化、連接池
• 使用物件快取：Redis、Memcached
• 頁面快取：Varnish、FastCGI Cache

10.2 WordPress專用優化

• 使用高效快取插件（如WP Rocket、LiteSpeed Cache）
• 減少插件數量
• 使用優化嘅主題
• 定期清理數據庫
• 禁用不必要嘅功能

10.3 升級至HTTP/3

HTTP/3使用QUIC協議，可以：

• 消除TCP握手開銷
• 更好嘅多路複用
• 連接遷移（網絡切換唔斷線）
• 改善高延遲網絡表現

十一、測試與監察工具

定期測試同監察係維持Core Web Vitals達標嘅關鍵。

11.1 測試工具

11.2 Lab Data vs Field Data

• Lab Data：模擬環境測試，用於開發調試
• Field Data：真實用戶數據（CrUX），用於排名評估

Google排名使用Field Data，所以要確保真實用戶體驗達標。

11.3 持續監察

• 每週檢查Search Console嘅Core Web Vitals報告
• 設置效能監察警報
• 追蹤優化前後嘅變化
• 監察第三方腳本嘅影響

十二、優化檢查清單

以下係完整嘅效能優化檢查清單：

12.1 LCP優化清單

• ☐ 預載入LCP元素（圖片/字型）
• ☐ 使用CDN
• ☐ 優化伺服器回應時間
• ☐ 消除渲染阻塞資源
• ☐ 優化圖片（WebP/AVIF、壓縮、正確尺寸）

12.2 INP優化清單

• ☐ 分拆長JavaScript任務
• ☐ 減少主線程工作
• ☐ 使用Web Workers處理複雜計算
• ☐ 優化事件處理器
• ☐ 減少DOM操作

12.3 CLS優化清單

• ☐ 所有圖片設定width/height
• ☐ 廣告位預留空間
• ☐ 使用font-display: swap或optional
• ☐ 避免動態插入內容推移佈局
• ☐ 使用CSS transform做動畫

12.4 通用優化清單

• ☐ 啟用Gzip/Brotli壓縮
• ☐ 設定適當嘅快取策略
• ☐ 使用HTTP/2或HTTP/3
• ☐ 減少HTTP請求數量
• ☐ 移除未使用嘅CSS/JS
• ☐ 定期監察Core Web Vitals

12.5 EC Shop City的服務

EC Shop City擁有接近20年經驗，我哋嘅網頁設計服務包含全面嘅效能優化：

• Core Web Vitals達標保證
• 圖片自動優化
• CDN配置
• 代碼優化同壓縮
• 快取策略設定

無論你需要新網站、網上商店定係現有網站效能優化，我哋都可以幫到你。配合我哋嘅網上推廣服務，全面提升你嘅網上業務表現。