本文目錄導(dǎo)讀：

1. 引言
2. 1. 初始狀態(tài)分析
3. 2. 優(yōu)化策略
4. 3. 優(yōu)化后效果
5. 4. 進(jìn)一步優(yōu)化建議
6. 5. 總結(jié)

在現(xiàn)代Web開發(fā)中，性能優(yōu)化是提升用戶體驗(yàn)的關(guān)鍵因素之一，Google的Lighthouse工具能夠全面評(píng)估網(wǎng)頁(yè)的性能、可訪問(wèn)性、最佳實(shí)踐和SEO表現(xiàn)，本文將詳細(xì)記錄如何將一個(gè)網(wǎng)站的Lighthouse評(píng)分從60分提升到90分以上,并提供具體的優(yōu)化方法和代碼示例。

---

初始狀態(tài)分析

我們需要了解初始Lighthouse評(píng)分低的原因，運(yùn)行Lighthouse測(cè)試后，通常會(huì)得到以下幾個(gè)關(guān)鍵指標(biāo)：

• 性能（Performance）：60分
• 可訪問(wèn)性（Accessibility）：75分
• 最佳實(shí)踐（Best Practices）：80分
• SEO：85分

主要問(wèn)題集中在性能方面，具體表現(xiàn)為：

• 首屏渲染時(shí)間（FCP）較慢
• 繪制（LCP）超過(guò)2.5秒
• 阻塞時(shí)間（TBT）較高
• 未優(yōu)化的圖片資源
• 未使用的JavaScript和CSS

---

優(yōu)化策略

1 優(yōu)化圖片資源

圖片通常是網(wǎng)頁(yè)加載緩慢的主要原因之一，我們可以采取以下措施：

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)行自動(dòng)化壓縮：

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

---

2 減少未使用的JavaScript和CSS

Lighthouse通常會(huì)提示“移除未使用的JavaScript/CSS”，我們可以通過(guò)以下方式優(yōu)化：

2.1 代碼拆分（Code Splitting）

使用Webpack進(jìn)行動(dòng)態(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 啟用瀏覽器緩存

通過(guò)配置Cache-Control頭減少重復(fù)請(qǐng)求：

# 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)過(guò)上述優(yōu)化后，再次運(yùn)行Lighthouse測(cè)試，結(jié)果如下：

• 性能（Performance）：92分 ?
• 可訪問(wèn)性（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)化建議

1. 服務(wù)端渲染（SSR）：適用于動(dòng)態(tài)內(nèi)容較多的網(wǎng)站（如Next.js）。
2. 預(yù)加載關(guān)鍵資源：

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

3. 優(yōu)化字體加載：

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

---

通過(guò)優(yōu)化圖片、減少未使用的代碼、優(yōu)化關(guān)鍵渲染路徑和啟用緩存，我們成功將Lighthouse評(píng)分從60提升到90+，性能優(yōu)化是一個(gè)持續(xù)的過(guò)程，建議定期使用Lighthouse檢測(cè)并改進(jìn)。

完整優(yōu)化代碼示例可參考：GitHub Repo

希望這篇文章對(duì)你有幫助！??