【Hexo】Icarusのページ読み込みスピードを改善させてみた

当ページのリンクには広告が含まれています。

このブログの読み込みスピードを上げるために試したことをまとめます。

✓目次

• 設定前の読み込みスピード
• レンダリングブロッキングCSS
• hexo-img-optimizationの適用
  • まとめ

参考にした記事

Speeding hexo (or any page) for PageSpeed insights · dizzy.zone

設定前の読み込みスピード

• GoogleのPageSpeed Insightsで読み込みスピードを計測したところ、以下のような結果でした。

以降の修正を加えてどの程度改善するのか見ていくよ！

レンダリングブロッキングCSS

• CSSが非同期に読み込まれるようにします。参考記事と同様にheadタグで外部CSSを読み込んでいる部分に適用してみました。※これで良いのかよくわかりませんが。。。

1
2
3

{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} as="style" onload="this.onload=null,this.rel="stylesheet""/> : null}
<link rel="stylesheet" href={url_for('/css/' + variant + '.css')} as="style" onload="this.onload=null,this.rel="stylesheet""/>

• この状態で測定してみたところ下記のとおりでした。

ちょっと良くなったのかな？という感じです。。。

hexo-img-optimizationの適用

hexoのシンプルな画像最適化ライブラリを適用します。

hexoブログフォルダで、以下のコマンドを実行します。

1

npm i --save hexo-img-optimization

インストールが完了したら、以下のコマンドを実行します。

1

hexo generate && hexo img

すると、imagesフォルダに配置している画像ファイルに対して、最適化処理が走ります。

実行後、再度計測すると以下の通りでした。

うーん。。。大きな改善とまでは言えませんが多少はましになったでしょうか。

まとめ

HexoのIcarusテーマにおけるページ読み込みの改善についてまとめてみました。

とはいっても、まだまだ読み込みが遅いので、改めて改善柵を検討してみたいと思います。

この記事が役に立った、という方はTwitterのフォローよろしくおねがいします。

その他、Icarusのデザイン変更に関する記事