本文目录导读：

1. 引言
2. 1. 初始状态分析
3. 2. 优化策略
4. 3. 优化后效果
5. 4. 进一步优化建议
6. 5. 总结

在现代Web开发中，性能优化是提升用户体验的关键因素之一，Google的Lighthouse工具能够全面评估网页的性能、可访问性、最佳实践和SEO表现，本文将详细记录如何将一个网站的Lighthouse评分从60分提升到90分以上,并提供具体的优化方法和代码示例。

---

初始状态分析

我们需要了解初始Lighthouse评分低的原因，运行Lighthouse测试后，通常会得到以下几个关键指标：

• 性能（Performance）：60分
• 可访问性（Accessibility）：75分
• 最佳实践（Best Practices）：80分
• SEO：85分

主要问题集中在性能方面，具体表现为：

• 首屏渲染时间（FCP）较慢
• 绘制（LCP）超过2.5秒
• 阻塞时间（TBT）较高
• 未优化的图片资源
• 未使用的JavaScript和CSS

---

优化策略

1 优化图片资源

图片通常是网页加载缓慢的主要原因之一，我们可以采取以下措施：

1.1 使用现代图片格式（WebP）

<!-- 原代码 -->
<img src="example.jpg" alt="Example Image">
<!-- 优化后 -->
<picture>
  <source srcset="example.webp" type="image/webp">
  <img src="example.jpg" alt="Example Image">
</picture>

1.2 图片懒加载

<img src="example.jpg" loading="lazy" alt="Example Image">

1.3 压缩图片

使用工具如sharp（Node.js）进行自动化压缩：

const sharp = require('sharp');
sharp('example.jpg')
  .webp({ quality: 80 })
  .toFile('example.webp');

---

2 减少未使用的JavaScript和CSS

Lighthouse通常会提示“移除未使用的JavaScript/CSS”，我们可以通过以下方式优化：

2.1 代码拆分（Code Splitting）

使用Webpack进行动态导入：

// 优化前
import HeavyComponent from './HeavyComponent';
// 优化后
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

2.2 使用PurgeCSS移除未使用的CSS

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync('./src/**/*', { nodir: true }),
    }),
  ],
};

---

3 优化关键渲染路径（Critical Rendering Path）

3.1 内联关键CSS

<style>
  /* 关键CSS直接内联 */
  .header { font-weight: bold; }
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

3.2 延迟加载非关键JavaScript

<script defer src="non-critical.js"></script>

---

4 启用浏览器缓存

通过配置Cache-Control头减少重复请求：

# Nginx配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 365d;
  add_header Cache-Control "public, max-age=31536000";
}

---

5 使用CDN加速静态资源

将静态资源托管到CDN（如Cloudflare、AWS CloudFront）以减少延迟。

---

优化后效果

经过上述优化后，再次运行Lighthouse测试，结果如下：

• 性能（Performance）：92分 ✅
• 可访问性（Accessibility）：88分 ✅
• 最佳实践（Best Practices）：95分 ✅
• SEO：93分 ✅

关键指标改善：

• FCP：从2.1s → 0.8s
• LCP：从3.2s → 1.5s
• TBT：从450ms → 120ms

---

进一步优化建议

1. 服务端渲染（SSR）：适用于动态内容较多的网站（如Next.js）。
2. 预加载关键资源：

   <link rel="preload" href="critical.css" as="style">

3. 优化字体加载：

   @font-face {
     font-display: swap;
   }

---

通过优化图片、减少未使用的代码、优化关键渲染路径和启用缓存，我们成功将Lighthouse评分从60提升到90+，性能优化是一个持续的过程，建议定期使用Lighthouse检测并改进。

完整优化代码示例可参考：GitHub Repo

希望这篇文章对你有帮助！🚀