Home ハウツー eコマースサイトの読み込みを1秒未満にする
Applications

eコマースサイトの読み込みを1秒未満にする

About The Author

Outline

eコマースサイトの読み込み時間を秒以下にすることは、大変な作業です。 Layer0では、プロセスをよりシンプルにすることを試みました。Layer0は、このマイルストーンの達成を支援します。 私たちがここで行ったことは、プロダクションサイトが非常に高速で、それを達成するために費やす時間を最小限に抑えるために従うことができるチェックリストを作成することです。

まず、速度の測定方法について説明します。

パフォーマンスの測定

**この例ではSpeedCurve (SC)を使用しましたが、WebPageTestやその他の製品を使用できます。
私たちは、測定のためにLCPメトリクスに焦点を当てています。 当社の目標は次のとおりです。

  • ホームページ < 1.5秒
  • PLPからPDPへのナビゲーション:0.5秒

また、次のような3ケースにも留意することが重要です。これは、次のような場合に消費者の体験に影響を与えるためです。 (A)オーガニック検索トラフィックの結果としてPLP/PDPに直接移動し、 (b)カート/チェックアウトページに移動する場合–ビジネスの観点からお客様にとって重要:

  • ランディングページとしてのPLP
  • ランディング・ページとしてのPDP
  • PWA -> オリジン/レガシー(例:カート/チェックアウト)

まずは、大幅なスピード向上に役立つ基本的なチェックから始めましょう。

  • スケルトンが使用され、レイアウトが安定していることを確認します。
  • 「待機中…」 ブラウザーウィンドウの(または類似の)メッセージ(SCが使用するWebPageTestの既知の問題) :ウォーターフォールの画像を調べて、メトリックの劣化の唯一の原因であるかどうかを確認します。
  • 低解像度の画像から高解像度の画像への切り替えは、SCのメトリックの劣化を引き起こす可能性があります。ウォーターフォール画像を調べて、それが唯一の原因であるかどうかを確認してください。
  • カスタムコンポーネントからのアーティファクト(ベストプラクティスを念頭に置いて構築されたネイティブRsfコンポーネントと比較)–コンポーネントが過度にレンダリングされる原因となるスタイリング/要素。 繰り返しになりますが、ウォーターフォール画像を調べて、目に見えるアーチファクトがないかどうかを確認します(低解像度画像- PLP-PDPトランジションの画像カルーセルなど>>)。

PLPからPDPへのナビゲーション

PLP(検索結果またはカテゴリ/ブランドページ)からPDPページへのナビゲーションは、消費者の旅全体の最も重要なナビゲーション要素です。 購入するたびに、平均的なユーザーは8.8のPDPページに移動します。 このような高い頻度でわずかなページの速度低下でも、ユーザーエクスペリエンスに大きな悪影響を与える可能性があります。 ここでは、PLPからPDPへの完璧なユーザー体験を保証するために実行できるいくつかの事項を紹介します。

  • 上の折りページにスケルトンを使用し、レイアウトの安定性を確保する
  • 折りの上のコンテンツが、ユーザーのデバイスの画面の高さと一致していることを確認します。
  • キャッシュが適切に構成されていることを確認します。 これは、一般的なページデータをキャッシュし、ユーザー固有のデータポイントをキャッシュしないことを意味します。 (詳細については、キャッシングに関するガイドをご覧ください)
  • プリフェッチを使用する(詳細については、プリフェッチに関するガイドをご覧ください)
  • ForwardThumbnailコンポーネントでちらつきを避けるために、すべての場所で同じサムネイルインスタンスを使用します。
  • PLPからPDPに情報を渡すことで、その情報をPDPに表示することができます。

ホームページの読み込み

ホームページは通常、ユーザーがWebサイトで行う最初のインタラクションです。 旅の素晴らしいスタートを確実にすることは、チェックアウトと注文の配置に至るまでの幸せなユーザーフローを提供するための鍵です。 以下は、優れたホームページエクスペリエンスを実現するために実行できるものの一部です。

  • キャッシュが適切に構成されていることを確認します。 これは、一般的なページデータをキャッシュし、ユーザー固有のデータポイントをキャッシュしないことを意味します。
  • 折り曲げ内容の下に遅延読み込み
  • preconnectタグを使用
  • 画像の最適化
  • ページの読み込みが完了するまでハイドレーションを遅らせる
  • その他の改善点

PDPページ読み込み

ホームページとPLPからPDPへのナビゲーションの最適化に時間を費やすことは、ユーザーがPDPページ自体で優れたエクスペリエンスを持っていない場合には価値がありません。 最も重要な情報をできるだけ早くユーザーが利用できるようにし、すぐには表示されないオブジェクトや実行可能でないオブジェクトを遅延させることが、PDPページの読み込みを最適化するための鍵となります。 PDPページを最適化する際に留意すべき点を以下に示します。

  • API応答を含む一般的なアセットとデータをキャッシュすることで、データを即座に取得し、バックエンドシステムのボトルネックを軽減します。
  • 折り目の下のコンテンツを遅延読み込み
  • 最適化された最初のイメージを使用して、ロード時間を短縮します。
  • 個別のサムネールとピンチ&ズーム画像を使用し、必要に応じて画像のみをロードします。

PLPページロード

  • PDP画像を事前にロードして、折りの上の結果を確認します。
  • 折り目の下のコンテンツを遅延読み込み
  • 背景色の変更やその他の視覚的要素など、PLPページの変更を決定する要求を減らすか、回避します。

いくつかのポインタ

上記の方法は、ユーザーが旅を通じてやり取りするほとんどのものをカバーしています。 しかし、プラットフォームには目に見えるもの以上のものがあります。 プラットフォームの内部動作が最適化されていることを確認することが、次のステップです。 次に、パフォーマンスのさらなる向上を得るために確認すべき点をいくつか示します。

  • TTL:ANALYZE = True NPM run buildを使用してバンドルサイズを確認します
  • FCP:お客様がWebFontの使用を選択した場合、LHスコアが低下する可能性があります。
  • 速度インデックス:画面にポップアップが表示されると、ページの速度インデックスが減少します。
  • モジュールスコープ(クライアント側)での長時間の実行は避けてください。
  • Reactフックは不必要な再レンダリングを行う傾向がある。 指標に影響を与える可能性は低いですが、低迷しているウェブサイトを作ります。
  • ローカルマシンのLHスコアやSpeedCurveの結果ではなく、コード変更の影響を理解するために、PSIスコアを使用します 。 実際のLHスコアを取得するには、生産ビルドで4Gモードを使用してください。