ウェブへの投資でエンゲージメントを高めた OpenSooq

魅力的なショッピングモール PWA を作成して大きな成果を上げている小規模なチームの例をご紹介します。

Harleen Batra
Harleen Batra

ヨルダンのアンマンに拠点を置く OpenSooq は、中東と北アフリカの 19 か国で幅広い商品やサービスを提供する、モバイルファーストの分類型マーケットプレイスです。

課題

OpenSooq のトラフィックの 85% 以上はモバイル デバイスから発生しており、その数は増加し続けています。この地域では、ストレージ容量が限られた低価格デバイスを使用しているユーザーが多いため、OpenSooq のモバイルサイトはできるだけ高速で軽量である必要があります。しかし、OpenSooq の古いモバイルサイトの読み込み時間が長いことが顧客満足度に影響し、クウェートなどの市場では直帰率が 49% に達していました。

すべてのプラットフォームで一貫した優れたエクスペリエンスを顧客に提供するために、より高速でレスポンシブなウェブサイトが必要だと判断しました。そこで、2017 年 6 月に OpenSooq のエンジニアリング チームはプログレッシブ ウェブアプリ(PWA)をリリースしました。

パフォーマンスと信頼性を重視

OpenSooq の 3 人の社内デベロッパーは、わずか 2 か月半で Reactwebpack を使用してフル機能の PWA を構築しました。

検索エンジンがサイトをすばやく簡単にインデックス登録できるようにするため、チームはサーバーサイド レンダリングを実装することにしました。ユーザーのほぼ 28% が 2G または 3G ネットワークで PWA にアクセスしているため、ネットワークの制約に関係なく、ユーザーがエクスペリエンスが機能すると信頼することが重要でした。そこで、チームはサービス ワーカーキャッシュ優先ネットワーク戦略を使用してオフライン エクスペリエンスを実装しました。また、PRPL パターンを使用して、ユーザーに即時読み込みを提供しました。

これらのベスト プラクティスを採用することで、平均ページ読み込み時間(操作可能になるまでの時間)を 4 秒から 2 秒未満に短縮できました。また、Lighthouse を使用して、サイトの高速化が維持されていることを確認しました。こうした取り組みにより、OpenSooq の月間ページビュー数は 18 億回を超えました。

OpenSooq PWA の Lighthouse パフォーマンス指標のスクリーンショット。
OpenSooq の Lighthouse パフォーマンス指標。

ユーザーの 4 分の 1 以上が低中程度のネットワークから OpenSooq PWA にアクセスしているため、これらのユーザーのエンゲージメントを維持するには信頼性が不可欠でした。サービス ワーカーとキャッシュ戦略により、必要な信頼性の高いユーザー エクスペリエンスをシームレスに構築できました。

Amin Shoman、PWA テクニカル マネージャー、OpenSooq

リエンゲージメントの向上

OpenSooq の通知が表示されているスマートフォン。
OpenSooq の有意なユーザー通知。

パフォーマンスと信頼性に優れたエクスペリエンスを構築した OpenSooq チームは、ユーザーがプロダクトに引き続き関心を持ち続けるようにしたいと考えていました。そのために、ユーザーが PWA をホーム画面にインストールできるようにし、有意義な通知のサポートを追加しました。これにより、サイトは購入者にクエリに関する販売者の対応について通知し、販売者に広告の有効化と有効期限切れについて通知できるようになりました。

これらの改善により、OpenSooq のウェブ エクスペリエンスの月間アクティブ ユーザー数が 14% 増加しました。PWA をインストールしたユーザーでは、セッションあたりのページアクセス数が 48% 増加し、平均セッション継続時間が 28% 増加しました。また、OpenSooq では、すべての市場でユーザーの平均ページ滞在時間が 25% 増加し、平均直帰率が 29% 低下しました。

今後に向けて

OpenSooq は、わずか数週間で、すべてのプラットフォームとブラウザでユーザーに一貫したエクスペリエンスを提供する、23 KB のフル機能の PWA を作成しました。また、ウェブでは機能を簡単に更新できるため、チームは PWA を優先し、新しい機能とユーザーフローを PWA でリリースしてテストしてから、他のプラットフォームに展開しています。

OpenSooq は現在、プラットフォーム固有のインストール プロンプトを追加し、PWA を Accelerated Mobile Pages(AMP)と統合する作業を進めています。これらの機能強化により、ページの読み込みがさらに高速化され、プラットフォーム固有のアプリへの移行が可能な限りシームレスになります。OpenSooq チームは、最初の開発作業の基盤を構築することで、ユーザーに最良のエクスペリエンスを提供し続けます。

PWA を開発することの重要性は、リーダーシップ チームと技術チームの両方に明らかでした。モダンなウェブアプリを構築してパフォーマンスを向上させた後、2 か月半の投資がビジネスに与える影響を楽しみにしています。

Ramzi Alqrainy、OpenSooq 最高技術責任者