閒著沒事，拿 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
- 佈局：減少迴流重繪範圍與次數
- 資源：移除無用程式碼，無用的第三方資源載入