Twitter は世界の出来事を知るためのプラットフォームです。1 か月のアクティブ ユーザーは世界中で 3 億 2, 800 万人にのぼり、情報を消費、作成、共有しています。80% を超えるモバイル ユーザーを抱える Twitter は、モバイルウェブ エクスペリエンスの高速化、信頼性、魅力向上を模索していました。Twitter Lite プログレッシブ ウェブアプリは、最新のウェブ機能とネイティブ機能を組み合わせたものです。2017 年 4 月には、世界中の全ユーザーに対してデフォルトのモバイルウェブ エクスペリエンスとなりました。Twitter Lite は、即時読み込み、ユーザー エンゲージメント、データ消費量の削減という明確な目標を備え、より堅牢なエクスペリエンスを提供するために Twitter Lite を開発しました。
- セッションあたりの閲覧数が 65% 増加
- 送信されたツイートが 75% 増加
- 直帰率が 20% 減少
Twitter Lite は、Twitter を使用するための最速、最も安価、かつ最も信頼性の高い方法です。このウェブアプリは Google のネイティブ アプリに匹敵しますが、Twitter for Android と比較して必要なデバイスの保存容量は 3% 未満です。
Twitter Lite のエンジニアリング リード、Nicolas Gallagher
「ホーム画面に追加」プロンプトとウェブプッシュ通知でエンゲージメントを向上
Twitter のウェブサイトは多くのユーザーにリーチしていますが、モバイルウェブでユーザーのリエンゲージメントを行うことはこれまで困難でした。Twitter Lite をホーム画面に保存するようユーザーに求める「ホーム画面に追加」プロンプトを実装した後、Twitter では 1 日あたり 25 万人のユニーク ユーザーが 1 日に平均 4 回ホーム画面から Twitter Lite を起動しています。
Twitter は、ネイティブ アプリと同じように動作し、ユーザーのブラウザが閉じられても届くウェブプッシュ通知を実装しました。この実装により、1 日に 1,000 万件を超えるプッシュ通知が配信されます。
データ使用量の削減
Twitter Lite は、デフォルトで使用するデータが少なく、提供されるメディア リソースのサイズも小さく、キャッシュされたデータにできる限り依存します。また、PWA は画像を最適化し、ユーザーがタイムラインをスクロールする際にデータ消費量を 70% も削減します。データセーバー モードを使用すると、Twitter Lite でメディア アセットをダウンロードするタイミングを管理できるため、モバイルデータをさらに節約できます。
幅広いユーザーにリーチすることは、Twitter にとって重要です。これには、ダウンロード速度が遅く、性能の低いモバイル デバイスが一般的である新興市場も含まれます。Twitter Lite は、帯域幅が狭い環境で Twitter をより速く、簡単に使用できるようにすることで、このようなオーディエンスにより効果的にリーチできるようにします。
Twitter Lite ユーザーは、データ消費の節約というメリットが得られます。PWA は通信でわずか 600 KB です。これに対して、ネイティブ Android アプリのインストールに必要なダウンロード データは 23.5 MB です。
Service Worker スクリプトを使用してほぼ瞬時に読み込み
Twitter Lite の最初の読み込みは、ほとんどのデバイスで 3G ネットワーク上で 5 秒未満で行われ、その後の読み込みは不安定なネットワークでもほぼ瞬時に行われます。アプリは、最初の HTML レスポンスをブラウザにストリーミングし、重要なリソースをプリロードする指示を送信します。リソースは細かく分割されているため、初期読み込みでは、表示される画面に必要なリソースだけで済みます。Service Worker スクリプトは追加のリソースをキャッシュに保存し、他の画面にすばやく移動できるようにします。
モバイルは Twitter の使用率の 80% 以上を占めており、多くの Twitter Lite ユーザーが 2G または 3G ネットワークでサイトにアクセスしています。ユーザーがツイートをできるだけ早く表示して作成できるようにするには、最初の読み込みと後続のビューで高速なユーザー エクスペリエンスが不可欠です。Twitter は、Service Worker や PRPL（プッシュ、レンダリング、事前キャッシュ、遅延読み込み）パターンの一部などのインテリジェントな読み込み戦略を展開し、両方のアクティビティの読み込み時間を大幅に短縮しました。現在のビュー、フィードの更新、通知、メッセージ、設定を Service Worker がキャッシュに保存しているため、繰り返しアクセスはほぼ瞬時に行われます。Twitter Lite では、インタラクティブになるまでのレイテンシが 99 パーセンタイルで 50% 短縮され、ログイン中のユーザーは平均読み込み時間が 30% 短縮されています。
Twitter は、オフラインとネットワークの復元力を高めるために Service Worker を活用する段階的なアプローチを採用し、ネットワーク接続が利用できないときに常にカスタム オフライン ページを表示することにしました。次に、CSS、画像、JavaScript バンドルなどの静的リソースのオフライン キャッシュ保存に移行し、再アクセスを高速化しました。最後に、アプリケーション シェルのオフライン キャッシュのサポートを追加しました。結果: 低速のモバイル デバイスやネットワークでも、ユーザーが PWA に戻ると、Twitter Lite が 3 秒未満で起動します。