你是來找茬的吧？對自己的部落格進行調優

「作為部落格園的使用者而不是開發者，就不能對部落格進行調優了？看好了，我只示範一次。」 —— 我說的

0x00 大綱

0x01 前言

用過很多部落格和寫作平臺，但是最終還是選擇了部落格園，畢竟，自定義 CSS 和自定義 JS 是真的香！某天突發奇想，決定對自己的部落格進行下優化，現將其中的一些心得與大家分享。裡面的一些方式方法可能不通用，但是思路可能會對各位有所啟發。說實話，自己的本職工作並不是前端，不想搞那麼複雜，就用 Edge 瀏覽器的開發者工具裡的 lighthouse 評分和載入時間作為優化基準。

以部落格的使用者而不是開發者身份去進行優化，究竟能做到何種程度，讓我們拭目以待。

0x02 效能調優

減少載入項

• （減少載入時間約40ms）在部落格園後臺-選項頁面中取消勾選「啟用數學公式支援」，點選「儲存」按鈕，重新整理頁面後至少可以減少以下幾個載入項，節省頁面載入時間約40ms：
  • MathJax.js
  • TeX-AMS-MML_HTMLorMML.js
  • extpfeil.js
  • mediawiki-texvc.js
• （減少載入時間約50ms）在部落格園後臺-設定頁面中「程式碼高亮」部分取消勾選「顯示行號」，如果你用的是 prism 引擎，可以減少兩個載入項：
  • prism-line-numbers.css
  • prism-line-numbers.js

減少網路傳輸量

• 博文圖片儘量採用 PNG 格式，內容色彩較少時可以使用索引顏色壓縮。舉個栗子，這是兩張內容和解析度一樣，格式不同的兩張二維條碼圖片，可以看到 PNG 格式比 JPG 格式檔案大小相差一個數量級：

  

  

降低渲染複雜度

博文和自定義 HTML 部分儘量減少 DOM 數量和巢狀。比如：

<div class="hint">HELLO WORLD</div>

如果能滿足效果，就不要寫成：

<div class="container">
    <div class="text">
        <span>HELLO WORLD</span>
    </div>
</div>

壓縮資原始檔

對於自定義的 CSS 或 JS 檔案進行壓縮，如果參照外部的 CSS 或 JS ，儘量使用其 min 版本。能省一個位元組是一個位元組。

減少字型參照

對於自定義的 CSS，儘量使用統一的字型定義，避免引入大量不同的字型。

body {font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;font-size: 14px;font-weight: 300;}

對於部落格園中一些帶了字型定義樣式的部分，可以予以覆蓋，比如文章支援數和反對數裡面引入了 Verdara 字型，可以通過繼承body中定義的font-family進行覆寫：

.burynum,.diggnum{font-family:inherit;}

改善 CLS 佈局偏移

CLS（Cumulative Layout Shift），累積佈局偏移，是頁面在整個生命週期中發生的每個元素佈局變化的分數總和（分數越低越好）。這些變化會影響使用者正確閱讀內容和與頁面互動的能力。所謂改善 CLS 就是要儘量保持頁面上元素位置的穩定，避免頁面元素在渲染過程中大幅度偏移初始位置。

常見的影響 CLS 的因素有：

• 未指定寬高的圖片。
• 動態插入的內容（廣告、iframe等嵌入元素）。
• Web 字型的載入。
• 阻塞 DOM 更新的操作（通常是關鍵樣式或關鍵指令碼載入等待網路響應）。

CLS 對效能總分的影響很大，由於每個人的自定義樣式不盡相同，所以這一塊只能根據個人情況對症下藥了：

• （降低 CLS 分數 0.002）儘可能地為圖片元素設定明確的寬度值和高度值，以減少佈局偏移並改善 CLS，比如首頁的頭像和名片：

  <!-- 頭像 -->
  <img width="230px" height="230px">
  
  以我自己的部落格為例，可以看到在 Edge 和 Chrome 瀏覽器上，文章詳情頁中側邊欄是隱藏的，而在火狐瀏覽器上，側邊欄依然存在。
  

@font-face {font-family: Material Symbols Outlined;font-display: swap;font-style: normal;font-weight: 300;src: url(https://cdn.cnblogs.com/iconfonts/iconfont-chnmig.ttf) format("truetype");}

@font-face {font-family: 'iconfont-mylibs';src: url('data:font/woff;charset=utf-8;base64,(限於篇幅，此處省略資料定義)') format('woff');font-weight: 300;font-style: normal;font-display: swap;}