技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

顧客を満足させ続けることが小売業で成功する秘訣です。高速で一貫したオンライン エクスペリエンスを提供することで、コンバージョン率や収益から維持率やブランド認知度まで、小売業者が気にするあらゆる指標が大幅に向上することが証明されています。

この記事の概要:

• ページ速度はオンライン小売ビジネス データに影響します

• ウェブサイトの速度を競合他社と比較する方法

• パフォーマンスの最適化を開始する: 画像やサードパーティからスタイルシートやカスタム フォントまで、ページの速度を低下させている原因を分析し、それに対して何ができるかを分析します。

ページ速度はオンライン小売ビジネス データに影響します

ほとんどのオンライン小売業者にとって、ページ速度は利益に目に見える影響を与えます。たとえ小さな改善であっても、コンバージョン率などの指標を大幅に向上させることができます。例えば

ウェブサイトのパフォーマンスとビジネスコンバージョンデータの関係を分析する方法

しかし、あなたのウェブサイトはどうでしょうか?ページ速度の向上が自分のサイトに及ぼす影響を理解するには、自分のリアル ユーザー モニタリング (RUM) データを確認する必要があります。関連図 ビジネスの全員にパフォーマンスを伝える優れた方法です。 RUM を使用してこれらの視覚化を作成すると、技術に詳しくない関係者でも、パフォーマンスがユーザー エンゲージメントや直帰率やコンバージョン率などのビジネス指標とどのように相関しているかを簡単に確認できるようになります。

相関グラフでは、レンダリング開始、最大コンテンツ描画、次の描画までのインタラクション数などのパフォーマンス メトリックに基づいて、さまざまなグループに分類されたすべてのユーザー トラフィックのヒストグラム ビューが表示されます。グラフには、各グループに関連付けられたユーザー エンゲージメント指標またはビジネス指標 (直帰率やコンバージョン率など) を示すオーバーレイが含まれています。こうすることで、パフォーマンス、ユーザー エンゲージメント、ビジネスの関係を一目で確認できます。

この相関グラフからわかるように、最大​​コンテンツ描画 (LCP) 時間が 1.1 秒の場合、コンバージョン率は 6% 強でピークに達します。 LCP の速度が低下すると、コンバージョン率は急速に低下し、2 秒で 3% を下回ります。上記からわかるように、Web サイトのパフォーマンスを最適化して LCP 時間を短縮すると、全体的なコンバージョンの増加と収益の増加につながる可能性があります。

あなたのウェブサイトは競合他社と比べてどうですか?

スピードカーブあり 合成包括的なパフォーマンス監視と同様に、自分の Web サイトで行うのと同じように、他の Web サイトでもページ速度テストを実行できます。これは、比較用に、すべて同じ、豊富で優れたデータ、スクリーンショット、スライドを取得できることを意味します。

あなたの競争力のあるベンチマークダッシュボードでは、ドリルダウンしてページ構築などに集中することもできます。そのページはあなたのページの 2 倍の速度でレンダリングされます...何が違ったのでしょうか?彼らはもっとJavaScriptを持っていますか？少ない？ 400 件のリクエストを行ったのに、80 件しかリクエストされませんでしたか?ここがそれを知る場所です。

ページ速度ベンチマーク は、米国、EU、英国、日本の大手小売業者の現在のパフォーマンスのスナップショットを表示する公開ダッシュボードです。

パフォーマンスの最適化を始める

優れた高速オンライン エクスペリエンスを提供するには、まず次の 2 つの質問を自問してください。

• ユーザーにとって私のページが遅く見える原因は何ですか?

• 私に何ができる？

良いニュースは、ショッパー ページの速度を低下させる問題のほとんどはページで発生するため、それらを制御できることです。ここでは、小売 Web サイトで最も一般的なパフォーマンスの問題と、それらを追跡して修正する方法の概要を説明します。

Web ページが遅くなる原因は何ですか?パフォーマンスの問題の大部分は、次の 4 つの理由によって引き起こされます。

• トラッカーやアナライザーなどのサードパーティ

• スタイルシート

• カスタムフォント

• ページサイズ、特に画像サイズ

サードパーティのスクリプト

現在、一般的な小売 Web ページには、トラッカーや分析ビーコンなど、最大 75 個のサードパーティ スクリプトを含めることができます。

サードパーティは、（位置情報ビーコンを介して）コンバージョンを増やし、（分析タグを介して）これまでにないほどユーザーを理解できるようにすることで多くの価値を追加するため、すぐになくなることはありません。ただし、ページのレンダリング方法 (あるいは、ページがまったくレンダリングされるかどうか) に大きな影響を与える可能性があります。

できること: サードパーティのパフォーマンスを監視する

まずは、サードパーティが引き起こす可能性のある潜在的なパフォーマンス上の損害を理解するための積極的なアプローチを取ることから始めます。

測定されていないものを修正することはできません。これは SpeedCurve で作成したものです 専用のサードパーティダッシュボードそのため、サードパーティのパフォーマンスを一目で確認したり、個々のスクリプトを追跡したり、パフォーマンスの予算を設定します。

サードパーティのスクリプトのパフォーマンスを理解したら、履歴データを使用してベンダーと SLA を作成できます。

ケーススタディ： M&S はサードパーティのコンテンツに重点を置くことでパフォーマンスに革命をもたらします

画像とページサイズ

ページ サイズは必ずしもユーザー エクスペリエンスの低下と相関があるわけではありませんが、相関することはよくあります。多くの場合、最適化されていない大きな画像が原因です。

画像の最適化 (ユーザーに 1 MB のリソースを提供しないようにするため!) に加えて、最も重要な画像 (メインの製品画像など) ができるだけ早くレンダリングされるようにする必要もあります。

できること: 画像関連の指標のパフォーマンス バジェットを作成する

パフォーマンス バジェットとアラートは、パフォーマンスの低下に対処する優れた方法です 。パフォーマンスの予算編成は、チーム (マーケティング担当者、デザイナー、開発者全員) がユーザー エクスペリエンスとサイトの速度に関する原則に同意することから始まります。まず、追跡するメトリクスを決定し、次に過去のパフォーマンスに基づいてしきい値を設定する必要があります。

画像については、考慮すべきいくつかの指標を次に示します。

• 最大コンテンツ描画 – これは、ビューポート内の最大の視覚要素 (画像またはビデオ) のサイズです。 LCP は Google から提供されています コアネットワークメトリクスまず、これは Google の検索ランキング アルゴリズムの一連の指標であるため、追跡することをお勧めします。

• 画像サイズ – ページ上のすべての画像の合計サイズ。これは、最適化されていない大きな画像がページに追加されているかどうかを一目で確認できる優れた方法です。

• 画像リクエスト – ページ上の画像の総数。

ケーススタディ： Zillow がどのようにして限られた予算でより大きく、より速く、より魅力的になったのか

スタイルシート

スタイル シートは現代の Web に恩恵をもたらします。ブラウザーの互換性からデザインのメンテナンスや更新に至るまで、幅広いデザインの問題を解決します。スタイルシートがなければ、レスポンシブ デザインのような優れたものは実現できません。

ただし、スタイル シートの実行が不十分だと、パフォーマンスにさまざまな問題が発生する可能性があります。これらの問題には、CSS のダウンロードと解析に時間がかかりすぎること、スタイルシートの配置が不適切であるためにページの残りの部分が表示されないことなどが含まれます。

できること: ページの表示を妨げている可能性のあるスタイル シートを確認します。

繰り返しますが、測定しないものを修正することはできません。包括的な監視ツールを使用すると、次のことがわかります。

• ページにはスタイルシートがいくつありますか? そのうちページのレンダリングを妨げているスタイルシートはいくつありますか?

• この数字は増えましたか、それとも減りましたか?

• CSS リクエストのサイズはどれくらいですか?

• スタイルシートは各サードパーティに対してどのように動作しますか?

カスタムフォント

カスタム フォントを使用すると、デザイナーはデザインで使用されるフォントをこれまでにない方法で制御できます。このコントロールへの欲求が、カスタム フォントの人気が急上昇している理由です。しかし、この人気の裏にはパフォーマンスの代償が伴います。

フォントによっては大量の CSS コードが必要な場合もあれば、大量の JavaScript または外部ホスティングが必要なフォントもあります。これらはすべて、ページのレンダリングを大幅に遅くする可能性があります。

できること: フォント サイズとレンダリング速度を追跡する

フォント サイズとリクエスト数を追跡​​することに加えて、SpeedCurve を使用して最初の H1 要素のレンダリングがいつ終了したかを測定することもできます。 (SpeedCurve では、このインジケーターを Hero H1 と呼んでいます。 ヒーローのレンダリング時間 1つ。 ) Web サイトでカスタム フォントを使用している場合、それらのフォントは H1 コピーに適用される可能性が高いため、この指標はカスタム フォントのレンダリング速度を測定する効果的な方法になります。

私たちが追跡する他のすべての指標と同様に、次のことができます。パフォーマンス予算を作成し、しきい値を超えたときにアラートを受け取ります。

ケーススタディ： NerdWallet は H1 レンダー メトリクスを使用してフォントの読み込み速度を 30% 向上させます