Lighthouse评分从60到90的优化全记录（附代码示例）
本文目录导读：
在现代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
进一步优化建议
- 服务端渲染（SSR）：适用于动态内容较多的网站（如Next.js）。
- 预加载关键资源：
<link rel="preload" href="critical.css" as="style">
- 优化字体加载：
@font-face { font-display: swap; }
通过优化图片、减少未使用的代码、优化关键渲染路径和启用缓存，我们成功将Lighthouse评分从60提升到90+，性能优化是一个持续的过程，建议定期使用Lighthouse检测并改进。
完整优化代码示例可参考：GitHub Repo
希望这篇文章对你有帮助！🚀
