Due to the poor performance of the blog, I spent two days optimizing it. Below are the results of my optimization.
Benchmark#
Removing Dependencies#
❌ Remove fancybox
❌ Remove SmoothScroll
❌ Remove jQuery
❌ Remove Pjax
It is already 2020, and I don't think jQuery is necessary.
Edge's official release comes with a smooth scrolling effect, and using SmoothScroll on MacOS can cause lag, so it is removed.
Fancybox is removed because I rarely use it, and it is more comfortable to open the original image directly with the right mouse button.
Lazyload Optimization#
Before this, there was always a problem with image loading jitter on my blog's homepage, so I directly calculate the placeholder size of each image by inputting the length and height of the image in the article to prevent jitter.
However, it is indeed a bit troublesome.
Previous Front-matter:
---
title: What did I optimize on my blog?
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
---
Current Front-matter:
---
title: What did I optimize on my blog?
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
coverWidth: 1920
coverHeight: 1206
---
And I added a non-linear animation to Lazyload to give a happier feeling.
Resource Concatenation#
This operation is very convenient because jsdelivr has a built-in merge function, which can freely merge multiple libraries.
For example, 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
So I merged all the css and js files of the blog into one, reducing the number of browser requests and improving the speed.
Image Compression#
The images on my homepage are just for visual enjoyment, why use the original image without loss?
So I uniformly compressed all the images to a width of 920px, greatly reducing the size of the images. The speed has increased dramatically.
Simplification of Dependencies#
Since the theme relies on mdui, and mdui will load fonts, I localized it and deleted color classes, utility classes, and font classes.
The speed has also improved slightly.
Rewriting Some JS with Node.js#
Previously, I used js to enable lazyload and some functions, so they needed to be re-rendered during webpage rendering, which consumed some performance.
So I rewrote some of them using Node.js. Hexo will complete the work during compilation, so there is no need to render it when accessing it in the browser.