リライブシャツ オンラインショップ様はShopify Growth Services Webパフォーマンス改善サービスを利用し、サイトのキーパフォーマンス指標を改善し、すべての主要ページでページの表示速度（LCP）を50%以上短縮し、レイアウトのズレをほぼゼロにすることに成功しました。
その結果、コンバージョン率が3%向上し、直帰率が6%減少、セッションあたりのページビュー数が9%増加しました。
ウェブパフォーマンスは、ユーザーエクスペリエンスとビジネス成果の両方を改善する手段としてしばしば見過ごされてしまっています。 リライブシャツ オンラインショップ様のケーススタディは、近道や小手先のトリックではなく、事実に基づく、真に効果的な改善に焦点を当てることで、何が可能になるかを示しています。
リライブシャツ オンラインショップ様は、特殊鉱石の科学で着用者の体調とパフォーマンスの向上を支援するリカバリーウェアを作る日本のブランドです。
パフォーマンスの課題を発見し、目標を設定
すべてのサイトパフォーマンス改善プロジェクトは基準値（ベースライン）の測定から始まります。合成テストと実際のサイト閲覧ユーザーデータの両方を用いて、リライブシャツ オンラインショップの課題となる点を把握しました。 ページの表示速度（LCP）、累積レイアウトシフト（CLS）、ページの応答性（INP）を確認しました。改善前の状況は次のとおりです：
レビューの過程で、パフォーマンスとユーザーエクスペリエンスの両方を損なう複数の問題が見つかりました：
- 過去のウェブパフォーマンス改善の試みにより、ウェブパフォーマンスツールを欺くスクリプトが使われていました。これらのスクリプトはサイトがテストされていることを検知し、結果を操作するためにページを改変していました。さらに、ブラウザに最大視覚コンテンツの表示要素として誤認させるため、不可視の巨大な文字を挿入していました。
- ホームページの動画が初回読み込みを遅くし、訪問者が動画コンテンツを見るまでの待ち時間を生んでいました。
- 一部のスクリプトがレンダリングを遅延させ、それらが完了するまでユーザーがコンテンツを閲覧することができない状態を引き起こしていました。
- 重要な画像コンテンツ（本来すぐに表示すべきもの）にもレイジーロード（遅延読み込み）が適用され、商品画像の表示が遅れていました。
- サイトのヘッダーおよびグリッドレイアウトが、読み込み時にフレームごとのブラウザの処理によってコンテンツのジャンプを引き起こすことがあり、ユーザー体験を不安定にしていました。
- 商品オプション（サイズや色など）の切り替えが遅く感じられることがあり、特に低スペックのデバイスや遅いネットワーク環境で顕著でした。
リライブ様とは、主な目標を「ウェブパフォーマンステストのためではなく、実際の顧客のために、読み込み速度・安定性・ページの応答性を現実的かつ測定可能に改善すること」と合意しました。
偽のパフォーマンスコンサルタントについて詳しく知りたい場合は、パフォーマンス詐欺に関する当社のブログ記事をご覧ください。
ステップ 1：クリーンアップと読み込みの高速化
最初のステップは、パフォーマンススコアを操作しようとするスクリプトを削除することでした。これらのトリックは実際のユーザーの顧客体験の役に立たず、将来的に問題を引き起こす可能性があります。私たちは、誠実な改善こそが信頼を築き、より良いエクスペリエンスを提供する唯一の道だと考えています。
次に、動画と画像の読み込み方法の改善に注力しました。ホームページの動画読み込みを最適化し、ダウンロード中でも最初のフレームが表示されるようにしました。また、レンダリングをブロックするスクリプトの扱いを見直し、重要なコンテンツができるだけ早く表示されるようにしました。
最後に、レイジーロード（遅延読み込み）の実装全体を徹底的に見直し、最も重要な画像や要素が即座に読み込まれるようにしました。この最適化により、お客様は商品をより早く閲覧でき、サイトとやり取りを始めるまでの待ち時間が短縮されました。
ステップ 2：サイトの安定性とスムーズさの向上
視覚的な安定性は重要です。読み込み中やナビゲーション中にコンテンツが移動すると、ユーザーを混乱させ、フラストレーションを招きます。
75パーセンタイルではCLSスコアは良好でしたが、約10%のユーザーはなお中程度のレイアウトシフトを経験していました。私たちは、これらの不安定性を引き起こしていたヘッダーとグリッドレイアウトの問題に対処し、ページの読み込み開始時からほぼ全てのユーザーに対してレイアウトが安定するようにしました。
ステップ 3：インタラクティビティの改善
高速で読み込まれるサイトであっても、ユーザーが使っていて遅く感じるようでは十分とは言えません。
私たちは、商品オプションの切り替え速度を75パーセンタイルで8ミリ秒（4%）改善し、1ミリ秒の積み重ねが重要であることを示しました。これは
小さな改善に見えるかもしれませんが、これらの段階的改善が積み重なることで、よりスムーズなブラウジングとショッピング体験が生まれ、特にネットワークの遅い条件下でもストアはより応答性が高く、快適に感じられるようになります。
結果：より高速で、よりスムーズ、そしてより信頼性の高いサイトへ
改善プロジェクト後、リライブシャツ オンラインショップは大幅に高速化し、安定性も向上しました：
- ページの表示時間（LCP）：すべての主要ページでLCPが50%以上改善。ユーザーの90%が、2.5秒未満でページのメインコンテンツを目にできるようになりました。これによりエンゲージメントが維持され、フラストレーションが軽減されます。
- 累積レイアウトシフト（CLS）：CLSはほぼゼロまで低下し、コンテンツのシフトや不安定が解消。よりプロフェッショナルで信頼できるショッピング体験につながりました。
- 次のペイントまでの操作時間（INP）：75パーセンタイルで8ミリ秒改善し、特に遅い条件下でも、あらゆるインタラクションとページの応答性とスムーズさが向上しました。
違いは明白です。リライブのお客様は、これまで以上に高速でスムーズ、かつ信頼性の高いショッピング体験を楽しんでいます。影響はユーザーエクスペリエンスにとどまりません。実際のビジネス成果も向上しました。
これらの改善プロジェクトの後、90日間で、前期比でコンバージョン率は3%増加、直帰率は6%低下、セッションあたりのページビュー数は9%増加しました。 優れたパフォーマンスは、お客様を喜ばせるだけでなく、ビジネスの測定可能な成長を牽引しました。
教訓と次のステップ
このプロジェクトは重要な教訓を再確認させました。実際のパフォーマンスに近道はありません。トリックや見せかけの修正はテスト結果は至る所にあります。 よく見せるかもしれませんが、お客様の役には立ちません。誠実で、適切にドキュメント化された改善だけが、持続的な改善をもたらします。
サイトスピード改善にあたり、私たちは細かく指示をしなくても、Shopify専門チームが本質的な課題を特定し、解決へと導いてくれました。その結果、ページの表示速度は50%以上改善、レイアウトのズレもほぼゼロになり、お客様の体験が格段に向上しました。最終的にコンバージョン率は3%向上、直帰率は6%低下という目に見える成果に繋がり、信頼してお任せして本当に良かったと感じています。
藤崎 泰資 - WEBマーケティング部 主任
パフォーマンスの取り組みに終わりはありません。リライブが新しい機能やコンテンツを追加していく中で、彼ら（そしてすべてのマーチャント）には、数値を継続的に注視し、小さくても意味のある改善を積み重ねることをおすすめします。 Shopify管理画面では現在、実際のユーザーパフォーマンスの詳細な内訳を確認できます。
私たちについて
私たちはGrowth Services Webパフォーマンスチームです。直接の有料エンゲージメント、プラットフォーム改善、教育を通じて、マーチャントのオンラインストアを可能な限り高速化することを目標としています。 あなたのストアのウェブパフォーマンス改善を始めるには、ぜひお問い合わせください。