網站效能影響從使用者體驗到搜尋排名的一切，但並非每位開發者都擁有企業級的資源。好消息是，你不需要花費大量資金就能達到令人印象深刻的載入時間。本指南探討了在不超出預算的情況下優化網站效能的實用、經濟有效的策略。
在深入探討優化技術之前，讓我們先明確我們要測量的內容：
venzil
// 使用 Performance API 測量關鍵指標的示例
const performanceObserver = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
console.log(`${entry.name}: ${entry.startTime.toFixed(0)}ms`);
});
});
performanceObserver.observe({ entryTypes: ["navigation", "largest-contentful-paint", "first-input"] });
需要追蹤的關鍵指標：
使用 PerformanceObserver API 可以讓你即時監控這些指標並從實際使用者體驗中收集現場數據 - 全部無需昂貴的監控工具。
圖片通常佔據頁面重量的 50-90%。以下是如何免費優化它們：
<!-- 使用現代格式並提供備用方案 -->
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="描述" width="800" height="600">
</picture>
<img src="placeholder.jpg"
data-src="actual-image.jpg"
loading="lazy"
alt="描述">
使用免費工具如 JavaScript 的 Terser 和 CSS 的 CSSNano：
# 安裝工具
npm install terser cssnano --save-dev
# 壓縮 JavaScript
npx terser script.js -o script.min.js
# 壓縮 CSS
npx cssnano style.css style.min.css
提取並內嵌關鍵 CSS 以改善首次渲染：
<head>
<style>
/* 關鍵 CSS 放在這裡 */
body { font-family: sans-serif; margin: 0; }
header { background: #f1f1f1; padding: 1rem; }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>
<script src="non-critical.js" defer></script>
即使在基本的共享主機上，你也可以：
Apache 的 .htaccess 示例：
# 啟用 GZIP 壓縮
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript
</IfModule>
# 設置瀏覽器快取
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
許多 VPS 提供商現在提供每月 $5-10 的入門級選項，其性能優於共享主機：
內容分發網絡（CDN）可以通過從離用戶更近的位置提供內容來大幅提高性能。與普遍認知相反，CDN 不一定很昂貴。
數個提供商提供免費層級或非常經濟的選項：
選擇 CDN 時，請考慮：
我最近研究了 2025 年經濟的 CDN 選項，對一些提供商以最低投資提供的價值感到驚訝。配置適當的預算 CDN 可以將全球加載時間減少 40-60%。
對於稍微高級一些的用戶，你可以實施基本的多 CDN 方法：
// 簡單的 CDN 故障轉移策略
const CDN_URLS = [
'https://primary-cdn.com/assets/',
'https://backup-cdn.com/assets/'
];
function loadFromCDN(asset, attempt = 0) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(CDN_URLS[attempt] + asset);
img.onerror = () => {
if (attempt < CDN_URLS.length - 1) {
loadFromCDN(asset, attempt + 1).then(resolve).catch(reject);
} else {
reject('All CDNs failed');
}
};
img.src = CDN_URLS[attempt] + asset;
});
}
-- 為經常查詢的欄位添加索引
CREATE INDEX idx_user_email ON users(email);
-- 使用 EXPLAIN 分析查詢性能
EXPLAIN SELECT * FROM users WHERE email = 'user@example.com';
你可以在本地開發環境免費設置 Redis，或在大多數雲提供商上使用小型實例：
const redis = require('redis');
const client = redis.createClient();
async function getUserData(userId) {
// 嘗試獲取快取數據
const cachedData = await client.get(`user:${userId}`);
if (cachedData) {
return JSON.parse(cachedData);
}
// 否則查詢資料庫
const userData = await database.query('SELECT * FROM users WHERE id = ?', [userId]);
// 快取 5 分鐘
await client.set(`user:${userId}`, JSON.stringify(userData), 'EX', 300);
return userData;
}
用於衡量優化進度的免費工具：
# Lighthouse CLI - 免費的命令行性能測試
npm install -g lighthouse
lighthouse https://yoursite.com --output=html --output-path=./report.html
使用免費工具設置基本性能監控：
// 簡單的性能監控腳本
document.addEventListener('DOMContentLoaded', () => {
// 等待所有內容載入
window.addEventListener('load', () => {
setTimeout(() => {
const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
// 發送到你的分析或日誌系統
console.log(`Page load time: ${pageLoadTime}ms`);
// 你可以發送到 Google Analytics 進行免費監控
if (window.ga) {
ga('send', 'timing', 'Performance', 'load', pageLoadTime);
}
}, 0);
});
});
網站優化不需要企業級預算。通過逐步實施這些技術，你可以在保持成本最低的同時實現令人印象深刻的性能提升。
從影響最大的項目開始：
對於大多數網站，僅這三項優化就可以減少 50-70% 的載入時間，大幅提升用戶體驗和搜尋排名。
您在有限預算下實施了哪些性能優化技術？請在評論中分享您的經驗！
iThome鐵人賽
看影片追技術