Lighthouse評分從60到90的優(yōu)化全記錄（附代碼示例）
本文目錄導(dǎo)讀：
在現(xiàn)代Web開發(fā)中，性能優(yōu)化是提升用戶體驗(yàn)的關(guān)鍵因素之一，Google的Lighthouse工具能夠全面評估網(wǎng)頁的性能、可訪問性、最佳實(shí)踐和SEO表現(xiàn)，本文將詳細(xì)記錄如何將一個(gè)網(wǎng)站的Lighthouse評分從60分提升到90分以上,并提供具體的優(yōu)化方法和代碼示例。
初始狀態(tài)分析
我們需要了解初始Lighthouse評分低的原因，運(yùn)行Lighthouse測試后，通常會得到以下幾個(gè)關(guān)鍵指標(biāo)：
- 性能（Performance）：60分
- 可訪問性（Accessibility）：75分
- 最佳實(shí)踐（Best Practices）：80分
- SEO：85分
主要問題集中在性能方面，具體表現(xiàn)為：
- 首屏渲染時(shí)間（FCP）較慢
- 繪制（LCP）超過2.5秒
- 阻塞時(shí)間（TBT）較高
- 未優(yōu)化的圖片資源
- 未使用的JavaScript和CSS
優(yōu)化策略
1 優(yōu)化圖片資源
圖片通常是網(wǎng)頁加載緩慢的主要原因之一，我們可以采取以下措施：
1.1 使用現(xiàn)代圖片格式（WebP）
<!-- 原代碼 --> <img src="example.jpg" alt="Example Image"> <!-- 優(yōu)化后 --> <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）進(jìn)行自動化壓縮：
const sharp = require('sharp');
sharp('example.jpg')
.webp({ quality: 80 })
.toFile('example.webp');
2 減少未使用的JavaScript和CSS
Lighthouse通常會提示“移除未使用的JavaScript/CSS”，我們可以通過以下方式優(yōu)化：
2.1 代碼拆分（Code Splitting）
使用Webpack進(jìn)行動態(tài)導(dǎo)入：
// 優(yōu)化前
import HeavyComponent from './HeavyComponent';
// 優(yōu)化后
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 優(yōu)化關(guān)鍵渲染路徑（Critical Rendering Path）
3.1 內(nèi)聯(lián)關(guān)鍵CSS
<style>
/* 關(guān)鍵CSS直接內(nèi)聯(lián) */
.header { font-weight: bold; }
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
3.2 延遲加載非關(guān)鍵JavaScript
<script defer src="non-critical.js"></script>
4 啟用瀏覽器緩存
通過配置Cache-Control頭減少重復(fù)請求：
# Nginx配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public, max-age=31536000";
}
5 使用CDN加速靜態(tài)資源
將靜態(tài)資源托管到CDN（如Cloudflare、AWS CloudFront）以減少延遲。
優(yōu)化后效果
經(jīng)過上述優(yōu)化后，再次運(yùn)行Lighthouse測試，結(jié)果如下：
- 性能（Performance）：92分 ?
- 可訪問性（Accessibility）：88分 ?
- 最佳實(shí)踐（Best Practices）：95分 ?
- SEO：93分 ?
關(guān)鍵指標(biāo)改善：
- FCP：從2.1s → 0.8s
- LCP：從3.2s → 1.5s
- TBT：從450ms → 120ms
進(jìn)一步優(yōu)化建議
- 服務(wù)端渲染（SSR）：適用于動態(tài)內(nèi)容較多的網(wǎng)站（如Next.js）。
- 預(yù)加載關(guān)鍵資源：
<link rel="preload" href="critical.css" as="style">
- 優(yōu)化字體加載：
@font-face { font-display: swap; }
通過優(yōu)化圖片、減少未使用的代碼、優(yōu)化關(guān)鍵渲染路徑和啟用緩存，我們成功將Lighthouse評分從60提升到90+，性能優(yōu)化是一個(gè)持續(xù)的過程，建議定期使用Lighthouse檢測并改進(jìn)。
完整優(yōu)化代碼示例可參考：GitHub Repo
希望這篇文章對你有幫助！??
