Due to the poor performance of the blog, I spent two days optimizing it. Below are the results of my optimization.
Benchmark#
Removing Dependencies#
❌ Removed fancybox
❌ Removed SmoothScroll
❌ Removed jQuery
❌ Removed 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 was removed.
Fancybox was removed because I rarely use it, and it's 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 calculated the placeholder size of each image based on the image's width and height to prevent jitter.
However, it was 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
---
I also 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 that allows multiple libraries to be merged freely.
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 speed.
Image Compression#
The images on my homepage are just for visual pleasure, why use the original image without loss?
So I unified all the images to a width of 920px, greatly reducing the size of the images. Speed skyrocketed.
Simplification of Dependencies#
Since the theme relies on mdui, and mdui loads fonts, I localized it and deleted color classes, utility classes, and font classes.
Speed 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.