サイトのパフォーマンスとビジネス指標との相関関係を見つけることが、最適化の取り組みを成功させる鍵でした。
Swappie は、再生品スマートフォンを販売する成功したスタートアップです。数年間、サイトのパフォーマンスよりも新機能の追加を優先していましたが、モバイルサイトのビジネス成果がパソコン版に比べて遅れていることに気づき、方針を転換しました。パフォーマンスの最適化に重点を置いた結果、モバイル収益がすぐに増加しました。
42%
モバイル ユーザーからの収益の増加
10pp*
*相対 mCVR の増加率（%）
商談の機会をアピールする
相対的なモバイル コンバージョン率（相対 mCVR）は、モバイル コンバージョン率をパソコンのコンバージョン率で割って算出します。速度指標を追跡する機会は数多くありますが、それをビジネス指標に結び付けるのは非常に難しい場合があります。モバイルとパソコンの両方に同じキャンペーンと季節性が影響するため、相対 mCVR 指標ではこれらの外部パラメータの影響が除外され、モバイルサイトのパフォーマンスが改善されているかどうかのみが表示されます。
米国の 10 大 e コマース サイトの平均の Rel mCVR は 50% ですが、Swappie は 24% でした。これは、モバイルサイトに問題があり、収益を逃していることを示しており、パフォーマンス改善プロジェクトの開始につながりました。
パフォーマンス改善の影響を測定する
Swappie は、このテンプレート スプレッドシートを使用して、Google アナリティクスで Rel mCvR とモバイルの平均ページ読み込み時間を毎日トラッキングするように設定しました。（スプレッドシートの使用方法をご覧ください）。また、Google アナリティクスと BigQuery で Core Web Vitals のトラッキングも開始しました。トラッキングを設定したら、デベロッパーはサイトのパフォーマンスの改善に取り組みました。
わずか 3 か月で、その効果は明らかでした。相対 mCVR は 24% から 34% に上昇し、モバイル収益は 42% 増加しました。
23%
ページの平均読み込み時間を短縮する
55%
LCP の低下
91%
CLS が低い
90%
低い FID
最適化
LCP と CLS の最適化
Swappie の開発チームは、長い間見落とされてきた細かい点に改善の余地があることを発見しました。さまざまなビューポートと言語でサイトを調査した結果、簡単に解決でき、全体的なパフォーマンスに大きな影響を与える LCP と CLS の問題が見つかりました。たとえば、可能な場合はクライアントではなくサーバーで LCP 要素をレンダリングすると、LCP が低下しました。
レイアウトのずれはビューポートと接続によって大きく異なる可能性があるため、検出は困難でした。ユーザーからアナリティクスに Core Web Vitals を取得した後、CLS が減少したことで、正しい方向に進んでいることがわかりました。
画像
画像はプリロード、遅延読み込み、適切なサイズ設定で最適化されています。主要な画像（LCP など）はプリロードし、ビューポート外の画像は必要に応じてのみ読み込みます。
フォント
Swappie は、プロバイダを切り替えてフォントを最適化しました。さまざまな言語で必要なタイポフェイスを最適な方法で処理する必要があったため、これは大きな影響を与えました。
サードパーティ スクリプト
Swappie は、各サードパーティのスクリプトとウィジェット、それらが使用されている場所、提供される機能の確認に多大な労力を費やしました。すべての関係者と話し合った結果、機能は維持しつつ、スクリプトがサイトに与える影響を軽減する計画を立てました。不要なものを削除し、残りを最適化して、サイトのサードパーティ JavaScript の量を大幅に削減しました。
使用されていないコードの削除とバンドルの最適化
インポートの最適化と未使用の JS と CSS の削除により、Swappie のサイトのパフォーマンスがわずかに改善されましたが、この小さな改善が時間の経過とともに積み重なることで、また、バンドルの設定を最適化しました。
Swappie でパフォーマンス文化を構築する
Swappie が達成した結果は、コードの変更だけでなく、組織とその優先度の変化からもたらされました。
エンジニアリング リードである Teemu Huovinen は次のように説明しています。
サイト速度の重要性を明確に示すには、サイト速度をビジネス指標に関連付ける必要があります。時間とリソースが限られている場合は、優先順位付けが重要になります。これは常に当てはまります。カスタマー バリューを優先することは正しい方法ですが、サイトの速度はサイトの「感触」を改善するだけだと考えていると、新機能やより直接的なコンバージョンの改善に重点を置きがちです。サイト速度をビジネス指標に関連付けるのは簡単ではありません。そこで、Rel mCvR を使用した計算が非常に役立ちました。
Teemu Huovinen
デベロッパー チームは、四半期にわたってサイトの速度に専念する機会を得て、より深く掘り下げるためのモチベーションが高まりました。
チームの成長とその影響が相まって、さらに素晴らしい成果を上げています。7 人のデベロッパーのうち 4 人は、パフォーマンスの改善に取り組んだその月に入社しました。チームのおかげです。このトピックに集まり、大きな影響を与えることができたのは本当に素晴らしいことです。
Teemu Huovinen
Teemu は、改善を行う前に、データに基づく計画を立て、DevTools の [パフォーマンス] タブの使い方を学び、ユーザー分析を設定する時間を費やすことの重要性も指摘しています。グラフ（特に右方向に進んでいるもの）は、作業のフィードバックと検証に最適です。Lighthouse（ラボベース）のスコアとともに、現場の Core Web Vitals を確認することで、最も多くのユーザーに影響する適切な最適化に集中できました。