美団点评、Qwik.jsでMサイトを高速化

TL;DR: 美団点评はQwik.jsを導入し、Mサイトのページサイズを45%削減、FCPを2.3秒から0.9秒に短縮しました。

• 対象：Mサイト
• 技術：Qwik.jsによるオンデマンド・レンダリング
• 開始時期：2025年Q3、成果報告：2026-03-13
• 効果：ページサイズ45%減、FCP2.3秒→0.9秒

モバイルユーザーが増える中、外部流入からアプリへシームレスに誘導できるかは、プラットフォームの成長を左右する重要課題です。美団点評はこの課題解決のため、最先端の軽量フレームワークQwik.jsを活用し、Mサイトのフロントエンドを根本から再構築しました。

1. Mサイトの役割と直面した課題

Mサイトは、検索エンジンやSNSからの流入を受け、情報展示とアプリへのクリック誘導を担う中国国内最大級の外部入口です。

しかし、従来はPC版と同様のモノリシック構造で実装され、ページ容量が1.2MB超と重く、モバイル回線環境での読み込み遅延がユーザー離脱の主因となっていました。

この遅延は、情報が見えにくくなるだけでなく、外部流入からアプリへの転換率（DAU）を12%低下させる要因となり、ビジネス価値の最大化を阻害していました。

2. Qwik.jsの技術概要と選定理由

Qwik.jsは「即時起動（instant-load）」を実現するため、コンポーネント単位でコードを遅延ロードし、サーバーサイドでのシリアライズを最小化する新世代フレームワークです。

美団点評は、以下の三点でQwik.jsを選定しました：①ページサイズ削減効果、②初回インタラクションまでの遅延が極小、③既存のVue/Reactエコシステムと互換性が高い点です。

この選定は、外部流入ユーザーが3G/4G環境でも快適に閲覧でき、即座にアプリへ遷移させるというビジネスゴールと合致しました。

3. 再構築の実装ポイントと開発フロー

再構築は「ページ単位のオンデマンドロード」→「SSR（サーバーサイドレンダリング）最適化」→「クライアント側ハイドレーション削減」の三段階で実施されました。

具体的には、Vueで書かれた既存コンポーネントをQwikのuseClientEffectに置き換え、不要なJavaScriptをビルド時に除外。さらに、画像や動画はlazy-loadを徹底し、ネットワーク負荷を低減しました。

┌─────────────┐   ビルド   ┌─────────────┐
│  Vue コンポ │ ─────▶ │ Qwik コンポ │
└─────────────┘          └─────────────┘
        │                         │
        ▼                         ▼
  SSR 出力 (HTML)          オンデマンド JS

開発は社内の前端チームが3か月間で完了し、CI/CDパイプラインに自動テストを組み込むことでリリースリスクを最小化しました。

4. パフォーマンス改善と具体的数値

リリース後の計測では、ページ体積が平均45%縮小し、FCP（First Contentful Paint）は2.3秒から0.9秒へ短縮されました。

さらに、CLS（Cumulative Layout Shift）も0.12 → 0.04に改善し、レイアウトシフトによる離脱が大幅に減少。これに伴い、外部流入からアプリへのクリック率は8%上昇し、DAUへの転換率は5.6%増加しました。

以下の画像は、リファクタリング前後のロードタイム比較を示しています。

5. ビジネスインパクトと今後の展開

高速化により、Mサイトは外部流入の「第一接点」としての価値を再定義し、ユーザー体験の向上が直接的にアプリの日活（DAU）拡大へと結びつきました。

この成果は、同様の外部入口を持つ他プラットフォームにも応用可能であり、特に中国国内のモバイルファースト戦略において重要な示唆を提供します。

主要プレイヤーへの影響を以下の表にまとめます。

今後は、Qwik.jsのマルチモーダル対応やAI-Drivenパーソナライズ機能を組み合わせ、さらに高度なユーザー誘導を目指す計画です。

まとめ: Qwik.jsによるフロントエンド再構築は、Mサイトのページ速度とユーザー転換率を同時に向上させ、外部流入を価値あるDAUに変換する新たなテンプレートとなりました。今後も軽量化とAI活用が中国モバイルエコシステムの鍵を握ります。