前端性能优化：提升网页加载速度的 12 个实战技巧

5 3 月, 2026 65点热度 0人点赞 0条评论

引言

在如今的互联网时代，网页加载速度直接影响用户体验和转化率。研究表明，页面加载时间超过 3 秒，53% 的用户会选择离开。本文将分享 12 个经过实战验证的前端性能优化技巧，帮助你显著提升网站性能。

1. 图片懒加载（Lazy Loading）

懒加载可以延迟加载视口外的图片，减少初始页面加载时间。


// 原生 Intersection Observer API
const images = 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);
    }
  });
});
images.forEach(img => imageObserver.observe(img));

2. 代码分割与按需加载

使用动态 import() 实现路由级别的代码分割。


// React 路由懒加载
import { lazy, Suspense } from "react";
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

3. 资源预加载（Preload）

使用 preload 提示浏览器优先加载关键资源。


<!-- 预加载关键 CSS -->
<link rel="preload" href="/styles/critical.css" as="style">
<!-- 预加载关键字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- 预加载关键 JS -->
<link rel="preload" href="/js/main.js" as="script">

4. 压缩与 Tree Shaking

使用现代构建工具移除未使用的代码。


// webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    usedExports: true, // 启用 Tree Shaking
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 生产环境移除 console
            drop_debugger: true
          }
        }
      })
    ]
  }
};

5. 使用 WebP 格式

WebP 比 JPEG 小 25-35%，显著减少图片体积。


<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

6. 启用浏览器缓存

配置合理的缓存策略减少重复请求。


# Nginx 缓存配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}
location ~* \.(html|json)$ {
  expires 1h;
  add_header Cache-Control "public, must-revalidate";
}

7. 减少 HTTP 请求

合并小文件，使用 CSS Sprites 或 SVG Sprites。


/* 使用 CSS Sprites */
.icon {
  background-image: url("/sprites/icons.png");
  background-repeat: no-repeat;
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -32px 0; }
.icon-settings { background-position: -64px 0; }

8. 使用 CDN 加速

将静态资源部署到 CDN，利用边缘节点加速访问。


<!-- 使用 CDN 加载第三方库 -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

9. 关键 CSS 内联

将首屏关键 CSS 内联到 HTML，减少渲染阻塞。


<head>
  <style>
    /* 关键 CSS - 首屏样式 */
    body { font-family: system-ui; margin: 0; }
    .header { height: 60px; background: #fff; }
    .hero { min-height: 80vh; }
  </style>
  <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel=stylesheet">
</head>

10. 优化 JavaScript 执行

使用 defer/async 避免阻塞 HTML 解析。


<!-- defer: 延迟执行，按顺序 -->
<script src="main.js" defer></script>
<!-- async: 异步执行，不保证顺序 -->
<script src="analytics.js" async></script>

11. 使用 Service Worker 缓存

实现离线缓存和请求拦截。


// sw.js - Service Worker
const CACHE_NAME = "v1";
const urlsToCache = ["/", "/styles/main.css", "/js/main.js"];

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request).then(response => response || fetch(event.request))
  );
});

12. 性能监控与优化

使用 Performance API 监控关键指标。


// 监控核心 Web 指标
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name}: ${entry.startTime}ms`);
  });
});
observer.observe({ entryTypes: ["paint", "largest-contentful-paint"] });

// 发送性能数据到分析服务器
window.addEventListener("load", () => {
  const perfData = performance.getEntriesByType("navigation")[0];
  console.log("DOM 加载时间:", perfData.domContentLoadedEventEnd);
  console.log("完全加载时间:", perfData.loadEventEnd);
});