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