hello people

Posted

ブログのWebパフォーマンス改善（PRPL）

前回の記事でPHPベースからREST API + Nuxt.jsのアーキテクチャに変更したことでブログのパフォーマンスを改善したことを書きました。

今回、HTTP/2やServiceWorkerなどの技術を取り入れることで、さらにWebパフォーマンスを改善することができました。これは完全に適用できている訳ではありませんが、PRPLパターンを参考にしています。

▼改善後にLighthouseで検証した結果

Webパフォーマンスの改善にあたって、取り組んだことは以下です。

  • Firebaseへ移行してHTTP/2を利用
  • @nuxtjs/pwaを使ってPWA化
  • ServiceWorkerを使ったリソースのキャッシュ
  • ResourceHintsを使ったリソースの先読み

Firebaseへ移行してHTTP/2を利用

これまでレンタルサーバーを使っていたので、残念なことにHTTP/2を利用することが出来ていませんでした。今回、APIサーバーは面倒だったのでそのままですが、フロント部分だけFirebase Hostingに移行しました。

HTTP/2を利用することで以下のメリットが得られます。

  • 1 回の接続で複数のリクエストを送信できます。HTTP/2 では、リソースを集約する必要性が少なくなります。
  • バイナリ プロトコルであるため、ヘッダーを圧縮してデータを効率的に送信することができます。
  • サーバーからクライアントに事前にコンテンツを「プッシュ」することができます。

引用元：Firebase Hosting が HTTP/2 に対応

@nuxtjs/pwaを使ってPWA化

Nuxt.jsを使っている場合、@nuxtjs/pwaモジュールを利用することで手軽にPWA化することができます。@nuxtjs/pwaを利用すると、たとえば以下の設定が行えるようになります。

  • キャッシュによりオフラインでも表示可能になる
  • ホーム画面に追加＆全画面表示できるようになる
  • Webプッシュ通知ができる

ServiceWorkerを使ったリソースのキャッシュ

@nuxtjs/pwaを利用するとServiceWorkerが使えるようになり、デフォルトでJavaScriptファイルとCSSファイルのキャッシングが行われるようになります。

ただ、このブログではWP REST APIを利用していて、ページ遷移時にAPIにリクエストを送ってJSONを取得する部分はキャッシュできず、記事一覧から記事詳細に飛ぶ際に待ち時間が発生していました。

この部分でキャッシュを有効にするためにSPAのバーチャルレンダリング（<nuxt-router>を使ったページ遷移）をやめて、<a>を使ったHTMLファイルの取得・表示を行うように変更しました。

これにより、記事詳細にアクセスする際に初回はAPIに問い合わせてキャッシュし、２回目以降はServiceWorkerから取得するようになりました。

▼記事詳細ページをServiceWorkerから取得

Resource Hintsを使ったリソースの先読み

Resource Hintsは現在ドラフトとなっているリソースを先読みするためのAPI群です。

前述のServiceWorkerによって、２回目以降のリクエストは高速になりましたが、初回アクセスは遅いままでした。そのため、初回でも高速に表示できるように記事一覧で記事タイトルが画面上に表示されたタイミングをトリガーに prefetchを使用して先読みしています。

▼記事一覧にアクセスした際に記事詳細を先読み＆キャッシュする

 

ただ、本来的には記事リンクのマウスホバーをトリガーにした方が必要以上にリソースの先読みを避けるためには良いかもしれません。

終わりに

少し前に、dev.toの表示が速すぎることで話題になりましたが、前述の技術を利用することでそれに近い速度が出せることが分かりました。

ただ、このブログは個人で運営していて制約が少ないので高速化しやすかったですが、エンタープライズ向けのWebアプリケーションなどでは難しい部分もありそうだなーと思いました。