140 年以上の歴史を持つ日経は、日本有数の信頼できるメディア企業の一つです。印刷新聞に加えて、デジタル プロパティへの月間アクセス数は 4 億 5,000 万件を超えています。より優れたユーザー エクスペリエンスを提供してウェブでのビジネスを加速させるため、日経新聞は 2017 年 11 月にプログレッシブ ウェブアプリ（PWA）https://r.nikkei.com をリリースしました。同社は新しいプラットフォームで 素晴らしい成果を上げています
パフォーマンスの向上 - 速度インデックスが 2 倍向上 - インタラクティブまでの時間が 14 秒短縮 - プリフェッチにより読み込みが 75% 高速化
ビジネスへの影響 - オーガニック トラフィックが 2.3 倍 - コンバージョン（サブスクリプション）が 58% 増加 - 1 日のアクティブ ユーザーが 49% 増加 - セッションあたりのページビュー数が 2 倍
ビジネスの概要
課題
多くのユーザーにとってスマートフォンがウェブへの主なアクセス ポイントとなったため、日経の従来型ウェブサイトへのモバイル トラフィックが急増しました。しかし、ウェブページをスキャンして複数のカテゴリにわたる改善方法を提案する監査ツールである Lighthouse を使用して、サイトが複数の領域でモバイル向けに完全に最適化されておらず、読み込みが非常に遅いことがわかりました。
ウェブサイトが安定してインタラクティブになるまでに約 20 秒かかり、Speed Index の平均は 10 秒でした。モバイル ユーザーの 53% は、読み込みに 3 秒以上かかると視聴をやめてしまいます。そこで日経は、ユーザー エクスペリエンスを向上させ、ウェブでのビジネスを加速するために、読み込み時間を短縮したいと考えました。
特に金融ニュースについては、スピードの価値に疑いの余地はありません。速度を主要指標の一つに据えたうえで、お客様はこの変化を高く評価しています。
デジタル ストラテジー マネージャー、太平 重守
結果
日経新聞は、パフォーマンスの大幅な向上を達成しました。Lighthouse スコアは 23 から 82 に急上昇しました。インタラクションまでの時間の測定値は 14 秒短縮されました。有機的トラフィック、速度、コンバージョン率、1 日あたりのアクティブ ユーザー数もすべて増加しました。
PWA は、フロントエンドの複雑さを軽減するマルチページ アプリ（MPA）で、Vanilla JavaScript で構築されています。このパフォーマンスを実現するために、5 人のコア フロントエンド エンジニアが 1 年間取り組みました。
日経のフロントエンド エンジニアは、優れた UX が優れた業績をもたらすことを証明しています。Google は、ウェブに新たなレベルの品質をもたらす取り組みに全力で取り組んでいます。
Hiroyuki Higashi. プロダクト マネージャー、日経
解決策
日経は、レスポンシブ デザイン、バニラ JavaScript、マルチページ アーキテクチャを使用してプログレッシブ ウェブアプリを作成してリリースし、優れたユーザー エクスペリエンスの構築に重点を置きました。Service Worker を追加することで、ネットワークに関係なく予測可能なパフォーマンスを提供できるようになりました。また、人気記事は Cache Storage を使用して保存されるため、常に利用可能で、ほぼ即座に読み込まれます。ウェブアプリ マニフェストを追加し、Service Worker と組み合わせることで、ユーザーが PWA をインストールして簡単にアクセスできるようにしました。また、パフォーマンスを完全に制御できるように、サードパーティの JavaScript を最適化しました。
ベスト プラクティス
- 最新のウェブ API、圧縮、コード最適化手法を使用して、読み込み速度とインタラクティビティを改善します。
- オフライン サポートやホーム画面に追加などの PWA 機能を追加することで、UX を段階的に強化します。
- パフォーマンス プランにパフォーマンス予算を組み込む。
技術的な解説
スピードが重要
スピードはこれまで以上に重要です。スマートフォンが多くのユーザーのメインのブラウジング デバイスになったため、日経のサービスのモバイル トラフィックが急増しました。しかし、Lighthouse を使用して、以前のウェブサイトがモバイル向けに完全に最適化されていないことがわかりました。Speed Index の平均は 10 秒で、初期読み込みが非常に遅く、JavaScript バンドルが大きいことが判明しました。日経新聞は、ウェブサイトを再構築し、ウェブ パフォーマンスのベスト プラクティスを適用する必要に迫られていました。新しい PWA の結果と主なパフォーマンス最適化は次のとおりです。
ウェブ API とベスト プラクティスを活用して読み込みを高速化する
プリロード鍵リクエスト
クリティカル パスの読み込みに優先順位を付けることが重要です。HTTP/2 サーバー プッシュを使用すると、ユーザーが必要とする重要な JavaScript バンドルと CSS バンドルを優先できます。
送信元への複数の往復を回避し、費用を削減
ウェブサイトでは、トラッキング、広告、その他の多くのユースケースのためにサードパーティ リソースを読み込む必要がありました。チームは <link rel=preconnect> を使用して、これらの主要なサードパーティの送信元の DNS/TCP/SSL handshake とネゴシエーションを事前に解決しました。
次のページを動的にプリフェッチする
ユーザーが特定のページに移動すると確信できた場合、そのページに移動されるのを待つだけでなく、Nikkei は、<head> に <link rel=prefetch> を動的に追加し、ユーザーがリンクを実際にクリックする前に次のページをプリフェッチします。これにより、ページをすばやく移動できるようになります。
クリティカル パスの CSS をインライン化する
レンダリング ブロック CSS を減らすことは、読み込み速度を上げるうえでベスト プラクティスの一つです。ウェブサイトは、レンダリングをブロックするスタイルシートが 0 個で、すべての重要な CSS をインライン化しています。この最適化により、First Meaningful Paint が 1 秒以上短縮されました。
JavaScript バンドルを最適化する
以前は、日経の JavaScript バンドルが肥大化し、合計サイズが 300 KB を超えていました。バニラ JavaScript への書き換えと、ルートベースのチャンキングやツリー シェイキングなどの最新のバンドル最適化により、この肥大化を削減できました。RollUp により、JavaScript バンドルサイズを 80% 削減し、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 を使用して、ユーザーのスクロール時に広告を段階的に読み込む
ウェブサイトを段階的に拡張
日経は、こうした基本的な最適化に加え、ウェブアプリ マニフェストと Service Worker を活用して、ウェブサイトをインストール可能にし、オフラインでも利用できるようにしました。サービス ワーカーでキャッシュファースト戦略を使用すると、すべてのコア リソースと人気記事がキャッシュ ストレージに保存され、不安定なネットワークやオフライン ネットワークなどの緊急事態でも再利用されるため、一貫した最適化されたパフォーマンスが提供されます。
日経をハッキング
140 年以上の歴史を持つ伝統的な日刊新聞社は、ウェブと PWA の力でデジタル化を成功裏に加速させました。日経のフロントエンド エンジニアは、優れた UX が優れたビジネス パフォーマンスをもたらすことを証明しています。Google は、ウェブの品質を新たなレベルに引き上げる取り組みを継続していきます。