你是來找茬的吧？對自己的博客進行調優

“作為博客園的使用者而不是開發者，就不能對博客進行調優了？看好了，我只示范一次，” —— 我說的

0x00 大綱

• 0x00 大綱
• 0x01 前言
• 0x02 性能調優
  • 減少加載項
  • 減少網路傳輸量
  • 降低渲染復雜度
  • 壓縮資源檔案
  • 減少字體參考
  • 改善 CLS 布局偏移
  • 改善 FCP 首次內容繪制
• 0x03 無障礙閱讀改造
  • 媒體查詢
  • 色彩分離度
  • 正確使用滑鼠手勢
• 0x04 小結

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 >HELLO WORLD</div>

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

<div >
    <div >
        <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  height="230px" alt="avatar"  src="https://img.uj5u.com/2022/12/28/334538280726023.png">
  
  <!-- 名片 -->
  <img  height="230px"  title="商務合作請添加微信" alt="商務合作請添加微信" src="https://img.uj5u.com/2022/12/28/334538280726024.png">
  

• 在博客園后臺-設定頁面中“頁腳 HTML 代碼”處引入自定義 JS，而不是公告欄或者頁首，這也是官方推薦做法，

• （降低 CLS 分數 0.006）通過 CSS 而不是 JS 控制側邊欄的顯示/隱藏：

  為了獲得更好的閱讀效果和較大的閱讀版式，原先通過自定義 JS 動態隱藏了文章詳情頁的側邊欄，大概是這樣的代碼：

  if($("#post_detail").length > 0) {
      $("#sideBar").hide();
      $(".forFlow").css({"margin-left: 0 !important"});
  } else {
      $("#sideBar").show();
      $(".forFlow").css({"margin-left: 260px"});
  }
  

  由于自定義 JS 的加載時機較晚，所以頁面難免出現大幅的偏移調整，導致 CSL 分數暴漲，這樣子做是有歷史原因的，因為最開始 CSS 還沒有父選擇器，不能通過子元素型別來選擇父元素，在博客這里也就不能通過div.forFlow容器中的子元素內容來控制div.forFlow的偏移和mainContent的兄弟元素側邊欄sideBar，好在后來:has()偽類選擇器橫空出世，我可以這樣子通過 CSS 來直接控制了：

  #mainContent .forFlow {
      margin-left: 260px;
      max-width: 960px;
  }
  
  .forFlow:has(#post_detail) {
      margin-left: 0 !important;
  }
  
  #mainContent:has(#post_detail)+#sideBar {
      display: none !important;
  }
  

  當作為博客主頁顯示時，由于#post_detail元素不存在，因此，div.forFlow容器會向左偏移260像素，為側邊欄留出顯示空間；當用戶點擊文章進行閱讀時，#post_detail元素將被加載，兩個has()偽類選擇器生效，達到取消偏移量和隱藏側邊欄的效果，缺點就是到目前為止，不是所有瀏覽器都支持，比如火狐就不支持……在不支持的瀏覽器上，它是可容錯的，相當于這兩個樣式不存在，不會影響頁面的可訪問性，

  

  以我自己的博客為例，可以看到在 Edge 和 Chrome 瀏覽器上，文章詳情頁中側邊欄是隱藏的，而在火狐瀏覽器上，側邊欄依然存在，

改善 FCP 首次內容繪制

FCP（First Contentful Paint），首次內容繪制，該指標測量頁面從開始加載到頁面內容的任何部分在螢屏上完成渲染的時間，對于該指標，“內容”指的是文本、影像（包括背景影像）、元素或非白色的元素，所謂改善 FCP 就是要讓瀏覽頁面的用戶盡快地看到頁面內容，即使此時頁面還未完全渲染完成——以此優化用戶體驗，

能做的也不多，暫時發現比較有優化價值的是 Web 字體，可以利用 font-display 這項 CSS 特性，確保文本在網頁字體加載期間始終對用戶可見，比如在用到了自定義 Web Font 的地方，加上font-display: swap;，注意要在@font-face定義里面宣告，否則無效，像這樣：

@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");}

直接減少 FCP 時間約60ms！但這還不是極限，大部分小伙伴引入的自定義字體多是 IconFont 之類的圖示字體，但是一個圖示字體里面可能有上百個冗余圖示，我們往往只使用了其中的某幾個，利用神器icomoon，我們可以只將自己用到的圖示封裝成自定義的字體，甚至可以將其以 base64 編碼的形式，內嵌到自定義樣式中，這可以帶來數量級的加載時間提升（取決于原字體的大小），以我自己的博客為例，將僅用到的12個圖示轉換成自定義字體后，首頁的 FCP 時間減少了將近200ms：

@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;}

0x03 無障礙閱讀改造

此部分主要參照標準為 WCAG 2.1 (AA), WCAG 2.0 (AA)

媒體查詢

通過@media媒體查詢適配不同解析度的終端設備，以保證用戶在不同的設備上，都能獲得較佳的瀏覽體驗，

色彩分離度

原主題在白天和黑夜模式共用一個主題顏色#2d8cf0，色彩分離度不是很好，尤其是小字體的時候，很容易導致閱讀困難，遂將原主題白天模式前景色調整為#0f73e1，使其與背景色有更強的區分度，夜間模式時保持原來的顏色不變，關于采用何種前景色和后景色才具有良好分離度，可以使用這個鏈接里面的工具，提供動態參照對比，

正確使用滑鼠手勢

在自定義 HTML 和樣式時，注意正確使用滑鼠手勢，比如在超鏈接和按鈕上使用手形游標，在可選文本上使用文本游標，在非互動元素上使用默認游標等等，

0x04 小結

在經過一系列的努力后，我完成了幾乎所有能做的改造，這是最終首頁的燈塔評分：

達到這個分數并不容易，尤其是在引入了一系列自定義的東西之后，報告中會告訴你還有哪些地方可以優化，遺憾的是，作為一個使用者，只能止步于此了，即使在博客園后臺-設定頁面中“頁面定制 CSS 代碼”部分勾選了“禁用模板默認 CSS”，還是會有一部分資源被強制加載：

這些部分看起來很有搞頭，可惜暫時沒有找到合適的方法，如果有機會再嘗試沖擊百分吧，

標籤：Html/Css

上一篇：elementui|dropdown|下拉選單作為模態框使用

下一篇：你是來找茬的吧？對自己的博客進行調優