QuintoAndar が INP を 80% 削減し、コンバージョンを 36% 増加させた方法

Mari Viana
Mari Viana
LinkedIn
Daniel Ericeira
Daniel Ericeira
GitHub LinkedIn
Luciano Holanda

公開日: 2025 年 1 月 22 日

QuintoAndar は、Interaction to Next Paint（INP） を 80% 削減することでウェブのパフォーマンスを大幅に改善し、コンバージョン数を前年比 36% 増加させました。ユーザー エンゲージメントにとって、高速でレスポンシブなサイトが重要であることを認識し、すべてのチームでパフォーマンスを優先するために「コード イエロー」を導入しました。

QuintoAndar は、リアルユーザー モニタリング（RUM）などのツールと、async/await などの手法を使用して、長いタスクの最適化と React 遷移を行い、インタラクション時間を短縮してユーザー エクスペリエンスを改善しました。サードパーティ ピクセルの削除やレンダリングの最適化などの変更により、パフォーマンス指標が改善されました。ページの 42% から 78% が INP の「良好」しきい値である 200 ミリ秒未満を満たすようになり、開始時の 32% から 6.9% に低下しました。

問題

QuintoAndar はブラジル最大の住宅プラットフォームであり、ラテンアメリカのいくつかの国でも掲載されています。不動産業界では検索が最大のオンライン チャネルであるため、オーガニック トラフィックの獲得はビジネスにとって不可欠です。また、優れたユーザー エクスペリエンスを提供することは、ユーザーのエンゲージメントを維持し、ユーザーが夢のマイホームを見つけるうえで非常に重要です。

2024 年の初めに、QuintoAndar は、市場で最高のプラットフォームを有しているものの、ユーザー エクスペリエンスを改善してコンバージョン率を高めることができると判断しました。これは、Core Web Vitals として Interaction to Next Paint（INP） が導入されたことで明らかになりました。実際、QuintoAndar の INP は競合他社と比較して最も低い値でした。

QuintoAndar の SEO とウェブ パフォーマンス チームは、INP が高いとユーザー エクスペリエンスに悪影響が及ぶことを認識し、対策を講じることにしました。明確なアクション プランに基づき、INP の削減だけでなく、ユーザー エンゲージメントとクリックスルー率の向上も目指して、技術とコンテンツの改善に取り組みました。

QuintoAndar が INP を 80%削減し、コンバージョンの大幅な増加とユーザー エクスペリエンスの向上を実現した方法をご紹介します。このケーススタディでは、実装された戦略、直面した課題、達成した結果について説明します。

コードイエロー: ウェブ パフォーマンスの優先

QuintoAndar は、ウェブ パフォーマンスがユーザー エクスペリエンスだけでなく、ビジネス全体の成功にとっても重要であることを認識し、高速でレスポンシブなサイトがエンゲージメントの向上とユーザー維持につながることを理解していました。また、これらの結果を達成するには、組織全体で継続的に調整された取り組みが必要であることを理解していました。これを受けて QuintoAndar は「コード イエロー」を導入しました。

「Code Yellow」のコンセプトは、スピードを上げるために Google で生まれました。指定されたリーダーが、現在のプロジェクトに関係なく、社内の誰でも支援に招集できる権限を付与します。

QuintoAndar では、「Code Yellow」が組織内のウェブ パフォーマンスの改善を優先するために設計された内部アラート システムとして機能していました。「コード イエロー」が宣言されると、パフォーマンス関連の問題に対処して解決するために、社内のさまざまなチームが直ちに連携して行動を開始します。

QuintoAndar が主な機会を特定して最適化を適用した方法

200 ミリ秒を超える遅延はユーザーに認識され、それを超える大きな遅延はユーザー エクスペリエンスを損ないます。そのため、INP 指標が非常に重要です。INP は、ページのライフサイクル全体で発生するすべてのクリック、タップ、キーボード操作のレイテンシをモニタリングすることで、ユーザー インタラクションに対するページの全体的な応答性を評価します。

ただし、この指標を改善するには、詳細を詳しく把握する必要があります。QuintoAndar では、まず、インタラクションの遅延の原因となっているユーザー エクスペリエンスのどの段階と要素かを特定しました。これは、リアルユーザー モニタリング（RUM）手法を使用して行うことができます。これにより、遅いインタラクションを詳細に追跡できます。これには、INP を入力遅延、処理時間、表示遅延などのサブパートに分割することや、長いアニメーション フレーム（LoAF）の分析が含まれます。

このプロセスにより、たとえば、不動産検索エクスペリエンスの特定の要素が、75 パーセンタイル（25% のユーザーに影響）で4 秒のインタラクション時間を引き起こしていることを特定できました。長時間のタスクを最適化することで、INP に影響する多くの遅いインタラクションの大幅な改善を実現しました。これは、async/await を使用して QuintoAndar の JavaScript コードに収益ポイントを作成することで実現しました。

function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

これにより、ユーザーにとって有益な視覚的なフィードバックをより迅速に提供できます。QuintoAndar の場合、スピナーがレンダリングされ、優先度の高い他のタスクのためにメインスレッドがプリエンプトされ、プリエンプト後に最初に行う残りの処理を再開できました。

async function handleFilterClick () {
  showLoadingSpinner();
  await yieldToMain(); // Yield point
  await loadFilterData();
  showModal();
}

よく使用されるもう 1 つの手法は、React でアプリケーションを構築する場合に不可欠な、遷移の使用です。React が遷移をサポートするようになったため、QuintoAndar は useTransition フックを使用して、ユーザー インターフェースをブロックすることなくアプリケーションの状態を更新できるようになりました。

import React, { useState, useTransition } from 'react';

function App() {
    const [isPending, startTransition] = useTransition();
    const [value, setValue] = useState('');

    const onInputChange = event => {
      setValue(event.target.value) // high-priority

      startTransition(() => {
          // Time-consuming task—for example, filter and update the list...
      });
    }

    return (
      <div className="App">
        <input
          value={value}
          onChange={onInputChange}
          placeholder='Start typing...'
        />
      </div>
    );
}

export default App;

QuintoAndar は、前述のテクニックに加えて、メモ化、デバウンス、中止コントローラ、サスペンスなどの他の改善も実装し、INP を改善しました。

たとえば、上のコードサンプルでは、デバウンスを適用できます。デバウンスを適用すると、一定の無操作時間が経過するまで関数の実行が遅延されます。これにより、ユーザーが素早く入力しているときに不要な更新を防ぐことができます。

useEffect(() => {
  const handler = setTimeout(() => {
    setDebouncedValue(value);
  }, 300); // Adjust debounce delay as needed

  return () => clearTimeout(handler);
}, [value]);

また、INP の代用として合計ブロック時間（TBT）を使用することで、QuintoAndar は次のような大規模な構造変更の影響を推定できました。

  • クライアントからサードパーティのピクセルを削除する。
  • CSS-in-JS を排除。
  • レンダリングの最適化。

このような取り組みは重要です。ユーザーが操作を開始してから、その操作に登録されたイベント ハンドラの実行が開始されるまでの時間である入力遅延に直接対処できるためです。ユーザーがページの操作を開始するときに他のタスクが実行されている場合、入力遅延はしばしば増加します。QuintoAndar では、最初のページ読み込み時にメインスレッドで実行されるタスクが多かったため、入力遅延が INP の主要な要因の一つでした。

ウェブ パフォーマンスのガバナンスでリグレッションを防止する

パフォーマンスの問題を優先して解決するだけでは、回帰を防ぐことはできません。QuintoAndar は過去にパフォーマンスの低下に見舞われたことがあり、パフォーマンス改善の取り組みが後退しないように、堅牢なガバナンス メカニズムを構築することの重要性を認識していました。

最初のステップは、アプリケーションの種類またはエクスペリエンス（またはその両方）でセグメント化された、各指標のアラート メカニズムを確立することでした。QuintoAndar は、実際のユーザーから収集した指標データを基にパフォーマンスをモニタリングし、このデータを時系列データベースに送信します。このデータベースでは、ツールを使用してダッシュボードとセグメント化されたアラームを生成できます。

QuintoAndar は、固定アラームに加えて、変動しうるしきい値を持つアラームも実装しました。このアラームは異常な結果を検出し、固定しきい値に達する前に状況が制御不能になった場合に開発チームに通知します。QuintoAndar は、これらのアラートのしきい値を調整する委員会を 2 週間に 1 回設立しました。

インシデントに対応するため、プロセスが作成され、ランブックを使用して厳密に遵守されました。ランブックには、発生する可能性のある問題の種類ごとに、実施する手順が詳細に記載されています。これらのランブックは、エンジニアリング担当者であれば誰でも使用できます。

最後に、INP の問題が本番環境に導入されないように、QuintoAndar は、新しいリリースを段階的にユーザーに提供するカナリア リリース システムを実装しました（たとえば、1%、10%、65%、最終的に 100% と段階的に）。再バランシング ステージごとに、カナリア バージョンがチェックされ、ユーザーのパフォーマンスが低下していないかどうかが確認されます。その場合は、自動的にロールバックが行われ、最適化されていない機能が本番環境に完全に導入されなくなります。

QuintoAndar のコード変更による A/B テストで INP を改善したフローチャート。最適化されていないバージョンは訪問者の 90% に、最適化されたバージョンは残りの 10% に表示し、モニタリングしました。

主な対応は次のとおりです。

  • 明確に定義されたアラート（固定と変数）と、しきい値の調整のための 2 週間ごとの委員会。
  • 詳細なランブックを含むインシデント手順。
  • パフォーマンス検証を備えたカナリア リリースにより、パフォーマンス低下の影響を抑制します。

結果

組織内でのパフォーマンスの適切な優先順位付け、専任のパフォーマンス チーム、最適化手法の使用により、RUM データで測定されたINP が 80% 削減されました。下のグラフは、モバイル専用の INP を示しています。初期段階では急激な減少が見られます。この改善は、特に問題のあるインタラクションの修正によってもたらされました。また、1 年間を通じて一貫して減少していることも示されており、リグレッションを防ぐためのガバナンス プロセスの重要性が示されています。

2024 年の第 8 週から第 49 週までのモバイルにおける INP の全体的な減少を示す時系列の折れ線グラフ。この期間中のモバイル INP は 1,006 ミリ秒から 216 ミリ秒に短縮されました。

これらの改善は CrUX ダッシュボードにも反映されています。QuintoAndar の INP は 75 パーセンタイルで 200 ミリ秒未満になり、78% のページがこのしきい値を下回るパフォーマンスを達成し、6.9% のページのみが低品質のエクスペリエンスを提供しています。この数値は月を追うごとに着実に減少しています。

Chrome ユーザー エクスペリエンス レポートに表示される棒グラフ。2024 年 3 月から同年 12 月までの QuintoAndar の「良好」な INP が大幅に増加していることを示しています。

この結果は、QuintoAndar のビジネスに直接影響を与えるために重要でした。QuintoAndar では、コンバージョン数（新しい見込み顧客。QuintoAndar の場合は、物件の見学を予約したユーザー）が前年比 36% 増加しました。この結果は、優れたユーザー エクスペリエンスの提供によるエンゲージメントの向上と強く関連していますが、それだけではありません。

QuintoAndar のコンバージョン数が前年比で 36% 増加したことを示す折れ線グラフ。

まとめ

ウェブのパフォーマンスを改善するのは簡単ではありません。ときには、圧倒されることもあるかもしれません。QuintoAndar が設立された当初は、すべての答えを把握していたわけではありません。しかし、問題を分割し、影響が最も大きい問題に焦点を当て、チーム間のコラボレーションを促進することで、大きな進歩を遂げました。すべてを一度に修正する必要はありません。小さな改善を積み重ねることで、有意な改善につながります。パフォーマンスの向上とユーザー エクスペリエンスの改善に向けて、まずはボトルネックの特定、最適化のテスト、チーム内での認知度の向上など、最初の一歩を踏み出しましょう。