hello people

Posted

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

あけましておめでとうございます。年末年始の空いた時間で技術検証のついでにブログを再構築しました。機能的には色々不足はありますが、パフォーマンスが大きく改善されました。

せっかくなので、記事も書いてみたいと思います。

きっかけ

元々のデザインはWordpressのオリジナルテーマをPHPで作っていたのですが、自分でも信じられないくらいにパフォーマンスが悪く、初期表示時には15~20秒程度かかるようなサイトでした…。原因は日本語Webフォントを使っていたり、クライアントサイドでのJavaScriptに時間がかかっていたためです。

また、技術的にも大分古くなってしまったため、メンテをする気持ちも湧かず、放置状態となっていました。
オリジナルテーマを作るのに元々使っていた技術はざっくり以下のような感じです。

  • PHP
  • JavaScript (ES5)
  • Sass
  • Gulp

ブログを書くだけなら、はてなブログやNote、Mediumなどを使ってもいいかなーと考えたのですが、個人的にそこまでブログを書かないのと、このブログは技術のお試し環境としても使っていたりするので、あえてリニューアルする事にしました。リニューアルにあたって、以下の技術を使う事にしました。

  • WP REST API
  • Nuxt.js (Vue.js, Webpack, Babel)

WP REST API

WordPress環境にWP REST APIを導入して、API化しました。基本的にはプラグインをインストールするなので、かなり簡単に導入する事ができました。ただ、記事の投稿日時がISO8601形式であるものの、タイムゾーン指定子”+09:00″がついていないなど微妙に使いづらいところはありました。
WordpressをAPI化する事によって、Wordpressの管理機能を利用しつつ、フロント側は馴染みのある技術スタックで構築できるようになりました。

Nuxt.js

Nuxt.jsはVue.jsでサーバーサイドレンダリングを実装するためのフレームワークですが、SSRの検証も兼ねて使ってみる事にしました。Nuxt.jsを使ってみての所感をざっくり載せときます。

  •  nuxt-community/starter-templateを使用すればさくっと環境構築出来て良い
  • Vue.jsの単一コンポーネントシステムを利用する事で、メンテナブルなサイトを構築できるのが良い
  • nuxt generateを利用して静的ページを生成する事で、Node.jsサーバーを用意しなくてもホスティングできるのが超良い
  • 基本的にはVue.js向けのプラグインが使えるので困らない。がっつりフレームワークにロックインされるけど…
  • Vue.jsを知っていれば馴染みやすいが、知らない場合は学習コスト高め。簡易的なWebページやJavaScriptに強くないエンジニアが保守する場合は過多になりそう

デザイン

シンプルで読みやすく

記事は文字が主役なので、記事以外の要素が目立たないように要素を削ぎ落としました。

また、１行あたりの文字数も読みやすさを考慮して３５文字前後となるように調整しています。

手軽に書けること

記事を書くとき、アイキャッチ画像を用意するのが面倒で心理的に負荷になっていました。通常のメディアであれば、記事に惹きを持たせるためにアイキャッチ画像を用意する事が多いと思いますが、アイキャッチ画像が無くても記事が投稿できる方が重要でした。
そのため、OGPなどで表示する画像はアイキャッチ画像を使用せず、ロゴ画像を表示するように変更しました。

ローカルフォントを使う

元々のデザインには余計な要素がたくさん入っていたせいで表示速度は遅くなり、アクセスしづらいものになっていました。特にWebフォントは興味で入れてみたものの、日本語フォントは特にデータサイズが大きかったり、読み込み中にフォントのデザインが切り替わったりして、負の側面の方が大きかったように感じます。最近だとWebフォントの表示を切り替えるための、font-displayプロパティなどもありますが、現状のデザインだと利用する目的は無いのでローカルフォントで十分でした。

改善結果

WebPagetestでパフォーマンスを計測すると、あくまで特定環境での結果になりますが、表示速度がもともと15~20秒だったのが、1~2秒に短縮されました。（わーい）

Before – PC

Before – SP

After – PC

After – SP

無駄を省いて、劇的なダイエットに成功しました！
しかし、Wordpressからフロントエンドを切り離した事によって、メンテしやすくなった一方で考慮漏れもありました。たとえば、Wordpressの投稿画面でプレビューしても期待通りにプレビュー出来なかったりします。実際の業務などでは、この辺も踏まえて技術選定をした方が良さそうです。

ちなみにdev.toの高速化の記事を参考にすると、ファーストビューのレンダリング最適化やServiceWorkerによるキャッシュ機構の実装はまだまだ出来そうだけど、CDNやHTTP2はお金がかかるので厳しそうでした…。 2018/7にFirebaseに移行したことで、HTTP/2に対応しました！

終わりに

今年もこのブログをどれだけ更新できるか分かりませんが、せっかく改善したので、今年はちょこちょこ更新していきたいと思います。

という事で、今年も何卒よろしくお願いします！