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

はじめに

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

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

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

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

スマホはまぁまぁ重い

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

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

ターミナル上でnpm install hexo-all-minifier --saveと打つ。
そしたら_config.ymlall_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
1
2
3
4
hexo.extend.filter.register('after_post_render', function(data){
data.content = data.content.replace(/<img src=/g, '<img loading="lazy" src=');
return data;
});

これでどうだろうか

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

コメント