日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現

140年以上の歴史を持つ日本経済新聞は、日本で最も権威のあるメディア事業の1つです。紙媒体の新聞に加えて、毎月4億5,000万人以上のユーザがデジタルの媒体を訪れています。日経では2017年11月に、より良いユーザーエクスペリエンスと、ウェブにおけるビジネスを加速するため、「プログレッシブウェブアプリ(PWA) - https://r.nikkei.com」を成功裏に立ち上げました。

パフォーマンスの改善

2X のSpeed Index
14 秒早いTime-To-Interactive
75% の読み込み速度改善(prefetch利用時)

ビジネスインパクト

2.3X のオーガニック流入
58% のコンバージョン増(会員登録)
49% の1日当りアクティブユーザー数増
2X のセッションあたりPV増

ビジネス中心のPDFケーススタディをダウンロード(英語)

ビジネスの概要

チャレンジ

日経では、スマートフォン利用者が増え、多くのユーザのウェブへの主導線となるにつれ、従来のウェブサイトへのモバイルからの流入が急激に増えていく中、Lighthouse、ウェブページをスキャンし、複数のカテゴリにまたがって改善する方法についての改善レコメンデーションを提供する監査ツール、を利用し調査を行った結果、サイトが複数のエリアにおいてモバイル向けに最適化されていないこと、また読み込み速度にも多くの改善余地を見つけることができました。

従来のウェブサイトでは、操作可能な状態となるのに20秒かかる場合があり、Speed Indexは平均10秒となっていました。サイトの読み込みに3秒以上かかると、モバイルユーザの53%はサイトを離れてしまうという調査結果があり、日経では読み込み速度を速めることでよりよい体験を提供し、Webにおけるビジネスを加速させる方針を固めました。

特に経済ニュースの場合、スピードの価値は明白です。我々はスピードを主な指標の1つとし、ユーザにもその価値を理解していただけた。
重森泰平 デジタル戦略担当マネージャー

結果

日経ではLighthouseのスコアが23点から82点に急上昇するという驚異的なパフォーマンス改善を行いました。Time-to-Interactive指標は14秒向上し、オーガニック流入、速度、コンバージョン率、1日当りアクティブユーザー数もすべて向上するという結果となりました。

バニラのJavaScriptでもフロントエンドの複雑性を低減するためにPWAは複数ページのアプリ(MPA)を採用しています。1年という期間、5人のコアメンバーでこのパフォーマンスを達成しています。

日本経済新聞社のエンジニアは優れたUXがビジネスのパフォーマンスにも貢献すること証明しました。我々はWebにおいて新たなレベルの品質をこれからも届けるために全力で投資をしつづけていきたい。
東弘行, プロダクト・マネージャー日本経済新聞社

ソリューション

日経では心地よいユーザ体験を目標に、プログレッシブウェブアプリをレスポンシブ・デザインで、かつ、複数ページのアーキテクチャをバニラJavaScriptを用いて開発し、ローンチしました。 Service Workerを採用することで、ネットワークの状態に関わらず、予見しやすいパフォーマンスを提供し、キャッシュ・ストレージを利用することでトップ記事をどんな状況でも表示できるように、そして、ほぼ瞬時に読み込むこともできるようになりました。ウェブアプリマニフェストを追加し、Service Workerを用いることで、PWAをインストールできるようにし、アクセスを容易にできるようにしています。また、パフォーマンス全体きちんと管理できるようにサードパーティのJavaScriptの対応を含めた最適化を行いました。

ベストプラクティス

最新のWeb API、圧縮方式、コード最適化の手法を使用して、読み込み速度と操作可能な状態になるまでの速度を向上。
オフラインサポートやホーム画面に追加などのPWAの機能を追加することで、UXを段階的に改善。
パフォーマンスバジェットをパフォーマンス戦略に組み込む。

技術面の詳解

スピードは重要

スピードはこれまで以上に重要視されるべき指標です。スマートフォンが多くのユーザにとってウェブを閲覧するメインのデバイスとなるにつれ、日本経済新聞社が提供するサービスでもモバイルからのトラフィックが急激に増えてきていました。しかし、Lighthouseを使った調査で従来のサイトでSpeed Indexが平均10秒であり、初期読み込みが非常に遅く、巨大なJavaScriptを読み込んでいるなど、モバイル向けに最適化されていない状況であることを認識しました。日経ではこれを機にウェブ・パフォーマンスにおけるベストプラクティスを適用しサイトをリニューアルすることにしました。以下に、新たに構築したPWA、における結果と、主要なパフォーマンス改善について紹介しましょう。

Web APIとベストプラクティスを活用して読み込みを高速化する

主要なリクエストのPreload

クリティカル・パスの読み込みを優先することは重要です。HTTP/2のサーバープッシュを利用し、ページを読み込むのに必要なJavaScriptとCSSの読み込みを優先させています。

あらゆるオリジンからのコストの高い、複数のラウンド・トリップを避ける

日経電子版では集計や広告などを様々なケースでサードパーティからのリソースを読み込む必要がありました。主要なサードパーティのオリジンからのDNS/TCP/SSLのハンドシェークやネゴシエーションを<link rel=preconnect>を活用して事前に行っています。

次のページを動的にプリフェッチする

ユーザーが特定のページへ遷移することを確実に予測できる場合、遷移をただ待つのではなく、<link rel=prefetch> を <head> に動的に追加をし、ユーザが実際にリンクをクリックする前に、次のページを取得しています。こうすることで瞬時にページを表示できるようになります。

クリティカス・パスにあるCSSをインライン化

読み込み速度向上において、レンダリングの流れを止めるCSSを減らすことはベストプラクティスの1つです。このサイトではクリティカルなCSSをすべてインライン化し、レンダリングの流れを止めるスタイルシートへのリクエストを無くしました。この最適化によってFirst Meaningful Paintまでの速度を1秒以上削減しています。

JavaScriptバンドルの最適化

従来のモバイル向けサイトではJavaScriptのバンドルサイズは300kbを超える巨大なものとなっていた。バニラのJavaScriptやルートベースのチャンク生成やツリーシェイキングなどの最新のバンドル最適化を用いることで、このバンドルサイズを削減しています。 RollUpを利用しJavaScriptバンドルのサイズを80％、60KBまで削減しています。

その他のベストプラクティスの実装

圧縮方式: Fastly CDNを通じて、すべてのリソースをGzip/Brotliで圧縮
キャッシュ: HTTPキャッシュやエッジ・サイドのキャッシの活用
画像の最適化: imgix を利用して、画像のファイルサイズ最適化と画像フォーマットの検出を実施
クリティカル・パス外のリソースの後読み: Intersection Observer APIを利用し、初期画面以下の部分に関わるリソースを後読み
Webフォントの読み込み戦略:システムフォントの利用を最優先する
First Meaningful Paintの最適化:コンテンツをサーバーサイドでレンダリング
パフォーマンスバジェットを採用 : JavaScriptの送信と解析/コンパイル時間を抑え続ける

サードパーティJavaScriptの最適化

自前のJavaScriptの最適化に比べて、サーとパーティから供給されるJavaScriptを最適化することは簡単ではありませんが、日経では広告に関連するJavaScriptをすべてミニファイ、バンドル化し、日経側のコンテンツデリバリーネットワーク(CDN)から配信するようにしました。広告に関連するタグには大抵の場合、広告の表示などに必要となる他のJavaScriptを呼び出すスニペットが含まれており、ほとんどの場合にページのレンダリングの流れを止めてしまったり、必要なJavaScriptを呼び出すために複数のネットワーク処理が必要になってしまったりします。日経では以下のアプローチを採用し、初期化にかかる時間を100ms改善し、JavaScriptファイルサイズを30％削減しました。

必要となるJavaScriptをすべてJavaScriptバンドラ(例: Webpack)を使ってバンドル化
バンドル化したJavaScriptは非同期で呼び出し、ページのレンダリングの流れを止めないように
表示される広告を可能な限りShadow DOMに(対iframe)で処理する
Intersection Observer APIを利用し、ユーザのスクロールに合わせて広告を読み込む

ウェブサイトをプログレッシブエンハンスメントで構築

これらの基本的な最適化に加えて、日経ではウェブアプリマニフェストとService Workerを活用してウェブサイトをインストール可能にし、オフラインでも使用できるようにしています。Service Workerキャッシュ・ファースト戦略を採用し、核となるリソースのすべてとトップ記事がキャッシュストレージに格納され、ネットワークが不安定な状況やオフラインの状況でも再利用され、一貫した最適なパフォーマンス維持することを可能にしています。

日経をハックせよ

140年以上の歴史を持つ伝統的な新聞社は、ウェブとPWAの力でデジタル化を加速しました。日経のエンジニアは、優れたUXが高いビジネスパフォーマンスを発揮することを証明しました。同社はウェブに新しいレベルの品質をもたらすための旅をこれからも続けていきます。