新手必會的前後端效能優化技巧

2025/03/21

提升 Web 應用效能是開發中的重要一環。了解如何透過減少網頁載入時間、優化資源載入順序，以及運用緩存機制來改善效能，能讓你的應用更順暢、更具競爭力，讓使用者擁有更佳的體驗。

理解網頁資源載入順序的影響

在改善網頁效能時，我們首先要注意網頁資源載入的順序。影響載入順序的因素主要為CSS、JavaScript及影像等靜態資源的載入。通常，瀏覽器會先載入所有的CSS檔案，然後再載入JavaScript和其餘資源。

可以在<head>標籤中合理安排CSS，例如：

<link rel="stylesheet" href="styles.css">

而將大多數的JavaScript檔案放在</body>之前，以防止影響網頁的初始渲染：

<script src="scripts.js"></script>

透過正確的資源排程，能顯著降低網頁載入的阻塞時間，讓你的應用效能更出色。

利用異步載入提升效能

現今瀏覽器支持許多異步技術，這些技術能夠有效減少載入的阻塞效應，比方說能在頁面載入後同時執行JavaScript，而不必等到所有資源都載入完畢。最常用的技術是JavaScript的defer和async屬性。

透過這樣的標記來非同步載入JavaScript：

<script src="scripts.js" async></script>

或是延遲載入，等到HTML解析完成後再執行：

<script src="scripts.js" defer></script>

這種方法可減少頁面的初始載入時間，並提供更流暢的使用者經驗。

善用瀏覽器緩存機制

適當的緩存設置能極大程度提高網頁的效能。通常，可在伺服器端設置HTTP Header來控制緩存策略，常見的緩存標頭包括Cache-Control和Expires。

例如，設置一個長時間的緩存期限：

Cache-Control: max-age=31536000

這樣的設置能讓靜態資源如CSS或JavaScript在用戶端被長時間緩存，減少重覆請求的需要，使網頁加載更迅速。此外，也可隨資源版本更迭更新緩存，用法請依實際需求設置。

壓縮與縮小資源檔案大小

減少網頁資源檔案大小是提升效能最直觀的做法之一。通常可透過壓縮與縮小JavaScript、CSS和HTML文件來達成。

使用工具如UglifyJS等來縮小JavaScript文件：

uglifyjs input.js --compress --mangle -o output.min.js

或利用工具如CSSnano來處理CSS文件：

cssnano styles.css styles.min.css

這些工具可以自動剔除不必要的空格、註解和換行符，讓資源更輕盈，載入速度加快。

合理配置與選擇CDN資源

使用CDN（內容分發網路）能有效加速全球各地的用戶訪問速度，降低延遲，提高效能。在選擇CDN時，應考慮服務提供者的節點分佈、穩定性與成本等因素。

當設定CDN以提供資源如JavaScript或CSS時，典型的配置方式是引用外部的網址：

<link rel="stylesheet" href="https://cdn.example.com/styles.css">

或：

<script src="https://cdn.example.com/library.js"></script>

合理的CDN配置能讓資源在用戶端的加載速度顯著加快，尤其是在資源龐大或用戶分佈廣泛時，會有更明顯的效能提升。

使用靜態網站懶加載技術

在頁面內的圖片大量存在時，懶加載（Lazy Load）是一個有效減少初始載入時間的技巧。透過JavaScript，我們可以讓圖片或其他資源當用戶向下滾動到可視範圍內時才載入。

一個簡單的懶加載示例可以這樣實現：

<img class="lazy" data-src="image.jpg" alt="Sample Image">

並使用JavaScript進行處理：

const lazyImages = document.querySelectorAll('img.lazy');
const lazyLoad = () => {
    lazyImages.forEach(image => {
        if (image.getBoundingClientRect().top < window.innerHeight && image.getAttribute('data-src')) {
             image.src = image.getAttribute('data-src');
             image.removeAttribute('data-src');
        }
    });
};
window.addEventListener('scroll', lazyLoad);

此技術能大幅減少初始滾動前頁面的載入資源量，提升用戶體驗。

選擇高效的影像格式與大小

影像通常佔據網頁資源的最大部分，選擇合適的格式和優化大小至關重要。格式上，可考慮使用WebP或AVIF等新型影像格式來替代傳統的PNG或JPEG，它們在壓縮效率和畫質上有更好的表現。

例如，將影像轉換為WebP格式：

cwebp image.png -o image.webp

同時，可以使用工具如ImageMagick進行批量大小調整：

convert image.png -resize 50% image-resized.png

透過這些優化，網頁的影像加載速度能夠顯著提高，亦讓全體網頁看起來更迅速。

分析與測試效能的工具選擇

分析並確認網站性能瓶頸是優化的重要環節。常用的工具如Google的Lighthouse及WebPageTest可幫助識別加載速度及提供改善建議。

Lighthouse的使用相當簡便，只需在Google Chrome瀏覽器中打開開發者工具，並挑選Lighthouse分頁進行網站掃描，即可獲得詳細報告。

此外，WebPageTest允許使用者在不同地點及網速環境下測試，確保網站在各種情況下的效能表現。

透過這些工具，你可以得到客觀的數據，幫助你針對性的改進網站效能，達到最佳效益。

實現資源載入優先級調整

應用可以通過改變網頁載入資源的優先級來提高效能，特別是在資源密集型應用中。使用<link>標籤的rel屬性來指定資源的優先級，例如使用preload來優化加載：

<link rel="preload" href="styles/main.css" as="style">

上述設置告知瀏覽器優先加載特定資源，在提高初始載入速度的同時，保障用戶看到網頁的關鍵內容。

正確的資源排程能夠減少延遲，提高網頁響應快速性，並為使用者創造流暢的體驗。

優化後端伺服器響應時間

前後端效能優化密不可分，後端伺服器的響應時間亦影響整體體驗。減少響應延遲可透過使用高效的資料庫、良好的API設計、預備快取技術等來實現。

例如，使用Memcached或Redis來進行快取優化：

const redis = require("redis");
const client = redis.createClient();

client.on("error", (err) => {
    console.log("Error " + err);
});

client.set("key", "value", redis.print);
client.get("key", (err, result) => {
    if (err) throw err;
    console.log(result);
});

通過配置並調整伺服器參數，你的應用可以在保證數據一致性的情況下顯著增強效能。

← 上一篇: 從前端到後端的關鍵概念下一篇: 新手必學的 Web 開發效能基本概念 →