140 年以上の出版の歴史を持つ日本経済新聞社は、日本で最も権威のあるメディア企業の一つです。印刷版の新聞に加えて、デジタル プロパティへの月間アクセス数は 4 億 5, 000 万件を超えています。ユーザー エクスペリエンスの向上とウェブでのビジネスの加速を目指し、日本経済新聞社は 2017 年 11 月にプログレッシブ ウェブアプリ（PWA）- https://r.nikkei.com - をリリースしました。新しいプラットフォームで素晴らしい成果を上げています。
パフォーマンスの向上 - 速度指数が 2 倍向上 - 操作可能になるまでの時間が 14 秒短縮 - プリフェッチによる読み込みが 75% 高速化
ビジネスへの影響 - オーガニック トラフィックが 2.3 倍に増加 - コンバージョン（サブスクリプション）が 58% 増加 - 1 日のアクティブ ユーザー数が 49% 増加 - セッションあたりのページビュー数が 2 倍に増加
ビジネスの概要
課題
スマートフォンが多くのユーザーにとってウェブへの主なアクセス手段となるにつれて、日経新聞の従来のウェブサイトへのモバイル トラフィックは急増しました。しかし、ウェブページをスキャンして複数のカテゴリにわたって改善方法を提案する監査ツールである Lighthouse を使用した結果、サイトが複数の領域でモバイル向けに完全に最適化されておらず、読み込みが非常に遅いことがわかりました。
ウェブサイトが常に操作可能になるまでに約 20 秒かかり、スピード指数は平均 10 秒でした。モバイル ユーザーの 53% は、読み込みに 3 秒以上かかると離脱することがわかっていたため、日本経済新聞社は読み込み時間を短縮してユーザー エクスペリエンスを向上させ、ウェブでのビジネスを加速させたいと考えていました。
スピードの価値は議論の余地がありません。特に金融ニュースではそうです。スピードをコア指標の 1 つとし、お客様からその変化を高く評価していただいています。
重森 泰平、デジタル戦略担当マネージャー
結果
日経新聞は、目覚ましいパフォーマンスの向上を達成しました。Lighthouse スコアは 23 から 82 に急上昇しました。インタラクティブになるまでの時間が 14 秒短縮されました。オーガニック トラフィック、サイトの速度、コンバージョン率、1 日あたりのアクティブ ユーザー数もすべて増加しました。
この PWA は、フロントエンドの複雑さを軽減するマルチページ アプリ（MPA）で、Vanilla JavaScript で構築されています。5 人のコア フロントエンド エンジニアが 1 年間かけてこのパフォーマンスを実現しました。
日経新聞のフロントエンド エンジニアは、優れた UX がビジネス パフォーマンスの向上につながることを証明しました。Google は、ウェブの品質を新たなレベルに引き上げる取り組みに全力を注いでいます。
Hiroyuki Higashi. プロダクト マネージャー、Nikkei
解決策
日本経済新聞社は、レスポンシブ デザイン、バニラ JavaScript、マルチページ アーキテクチャを使用してプログレッシブ ウェブアプリを作成し、リリースしました。ユーザー エクスペリエンスの向上に重点を置いています。Service Worker を追加することで、ネットワークに関係なく予測可能なパフォーマンスを提供できるようになりました。また、トップ記事は Cache Storage を使用して保存されるため、常に利用可能で、ほぼ瞬時に読み込まれます。ウェブアプリ マニフェストを追加し、Service Worker とともに PWA をインストールできるようにしたため、簡単にアクセスできます。パフォーマンスを完全に制御できるように、サードパーティ製 JavaScript を最適化しました。
ベスト プラクティス
- 最新のウェブ API、圧縮、コード最適化の手法を使用して、読み込み速度とインタラクティビティを改善します。
- オフライン サポートやホーム画面に追加などの PWA 機能を追加して、UX を段階的に強化します。
- パフォーマンス戦略にパフォーマンス予算を組み込みます。
技術的な解説
速度が重要
スピードがこれまで以上に重要になっています。スマートフォンが多くのユーザーにとってメインの閲覧デバイスになったことで、日経のサービスではモバイル トラフィックが急増しました。しかし、Lighthouse を使用した結果、従来のウェブサイトはモバイル向けに完全に最適化されておらず、スピード指数が平均 10 秒、初期読み込みが非常に遅く、JavaScript バンドルが大きいことがわかりました。日経新聞はウェブサイトを再構築し、ウェブ パフォーマンスのベスト プラクティスを導入する時期を迎えていました。新しい PWA の結果と主なパフォーマンス最適化は次のとおりです。
ウェブ API とベスト プラクティスを活用して読み込みを高速化する
プリロード キー リクエスト
クリティカル パスの読み込みを優先することが重要です。HTTP/2 サーバープッシュを使用すると、ユーザーが必要とすることがわかっている重要な JavaScript と CSS のバンドルに優先順位を付けることができます。
任意のオリジンへのコストのかかる往復を複数回行わない
ウェブサイトでは、トラッキング、広告、その他の多くのユースケースでサードパーティ リソースを読み込む必要がありました。<link rel=preconnect> を使用して、これらの主要なサードパーティ オリジンに対する DNS/TCP/SSL ハンドシェイクとネゴシエーションを事前に解決しました。
次のページを動的にプリフェッチする
ユーザーが特定のページに移動すると確信したとき、ナビゲーションが起こるのを待つだけではありませんでした。日経新聞は、<head> に <link rel=prefetch> を動的に追加し、ユーザーが実際にリンクをクリックする前に次のページをプリフェッチします。これにより、ページを瞬時に移動できます。
クリティカル パス CSS をインライン化する
レンダリング ブロック CSS を減らすことは、読み込み速度を上げるためのベスト プラクティスの 1 つです。ウェブサイトは、すべての重要な CSS をインライン化し、レンダリングをブロックするスタイルシートを 0 にしています。この最適化により、First Meaningful Paint が 1 秒以上短縮されました。
JavaScript バンドルを最適化する
以前の経験では、日経の JavaScript バンドルは肥大化し、合計で 300 KB を超えていました。バニラ JavaScript への書き換えと、ルートベースのチャンク化やツリー シェイキングなどの最新のバンドル最適化により、この肥大化を削減できました。JavaScript バンドルサイズを 80% 削減し、RollUp を使用して 60 KB に縮小しました。
その他のベスト プラクティスの実装
- 圧縮: Fastly CDN を使用して、圧縮可能なすべてのリソースを Gzip/Brotli で圧縮します。
- キャッシュ保存: HTTP キャッシュ保存、エッジサイド キャッシュ保存を有効にします。
- 画像の最適化: 最適化と画像形式の検出に imgix を使用します。
- 重要でないリソースを遅延読み込みする: Intersection Observer API を使用して、スクロールしなければ見えない範囲のフラグメントを読み込みます。
- ウェブフォントの読み込み戦略を立てる: システム フォントの使用を優先する
- First Meaningful Paint を最適化する: サーバーサイドでコンテンツをレンダリングする
- パフォーマンス バジェットを採用する: JavaScript の転送時間と解析/コンパイル時間を短くする
サードパーティの JavaScript を最適化する
サードパーティの JavaScript は自社スクリプトほど簡単に最適化できませんが、日経新聞は広告関連のすべてのスクリプトを最小化してバンドルし、自社のコンテンツ配信ネットワーク（CDN）から配信することに成功しました。広告関連のタグは通常、他の必要なスクリプトを開始して読み込むためのスニペットを提供します。このスニペットは、ページのレンダリングをブロックすることが多く、ダウンロードされる各スクリプトに対して追加のネットワーク ラウンドトリップ時間も必要になります。日経新聞は次のアプローチを採用し、初期化時間を 100 ミリ秒短縮し、JS サイズを 30% 削減しました。
- JS バンドラー（Webpack）
- バンドルされたスクリプトを非同期で読み込み、ページのレンダリングがブロックされないようにする
- 計算された広告バナーを Shadow DOM（iframe ではなく）に接続
- Intersection Observer API を使用して、ユーザーのスクロールに合わせて広告を段階的に読み込む
ウェブサイトを段階的に強化する
これらの基本的な最適化に加えて、日本経済新聞社は ウェブアプリ マニフェストとサービス ワーカーを活用して、ウェブサイトをインストール可能にし、オフラインでも動作するようにしました。サービス ワーカーで キャッシュ優先戦略を使用することで、すべてのコア リソースと上位の記事がキャッシュ ストレージに保存され、ネットワークの不安定さやオフラインなどの緊急時でも再利用されるため、一貫した最適化されたパフォーマンスが提供されます。
Hack the Nikkei
140 年以上の歴史を持つ伝統的な日刊新聞社が、ウェブと PWA の力を借りてデジタル化を加速させました。日経新聞のフロントエンド エンジニアは、優れた UX が高いビジネス パフォーマンスを実現することを証明しました。同社は、ウェブに新たなレベルの品質をもたらす取り組みを継続していきます。