サイトの読み込み速度を高速化する。

はじめに

サイトを運営することによって気にすることは何が。
一つにページそのものの”重さ”がある。
転送量が増えると外部回線で見ているものはより料金がかかるしストレスを生む。
そうしないためにいくらか圧縮をかけてあげる必要がある。

• 1.サイトの読み込み時間を確認する。
• 2.hexo-all-minifier を導入する。
• 3.反映しどれくらいよくなったか確かめる。
• 4.画像を遅延読み込みにする。

1.サイトの読み込み時間を確認する。

Google が読み込み速度を確認するサイトを用意してくれているのでそこで確認する →Google PageSpeed Insights

pc はそこそこではあるが、

スマホはまぁまぁ重い

そのため、hexo-all-minifierというプラグインを導入する。

2.hexo-all-minifier を導入する。

ターミナル上でnpm install hexo-all-minifier --saveと打つ。
そしたら_config.ymlにall_minifier: trueと追加する。

3.反映しどれくらいよくなったか確かめる。

deploy し、どれくらい早くなったかを確かめる。
build に 170 秒もかかっている。Github pages では使えないな。
vercel だからできたこと。
では PageSpeed Insights にかけてみる。

…
そんな変わっていない。
多分そういうことを見ているのではないのだろうな・・・
もうちょいましにならないか調べてみる。

4.画像を遅延読み込みにする。

調べていたところ、このようなものを発見。
Hexo で画像に loading=”lazy”を自動で追加して画像を遅延読み込みする
themes/icarus/scripts/にlazyload.jsというファイルを作成し、
中身をこのようにする

themes/icarus/scripts/lazyload.js

hexo.extend.filter.register('after_post_render', function(data){
data.content = data.content.replace(/<img src=/g, '<img loading="lazy" src=');
return data;
});

これでどうだろうか

ぐぬぬ・・・もう少し調べる必要がある。