部落格效能最佳化筆記 | 99分

粥里有勺糖發表於2024-05-04

閒著沒事,拿 lighthouse 測了一下部落格網站的效能評測,發現診斷出的問題還挺多,就順手最佳化了一下。

這篇文章將記錄這個最佳化的過程。

最佳化前後對比

lighthouse 檢測結果

最佳化前 最佳化後

效能皮膚檢測結果

FCP DOMContentLoaded LCP
最佳化前 764ms 1798ms 1864ms
最佳化後 496ms 507ms 496ms
  • FCP(First Contentful Paint)
  • LCP(Largest Contentful Paint)

檢測工具

使用 Chrome 自帶的 lighthouse 和 效能皮膚進行測試。

效能皮膚 lighthouse

發現問題

效能皮膚 | Performance

透過截圖可以觀察到每個時間的頁面變化

發現的問題:

  1. 文章列表渲染後,文章封面圖載入緩慢
  2. 圖片完成載入時間過長(封面,頭像圖片)
  3. 佈局渲染期間發生明顯變化
  • 友鏈列表載入完成後
  • 左上頭像載入完成

lighthouse

測試後會給到最佳化建議。

這裡挑一些後面用到的

  1. 使用新的圖片格式(WebP and AVIF)
  2. 減少沒用到的CSS檔案大小
  3. img 沒有明確的寬高屬性
  4. 資源傳輸壓縮(gzip, brotli 等)
  5. 載入適當大小的圖片(避免超過要展示的大小)
  6. 避免超大的資源載入阻塞網路(主要是一些超大的圖片和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 可以看到效果還是很明顯的。

總結

  1. 圖片:壓縮,載入合適尺寸,優先使用 WebP 格式
  2. 網路:HTTPS + HTTP2/3,OSS + CDN
  3. 佈局:減少迴流重繪範圍與次數
  4. 資源:移除無用程式碼,無用的第三方資源載入

相關文章