スクリーンショット_2019-04-18_15

Nuxt.jsでnoteの記事ページを置き換えました

noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。

noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました(特に古いスマホで顕著)。問題を根本解決するためにNuxt.jsへの移行を進めていました(詳しい経緯は以下の記事をごらんください)。

今年から、おすすめページマガジンページコンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。

運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ(このページがまさにそうですね)のNuxt.js版リリースを行いました。記事ページがいわば本丸だったわけです。

↑リリースボタンを押す直前(早朝)の図

で、どうなったのか

記事読み込みのサイクルが全体的に高速化され体験が良くなりました!

バンドルサイズ: ロードされるjsとcssの容量が減りました。Angular.js1系では合計1080KBでしたが、Nuxtでは659KBまでダウンサイズできました(この記事で検証)。その上細かくchunkに分かれて遅延ロードされるようになったため初期読み込みが減り、キャッシュがよく効くようになりました。

Lazy Load: 画像の遅延読み込みが効くようになりました。初期ロード時のネットワーク帯域が節約されたため他の必要なアセットのダウンロードが早くなり高速化されました。

SSR: Angular.js1系ではブラウザのCPUリソースをフルに使って画面描画をしていましたが、Nuxtではサーバーサイドで初期画面が描画される(SSR)ため表示が高速化されました。CPUが貧弱なモバイル環境で特に効果が顕著です。

Lighthouse(Nexus 5X / Slow 4G Network)の結果を前後比較するとこうなりました。

Before(Angular.js1系)がひどすぎるだろ!という意見もありつつも、こうみるとまだまだ高速化の余地はありそうです。しかし、Beforeにくらべるとかなりカイゼンされたのが分かると思います。

インフラ構成

Nuxt.js用のnodeサーバーを新規に用意し、Railsの前段に置きます。

当初、AWS Lambdaに担当させることを想定していました。しかし、ライブラリに問題が発生したためElastic Beanstalkで環境を構築し直しました。運用も構築もラクですが、柔軟な設定が出来ないトレードオフが顕在化しており、今後はコンテナ化を視野に刷新を検討することになりそうです。

noteは今年1月に1000万UUを超え伸び続けていますが、だいたい6台〜14台くらいのNuxtサーバー(c5.large Auto Scaling込)で負荷を捌けています。規模や実装次第なのであくまで参考値ですが、これからNuxt化を試みるプロダクトの目安にして頂ければと思います。

記事ページリリースを終えての所感

実装難易度という面では、ド新規より既存サービスのリプレイスの方が困難です。特にnoteはカイゼンが高速で進むのでその取り込み作業が発生する上に、利用者数が急激に伸びてリリース時のリスクがどんどん増していきました。なかなかに痺れるリリースでした。アクロバティックな進行をこなしたNuxt移行チームはマジですごいと思います...。

リリースをページごとに切り分けたのはうまくいきました。今回はCloudFrontを前段に置いてURLごとに既存サーバー(Rails)とNuxt.jsのサーバーに振り分けました。実は何度が失敗して切り戻したのですが、CloudFrontの設定を変えるだけですぐに切り戻せたので安心感がありました。

トラフィックの半分以上が今回のリリースでNuxt配信になりました。残りも粛々とやっていきます!

これからの予定

記事ページのリリースで大きくNuxt.js化は進捗しました。今年の前半までに以下のページをNuxt.js化を計画しています。これらのページは描画のパフォーマンスがかなり良くない(すいません....)ので、Nuxt化で一気にUXをあげていきたいと考えています。

・クリエイタートップ
・マガジントップ
・各種タイムライン

反面、フロントエンドの細かい速度チューニングまで手がまわっていない現状があります。Lighthouseの点数にまだ上昇余地があるように、深掘りしていきたいと考えています。というわけで.....

Nuxtでnoteをカイゼンする仲間を募集中!

大事なご連絡です。Nuxt.js化を一緒にすすめてくれる仲間を募集しています!国内でも有数の規模、トラフィックのあるサービスで、高速化やフロントエンドのUXがモロにサービスの成長に寄与してくるサービスです。クリエイターのための街を一緒につくりましょう!


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

こんぴゅです! 外苑前から皆様に役立つテックな話題をお届けしております。もし100円でもサポいただければ励みになります。記事もグレードアップします。何卒よろしくお願いいたします。

ラブタンバリンズ!
178

こんぴゅ

web技術全般が専門のエンジニアです。ストレスなく理解できる技術記事を書いていきます

#エンジニア 系記事まとめ

noteに投稿されたエンジニア系の記事のまとめ。コーディングTIPSよりは、考察や意見などを中心に。
4つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。