閒着沒事，拿 lighthouse 測了一下博客網站的性能評測，發現診斷出的問題還挺多，就順手優化了一下。
這篇文章將記錄這個優化的過程。
優化前後對比
lighthouse 檢測結果
| 優化前 | 優化後 |
|---|---|
 |
 |
性能面板檢測結果
| FCP | DOMContentLoaded | LCP | |
|---|---|---|---|
| 優化前 | 764ms | 1798ms | 1864ms |
| 優化後 | 496ms | 507ms | 496ms |
- FCP（First Contentful Paint）
- LCP（Largest Contentful Paint）
檢測工具
使用 Chrome 自帶的 lighthouse 和 性能面板進行測試。
| 性能面板 | lighthouse |
|---|---|
 |
 |
發現問題
性能面板 | Performance
通過截圖可以觀察到每個時間的頁面變化
發現的問題：
- 文章列表渲染後，文章封面圖加載緩慢
- 圖片完成加載時間過長（封面，頭像圖片）
- 佈局渲染期間發生明顯變化
- 友鏈列表加載完成後
- 左上頭像加載完成
lighthouse
測試後會給到優化建議。
這裏挑一些後面用到的
- 使用新的圖片格式（WebP and AVIF）
- 減少沒用到的CSS文件大小
- img 沒有明確的寬高屬性
- 資源傳輸壓縮（gzip, brotli 等）
- 加載適當大小的圖片（避免超過要展示的大小）
- 避免超大的資源加載阻塞網絡（主要是一些超大的圖片和js）
優化過程
圖片優化
解決：1，2，4，8，9
① 裁剪爲渲染的大小
② 格式調整爲WebP格式
這一步我直接使用 OSS（對象存儲） 提供的圖片加載裁剪功能即可。
配置目標：寬高裁剪爲 120px * 80px，格式調整爲 WebP 格式。
配置處理樣式示例
| 七牛雲 | 又拍雲 | 繽紛雲 |
|---|---|---|
 |
 |
 |
使用：在原有的資源上添加對應的後置即可
- 七牛雲：url
~cover.webp - 又拍雲：url
-cover - 繽紛雲：url
!style:cover
代碼中的體現↓
| 封面 | 友鏈頭像 | 頭像 |
|---|---|---|
 |
 |
 |
oml2d模型資源優化
博客左下角的看板娘加載優化。
解決：9
① 資源全部放在自己的 OSS 通過CDN加載（有gzip壓縮，更快的訪問速度）
② 將模型用到的PNG圖片壓縮
使用之前做的圖片在線壓縮工具
壓縮後減少了 88% 的體積，視覺上看不出變化。
網絡優化
解決：7，9
① 第三方資源使用 OSS存儲 + CDN加載
② 訪問使用 HTTP3/HTTP2
新的協議加載資源，用上多路複用的特性。
啓用前提資源支持 HTTPS 訪問（配置SSL證書），才能啓用 HTTP2/3。
配置 HTTPS 時使用最新的 TLS1.3 版本，更快的加解密速度。
下面是在各平臺開啓相關配置示意。
| 七牛雲 | 又拍雲 | 繽紛雲 |
|---|---|---|
 |
 |
 |
優化前後對比
| 優化前 | 優化後 |
|---|---|
 |
 |
佈局優化
解決：3，6
目標：減少觸發 “頁面迴流重繪” 的範圍和次數。
① 針對圖片，限定具體渲染的寬高，避免圖片加載後佈局發生變化
② 針對後渲染區域，限定其容器的寬度，避免渲染後影響佈局
減少無用代碼
解決：5
① 移除無用的 js 腳本或者 CSS 資源
大概看了一下，項目裏額外依賴的 element-plus 樣式文件佔大頭。
將全量引入，手動調整爲按需引入。
最終效果
| 性能面板 | lighthouse |
|---|---|
 |
|
優化後的性能指標
- FCP（First Contentful Paint）：496ms
- DOMContentLoaded：507ms
- LCP（Largest Contentful Paint）：496ms
訪問 https://sugarat.top 可以看到效果還是很明顯的。
總結
- 圖片：壓縮，加載合適尺寸，優先使用 WebP 格式
- 網絡：HTTPS + HTTP2/3，OSS + CDN
- 佈局：減少迴流重繪範圍與次數
- 資源：移除無用代碼，無用的第三方資源加載