ガジェット通信 GetNews

見たことのないものを見に行こう

体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

リニューアルで表示を高速化させた「日経電子版のページ高速化とPWA対応」プロジェクトの舞台裏

リニューアルして表示が速くなったと大きな反響を呼んだ日経電子版

最後に登壇したのは、日本経済新聞社のソフトウェアエンジニアとして「r.nikkei.com」のフロントおよびバックエンドを担当している宍戸俊哉さん。

セッションタイトルは「日経電子版のページ高速化とPWA対応」。

日経電子版とは2010年3月に創刊した、毎日約900本の記事を配信している電子媒体。有料会員54万人以上、無料会員300万人以上、月間3億アクセス以上。紙・電子版の合計では全世界で300万部を発行する世界最大の経済メディアである。

宍戸さんが担当したのは、「Next Nikkei」という日経電子版リニューアルプロジェクト。「r.nikkei.com」からの配信に、11月のリリースではモバイル版と一部PCページを置き換えた。表示速度も向上し、旧モバイル版と比較して約2倍の速度を達成するなど、反響も大きかった。

リニューアルの背景にあったのが、モバイル端末のアクセス増加、PC版とSP版をそれぞれ開発する工数がかかっていたこと。内製化の推進、2015年に買収した英フィナンシャル・タイムズ社からの学びがあったことだ。

旧モバイル版の課題の第一は、Backbone.jsとjQueryをベースに書かれたSPAで、保守性に問題があったこと。

第二に大量のサブリソースの読み込みや肥大化jsファイル、サーバサイドレンダリング(SSR)非対応だったことから、初回表示速度が遅かったこと。第三は古いAPIサーバを利用しており、共通化したいと考えていたことだ。

日経に先行してフィナンシャル・タイムズ社ではWeb版をリニューアルしていた。同社のCIOのケイト氏は、「テストを実行してみて、もしユーザーがページを訪れた時に、ページの表示が1秒でも遅かったらエンゲージメントは5%下がる」と、ページのスピードは非常に大事だと話していた。

FTではあえてページを遅く表示させることで、コンバージョンにどう影響するかテストしたところ、ページを1秒遅くなるたびに、数%ずつコンバージョンは下がることがわかったという。この事例を日経にも応用するということで、Next Nikkeiのプロジェクトが立ち上がった。最重要KPIはスピードである

UI/UXを改善するためにレスポンシブ対応、PWA化に取り組んだ。実際インフラやアーキテクチャも見直し、Fastlyやmicroserviecesアーキテクチャを採用することに。もちろん内製で行った。

r.nikkei.comの内部構成は、Fastly + Elastic Beanstalk + Node.js on the containerによる構成となっており、30以上のサービスで動いている。

ページの高速化のための手法

r.nikkei.comはFastlyで動的なコンテンツもCDN経由で配信。VCLで柔軟にキャッシュを制御し、HTTP/2の利用、サブリソースの圧縮、画像配信を最適化している。これらのページ高速化をどう進めていったのか。

Fastlyのキャッシュ戦略としては、Cache-Control、Surrogate-Controlの設定、認証cookieのdecode、Feature Flagsの正規化(Preflight)など。詳しくは「Microservices on Fastly by Ryo yasuda」を見てほしいが、この結果、キャッシュヒット率は約90%を維持することが可能となった。

HTTP/2に関してもFastlyの機能を利用している。ドメインの同時接続数を気にする必要がなくなることや、バイナリストリームによる高速化といったHTTP/2の恩恵に加え、Server Pushも利用している。Server Pushは、critical pathに適用している。

リソースの圧縮も、圧縮できるものはすべて圧縮している。Fastlyは基本的にVanishに乗っているものしかキャッシュできないが、H2Oを使ってオンザフライ圧縮も可能になっている。Fastlyに圧縮を任せることで、オリジンのCPUリソースを節約できる。

画像配信はSaaSのimgixを利用している。内製で作っていた画像変換サーバから乗り換えた。HTTP APIで顔認識、クロップ、リサイズなどが柔軟にできるほか、キャッシュ制御も行ってくれる。エッジサイドで最適化をした結果、高いキャッシュヒット率、オリジンサーバのリソース削減が実現した。

1 2 3次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

山寺宏一&高木渉で『ポプテピピック』

GetNews girl / GetNews boy