Nexmoe

Nexmoe

一个开发者。关于勇敢与热爱,互联网/创造/赛博朋克
twitter
github

Blog, what did I optimize?

Due to the poor performance of the blog, I spent two days optimizing it. Below are the results of my optimization.

Benchmark#

af94d4afe7524d6522600fae70430e67.png
f5c19b5607a3f5de94a15b007628e72f.png
4be54fe2007099d4c791c8a13489af77.png

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.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.