由於博客性能一直很弱雞,所以花了兩天時間優化了一下,以下,是我的優化成果。
先上跑分#
去掉一些依賴#
❌ 移除 fancybox
❌ 移除 SmoothScroll
❌ 移除 jQuery
❌ 移除 Pjax
已經 2020 年,我覺得 jQuery 是不需要的。
Edge 的正式發布自帶良好的平滑滾動效果,加上 SmoothScroll 在 MacOS 上會有卡頓感,所以移除。
移除 fancybox 是因為平常真的不怎麼用,還是直接鼠標右鍵打開原圖看舒服。
Lazyload 優化#
在此之前,我的博客首頁一直有一個問題,圖片加載抖動,所以我直接讓文章每一個圖片輸入圖片的長度和高度來計算圖片佔位大小來防止抖動。
不過確實麻煩了點。
此前的 Front-matter
---
title: 博客,我優化了什麼?
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
---
現在的 Front-matter
---
title: 博客,我優化了什麼?
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
coverWidth: 1920
coverHeight: 1206
---
並且對 Lazyload 加了一個非線性動畫,給人一種更快樂的感覺。
資源合併#
這個操作就很方便了,因為 jsdelivr 自帶了合併功能,可以自由的合併多個庫
比如 https://cdn.jsdelivr.net/combine/npm/[email protected]/styles/atom-one-dark.css,gh/nexmoe/nexmoe.github.io@latest/css/style.css,gh/nexmoe/nexmoe.github.io@latest/lib/mdui_043tiny/css/mdui.css,gh/nexmoe/nexmoe.github.io@latest/lib/iconfont/iconfont.css
所以我把博客所有的 css 和 js 文件分別合併成了一個,因此瀏覽器請求量減小,所以速度也有些許提升。
圖片壓縮#
我的首頁圖就是看個爽,為什麼要原圖且無損?
所以我統一將圖片全部壓成 920px 的寬度了,大量減小圖片大小。速度暴漲。
依賴庫簡化#
由於主題依賴了 mdui,而 mdui 會加載字體,所以我把它本地化,然後刪掉了顏色類,輔助類,以及字體類。
速度也有些許提升。
部分 js 用 nodejs 重寫#
以前啟用 lazyload 和一些功能,我是用 js 寫的,所以在網頁渲染的時候需要重新渲染,所以需要佔用一定的性能。
所以我就將一部分使用 nodejs 重寫,Hexo 會在編譯的時候完成工作,因此在瀏覽器訪問時就不需要渲染了。