Top Trends in Cybersecurity for 2024 | 
eコマースサイトの読み込み時間を1秒未満にするのは大変な作業である。 Layer0では、プロセスをよりシンプルにしようと試みており、Layer0はこのマイルストーンを達成するのを支援するためにここにある。 私たちがここで行ったことは、あなたがあなたの生産現場が驚くほど速く、あなたがそれを達成するために最小限の時間を費やすことを確認するために従うことができるチェックリストを作成することである。
まず、速度の測定方法について説明する。
パフォーマンスの測定
**今回はSpeedCurve (SC)を使用したが、WebPageTestなどの製品を使用できる
LCP指標に着目して測定を行っている。 当社の目標：
- ホームページ<1.5s
- PLPからPDPへのナビゲーション：0.5s
また、次の3つのケースは消費者体験に影響を与えるため、 （a）オーガニック検索トラフィックの結果、PLP/PDPに直接移動し、 （b）カート/チェックアウトページに移動する場合–ビジネスの観点からクライアントにとって重要：
- ランディング・ページとしてのPLP
- ランディング・ページとしてのPDP
- PWA ->オリジン/レガシー（カート/チェックアウトなど）
スピードを大幅に向上させるために役立つ基本的なチェックから始めよう
- スケルトンが使用され、レイアウトが安定していることを確認する。
- ブラウザウィンドウの「Waiting for…」(または類似の)メッセージ(SCが使用するWebPageTestの既知の問題):ウォーターフォール画像を検査して、メトリクスの劣化の唯一の原因であるかどうかを確認する。
- 低解像度の画像から高解像度の画像への切り替えもSCのメトリックの劣化を引き起こす可能性がある–滝の画像を調べて、それが唯一の原因かどうかを確認する。
- カスタムコンポーネントからのアーティファクト(ベストプラクティスを念頭に置いて構築されたネイティブRsfコンポーネントと比較)–コンポーネントが過度に再レンダリングされる原因となるスタイリング/要素。 再度、滝の画像を点検して、目に見えるアーチファクトがないか確認する（例：低解像度の画像->> PLP-PDP遷移の画像カルーセル）
PLPからPDPへのナビゲーション
PLP(検索結果またはカテゴリ/ブランドページ)からPDPページへのナビゲーションは、消費者の旅の中で最も重要なナビゲーション要素である。 1回の購入で平均的なユーザーは8.8ページのPDPページに移動する。 このような高頻度で小さなページの速度低下があっても、ユーザーエクスペリエンスに大きな悪影響を与える可能性がある。 完璧なPLPからPDPへのユーザー体験を保証するためにあなたが従うことができるいくつかの事はここにある:
- 上折りページにスケルトンを使用し、レイアウトの安定性を確保する
- 折り上のコンテンツがユーザーのデバイスの画面の高さと一致することを確認する。
- キャッシュが適切に設定されていることを確認する。 これは、汎用ページデータをキャッシュし、ユーザー固有のデータポイントをキャッシュしないことを意味する。 (詳細については、キャッシュに関するガイドを参照)
- プリフェッチを使用する(詳細については、プリフェッチに関するガイドを参照)
- ForwardThumbnailコンポーネントのちらつきを避けるために、すべての場所で同じサムネイルインスタンスを使用する
- ページプロップでPLPからPDPにできるだけ多くの情報を渡して、PDPにその情報を表示する
ホームページの読み込み
ホームページは通常、ユーザーがウェブサイトとの最初のインタラクションである。 旅への素晴らしいスタートを確実にすることは、チェックアウトと注文の配置に幸せなユーザーフローを提供するための鍵である。 次はあなたがすばらしいホームページの経験を保障するために続くことができる事のいくつかである:
- キャッシュが適切に設定されていることを確認する。 これは、汎用ページデータをキャッシュし、ユーザー固有のデータポイントをキャッシュしないことを意味する。
- 折り内容の下に遅延ロード
- preconnectタグを使用する
- 画像を最適化する
- ページ読み込みが完了するまで水和を遅らせる
- その他の改善
PDPページ読み込み
ホームページとPLPからPDPへのナビゲーションの最適化に時間を費やすことは、ユーザーがPDPページ自体で素晴らしい体験をしていなければ価値がないだろう。 最も重要な情報をできるだけ早く利用できるようにし、すぐには見えないオブジェクトや実行可能でないオブジェクトを遅らせることが、PDPページ読み込みを最適化する鍵となる。 PDPページを最適化する際に留意すべきことのいくつかを以下に示す:
- API応答を含む汎用アセットとデータをキャッシュして、データを迅速に取得し、バックエンドシステムのボトルネックを軽減
- 折り目の下にコンテンツを遅延ロードする
- 最適化された最初の画像を使用してロード時間を短縮する。
- 個別のサムネールとピンチ/ズーム画像を使用し、要求に応じて画像をロードする。
PLPページ読み込み
- PDPイメージをプリロードして、上方向の結果を得る。
- 折り目の下にコンテンツを遅延ロードする
- 背景色の変更やその他の視覚的要素など、PLPページの変更を判断する要求を減らすか回避する。
その他のポインタ
上記の方法は、ユーザーがジャーニーを通じて対話するほとんどのことをカバーしている。 しかし、プラットフォームには見えるもの以上のものがある。 プラットフォームの内部動作が最適化されていることを確認することが、私たちが取るべき次のステップである。 パフォーマンスのさらなる向上を得るためにチェックすべき点は次のとおりである。
- TTL: analyze=True NPM run buildを使用してバンドルサイズを確認
- FCP:顧客がWebFontを使用することを選択した場合、LHスコアが低下する可能性がある。
- 速度インデックス：画面上にポップアップが表示されると、ページの速度インデックスが減少する
- モジュールスコープでの長時間の実行タスク(クライアント側)を避ける。
- Reactフックは不必要な再レンダリングを行いやすい。 メトリクスに影響を与える可能性は低いが、低迷感のあるウェブサイトを作る。
- ローカルマシンのLHスコアやSpeedCurveの結果ではなく、PSIスコアを使用してコード変更の影響を理解する。 実働ビルドで4Gモードを使用して、現実的なLHスコアを取得する。
