Nuxt.js で​ Markdown ベースの​ブログを​構築する​（サイトパフォーマンス編）

この記事は「Nuxt.js で Markdown ベースのブログを構築する」シリーズの一部です。

今回はサイトのパフォーマンスをあげるためにやったことをまとめる。

サイト構築初期の状態

サイトを構築したばかりの頃の Lighthouse のスコアは次のような感じだった。

サイト構築初期のLighthouseのスコア
サイト構築初期の Lighthouse のスコア

「Progressive Web App」のスコアが低いのは、Service Worker を使っていなかったのが要因で、「Accessibility」と「SEO」のスコアが低いのは、単に自分が書いたマークアップの品質が低かったため。

注目すべきは「Performance」と「Best Practices」の 2 つだ。特別なことはそれほどしていないにも関わらず、はじめから非常に高いスコアが出ていた。Nuxt.js と Netlify を使ったおかげと言える。

Nuxt.js の恩恵

Nuxt.js は、特に設定しなくても、

  • コード分割（Code splitting）
  • CSS の HTML へのインライン展開
  • Resource Hints によるリソースの事前取得の設定

といった、Web フロントエンドの最新のベストプラクティスを自動でやってくれる。この点は、Web フロントエンド界隈から生まれたフレームワークの強みで、以前からある Jekyll や Hugo といった静的サイトジェネレーターとの決定的な差だと思う。

Netlify の恩恵

Netlify は、

  • HTTP2
  • SSL

といった、サイトパフォーマンスには欠かせない機能を無料で提供してくれるのがありがたい。しかも設定がとても簡単で、SSL なんかはボタンを 1 クリックするだけで作業が完了して感動した。

追加でやったこと

というわけで、あとは細かい点をチューニングするだけだった。主にやったことはこんな感じ。

バンドルファイルの最適化

  • nuxt build --analyze（または build プロパティの analyze オプション）を使って、バンドルファイルの中身を分析
    • Qiita API のレスポンスをまるごと含まれた巨大な JSON ファイルがバンドルされていたのを発見。最小限のフィールドのみを保存するようにした。

PWA 化（Service Worker の導入）

アクセシビリティ対応

  • SVG のアクセシビリティ対応
  • テキスト色のコントラストを調整した。
  • アクセシビリティについては、まだまだ勉強不足。。。

HTTP/2 Server Push

結果

ほぼ 100 点になった 🎉 （Performance は計測するごとに多少のばらつきがあるが 90 点以上は出てる。）

チューニング後のLighthouseのスコア
チューニング後の Lighthouse のスコア

まとめ

シンプルなサイトだということもあるが、Nuxt.js と Netlify のおかげで、わりと簡単にパフォーマンスの高いサイトを構築することができた。とはいえ、時間の経過とともに、問題も出てくるだろうから、定期的にチェックしていきたい。

ちなみに、サイトパフォーマンスの改善方法については、超速! Web ページ速度改善ガイドがとても参考になる。基本的な知識から最新の Web 技術まで体系的に学べる良書でおすすめです。