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