Core Web Vitals をマスターする: ユーザー エクスペリエンスを向上させるためのガイド

公開: 2023-03-21

e コマースが引き続きオンライン市場を支配しているため、企業は Web サイトの最適化に関して先を行く必要があります。 近年出現した重要な要因の 1 つは、Core Web Vitals の概念です。 2020 年、Google はこれらの重要なウェブサイト要素に関する特定の指標を確立し、e コマース ビジネスにウェブサイトのランキング向上へのより簡単な道筋を提供しました。 しかし、Core Web Vitals とは正確には何であり、企業はそれを最適化して最大の効果を得るにはどうすればよいでしょうか? この記事では、Core Web Vitals を詳しく見て、それらを最適化するために不可欠なツールを共有して、e コマース Web サイトが競合他社の一歩先を行くことができるようにします。

関連記事: ビジネス オーナーが Web の重要な指標について知っておくべき 7 つのこと

Core Web Vitals が重要な理由

1. Core Web Vitals はサイトの Google 検索ランキングに影響を与えます

2.優れたユーザーエクスペリエンスを提供するために不可欠です

3. Core Web Vitals を最適化すると、サイトのトラフィックと収益が増加します

Core Web Vitals を最適化することは、オンライン ストアの所有者と開発者が最適なユーザー エクスペリエンスを提供し、Google 検索結果で上位にランク付けし、最終的に収益を増やすために不可欠です。 これら 3 つのコア メトリクス – 最大コンテンツ ペイント (LCP)、初回入力遅延 (FID)、および累積レイアウト シフト (CLS) – は、Web サイトの読み込み速度、インタラクティブ性、視覚的表現に基づいています。

これらの指標に優先順位を付けることで、ウェブサイトは顧客にスムーズで応答性が高く、視覚的に魅力的なエクスペリエンスを提供できます。 Web サイトを設計または最適化する際に、Core Web Vitals を見落とさないでください。これは、優れたユーザー エクスペリエンスと優れたユーザー エクスペリエンスの違いとなり、最終的に収益に影響を与える可能性があるためです。

最大コンテンツ ペイント (LCP) とは

Largest Contentful Paint (LCP) は、画像やテキスト ボックスなど、Web ページの最も重要なコンテンツ要素の読み込み時間を測定する重要な指標です。 これは、シームレスなユーザー エクスペリエンスを提供するために不可欠な一連の指標である Core Web Vitals の重要なコンポーネントの 1 つです。 Web サイトの LCP を最適化すると、ページの読み込み時間が短縮され、全体的なユーザー エクスペリエンスが向上し、顧客の維持と獲得が向上します。

Perspective では、Core Web Vitals の LCP を改善するためのリクエストを頻繁に受け取ります。 お客様の 1 人に対して行った、Largest Contentful Paint (LCP) の最適化の例を以下に示します。

1. 最適化前の最大のコンテンツ ペイント

2. 最適化後の最大のコンテンツ ペイント

また読む: Acer vs Lenovo Chromebooks: どちらがあなたに適していますか?

Largest Contentful Paint が低い最も一般的な原因は次のとおりです。

1. サーバーの応答時間が遅い

2. 最適化されていない JS および CSS

3. リソースの読み込みが遅い

4. クライアント側でのレンダリングが遅い。

Largest Contentful Paint を増やす方法

Largest Contentful Paint Core Web Vitals

私たちの仕事に常に適用されている最適化方法の小さなリストを作成したため、次のことをお勧めします。

1. 使用していない JS コードを削除し、本番モードでファイルを最小化します。

2. CSS ルールをモジュール (ブロック) に記述して、一部のセレクターのスタイル設定が他のセレクターを停止しないようにすることをお勧めします。 また、セレクターの長いチェーンを作成しないことをお勧めします。 テストするすべての CSS ファイルまたはライブラリは、CDN 経由でダウンロードするのではなく、ローカルに保存する必要があります。

3. 読み込みを高速化するために画像を圧縮し、新しい形式を使用します。 たとえば、JPEG を、品質を落とさずに 1/3 サイズの WebP に変換します。

4. レスポンシブ画像 (リンク) を使用して、ダウンロード速度とユーザー エクスペリエンスの観点から画像を最適化することをお勧めします。 ここで重要なポイントがあります。 img タグには 2 つの重要な属性があります。

1. src – 元の画像ソースを示します。 src 属性の画像は検索エンジンによってスキャンされ、ランキングで考慮されるため、ここで最高品質の画像を指定する必要があります。

2. srcset – イメージのさまざまなバージョンを指定できます。 ブラウザーは、srcset 属性の画像から、実行するデスクトップ デバイスまたはモバイル デバイスの画面サイズに応じて、読み込んで表示する画像を選択します。

5. <img> タグ属性に loading="lazy" を追加することはお勧めしません。

レイジー属性を削除して、Largest Contentful Paint を増やします

累積レイアウトシフト（CLS）とは

Cumulative Layout Shift (CLS) は、ページ読み込み中の予期しないレイアウト シフトの範囲を定量化する重要な視覚的安定性指標です。 これは、0.1 のしきい値を超えるすべてのレイアウト シフト スコアの合計によって測定されます。 現代の Web 開発ではユーザー エクスペリエンスが中心的な役割を果たしているため、CLS の改善は企業にとって最優先事項となっています。 したがって、クライアントがこの主要業績評価指標の改善を頻繁に要求するのは当然のことです。

また読む: 2023年のライブカジノの成長

Cumulative Layout Shift (CLS) が不十分である最も一般的な原因は何ですか?

視覚的な安定性インジケーターは、スムーズでシームレスなユーザー エクスペリエンスを確保するために重要です。 ただし、視覚的な安定性の低下は、いくつかの技術的要因によって引き起こされる可能性があります。 一般的な原因には、画像やマルチメディア ファイルのサイズ変更、GraphQL クエリ、最適化されていないカルーセルなどがあります。

画像とマルチメディア ファイルの不適切なサイズ設定

画像またはマルチメディア ファイルのサイズが指定されていない場合、ブラウザはアイテムの読み込み時に適切な容量を割り当てることができません。 これにより、ページ レイアウトが絶えず変化し、ユーザー エクスペリエンスが低下する可能性があります。

最適化されていないグラフクエリ

プログレッシブ Web アプリ (PWA) で画像または GraphQL ブロックを読み込む場合、スペースを確保できないと、読み込み後にページが「ジャンプ」する可能性があります。 これにより、レイアウト シフトが不十分になり、パフォーマンス メトリックに悪影響を与える可能性があります。

最適化されていないカルーセル

スムーズでなく結合されていないアニメーションを使用する最適化されていないカルーセルは、ページ レイアウトの再計算をトリガーし、累積レイアウト シフト (CLS) スコアが低くなる可能性があります。 わずかな変化はユーザーにはほとんど気付かれないかもしれませんが、ページの全体的なレイアウトの変化と視覚的な安定性に大きな影響を与える可能性があります。

視覚的な安定性インジケーターと累積レイアウト シフトを改善する方法

How to improve visual stability indicator and Cumulative Layout Shift Core Web Vitals

プレースホルダーの使用

プレースホルダーの実装は、Web サイトの知覚パフォーマンスを向上させるために広く採用されている手法です。 プレースホルダーは、ダウンロードが進行中で、サイトが正しく機能していることを示す視覚的な合図として機能します。 画像の最も効果的なアプローチは、高さと幅の属性を設定することです。

プレースホルダーを使用して Core Web Vitals のパフォーマンス スコアを改善する

この戦略により、ブラウザーは画像を完全に読み込む前に必要なスペースを確保できるため、予期しないレイアウトの変更を防ぐことができます。 これは、img タグを使用してこの手法を実装する例です。

<img data-src=”image.webp” width=”380” height=”120” alt=”image”>

高さと幅の属性を定義することで、ブラウザーは画像にスペースを割り当て、画像が読み込まれたときにレイアウトがずれないようにすることができます。 その結果、ユーザーはよりスムーズで視覚的に安定したブラウジング体験を体験できます。

フロントダッシュプレイ: スワップ

最適な Cumulative Layout Shift (CLS) スコアを達成するために、開発者は font-display: swap プロパティを利用して、カスタム フォント ファイルが完全に読み込まれる前にシステム フォントでテキストを表示できます。 必要な CSS フォント ファイルの font-face ルールでは、フォント ファイル パスを指定し、font-display: swap プロパティを含める必要があります。

font-display: swap プロパティを使用して font-face ルールを定義する方法の例を次に示します。

@font-face {Font-family: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

font-display: swap プロパティを使用すると、ブラウザーは、カスタム フォント ファイルが完全に読み込まれるまで、システム フォントでテキストをすぐに表示します。 この手法により、予期しないレイアウトの変更を防ぎ、ページの視覚的な安定性を向上させ、ユーザー エクスペリエンスを向上させることができます。

また読む：暗号通貨の価値に対する世界経済状況の影響

CSS 変換

CSS 変換機能は、開発者がサイトのパフォーマンスとユーザー エクスペリエンスを向上させるために利用できる影響力のあるツールです。 たとえば、CSS 変換を使用すると、画像カルーセルの読み込みに関連する問題を軽減できるため、より高速でユーザー フレンドリーなブラウジング エクスペリエンスが実現します。

GraphQL HTML 要素を介して CMS ブロック (特に PWA プロジェクト) の読み込みを最適化する場合は、高さを固定した CSS プロパティを設定することをお勧めします。 このアプローチは、予期しないレイアウトのシフトを防ぎ、ロード後に視覚的に安定したページを確保するのに役立ちます。

これらの手法を実装することで、企業は Core Web Vitals スコアを改善し、よりスムーズで楽しいユーザー エクスペリエンスを提供できます。 最近のケースの 1 つでは、CSS ファイルに font-display: swap プロパティを追加し、最小高を設定し、フォントの読み込み (@font-face) を最適化することで、CLS スコアを大幅に改善しました。

1. コア ウェブ バイタルの最適化前のオンライン ストア

2. コア ウェブ バイタル最適化後のオンライン ストア

最初の入力遅延 (FID) とは何ですか?

最初の入力遅延 (FID) は、Web サイトの対話性を測定する重要な指標です。 First Input Delay は、ボタンのクリックやフォーム フィールドへの入力など、ユーザーがページを最初に操作したときに、サイトが応答するのにかかる時間を測定します。

Magento 2 で FID を使用する

Magento 2 では、ライブ チャット ボタンのクリック、バスケットへの製品の追加、購入の完了など、多くのユーザー インタラクションがサイトの FID に影響を与える可能性があります。 これらのインタラクションが反応せず、ユーザーにすぐにフィードバックを提供しない場合、ユーザー エクスペリエンスが遅くイライラする結果になる可能性があります。

最適なユーザー エクスペリエンスを確保するには、100 ミリ秒未満の FID スコアを達成することが不可欠です。 これは、JavaScript 実行時間の最小化、サードパーティ スクリプトの最適化、サーバー応答時間の最適化など、さまざまな最適化手法によって実現できます。 FID を最適化することで、企業は、ユーザーの関与と満足を維持する、より反応が良く魅力的な Web サイトを提供できます。

最初の入力遅延を最適化する方法

タスクの分解

最初の入力遅延 (FID) を強化するための推奨されるアプローチは、より長いタスクをより小さく、より管理しやすいサブタスクに分割することです。 時間のかかるタスクは、プライマリ スレッドに過剰な負荷をかけ、ユーザー入力の処理と実行を妨害する可能性があります。 フローを 50 ミリ秒以上妨げるコード セグメントは、時間のかかるタスクと見なされます。

FID を確認するには、実際の条件下で測定を行う必要があります。これは、正確な測定値を得るためには、ユーザーが Web ページを実際に操作することが不可欠であるためです。

実際の条件でのテスト

最初の入力遅延 (FID) を正確に測定するには、実際の条件下でパフォーマンスを測定する専用ツールを使用することをお勧めします。 そのようなツールには次のものがあります。

1. PageSpeed Insights テスト;

2. Search Console (Core Web Vitals レポート);

3. Chrome ユーザー エクスペリエンス レポート。

FID はユーザーの操作を必要とするため、ラボ環境でテストを実施することは現実的ではありません。 対照的に、フィールド メトリクスは、ユーザーの行動を分析することで、実際のパフォーマンスを捉えます。 ただし、最初のコンテンツ ペイント (FCP) と対話までの時間 (TTI) の間の期間を評価するメトリックである合計ブロッキング時間 (TBT) は、実験室の設定で測定でき、フィールド条件の FID とよく相関しています。 TBT は、対話性に関連する問題の特定にも長けています。 したがって、実験室環境で TBT を強化する最適化は、ユーザーの FID も改善します。 Lighthouse は、TBT を効果的に測定できるツールです。

また読む：カスタムShopifyストアフロントを構築するためのステップバイステップガイド

オンデマンドでのダウンロードを有効にする

サードパーティ コードを使用して、Web ページのオンデマンド ダウンロードを有効にすることができます。 たとえば、ダウンロード オン デマンドを有効にして、ページの下部にあるバナーまたは広告がビューの近くまでスクロールした場合にのみ表示されるようにすることができます。 主なアイデアは、ユーザーに最も重要な価値を提供する Web 要素をダウンロードすることであり、回線の最後でダウンロードできる Web 要素を優先的にダウンロードすることではありません。

JAVASCRIPT を最適化する

Web サイトのパフォーマンスを向上させるには、不要な JavaScript ファイルを削除することが重要です。 推奨されるアプローチの 1 つは、必要になるまで JavaScript ファイルのダウンロードを延期することです。 この手法により、最初はブラウザーが HTML や CSS などの重要な Web 要素を取得できるようになります。 これに続いて、スクリプトを評価できるため、読み込み時間が短縮されます。 この戦略の採用は、多くの Magento ストアで使用されている Mega Menu 拡張機能など、実質的な JavaScript 拡張機能を備えた Web サイトで特に役立ちます。 この手法により、Web サイトの所有者は読み込みプロセスを合理化し、より効率的なユーザー エクスペリエンスを提供できます。 したがって、未使用の JavaScript を削除することは、Web サイトのパフォーマンスを向上させるために考慮すべき基本的な最適化手法です。

Core Web Vitals を改善するためのその他の指標

More indicators to improve Core Web Vitals user experience audit

上記の 3 つの主要なコア ウェブ バイタルに加えて、いくつかの補足的な指標が存在します。

最初のコンテンツ ペイント (FCP)

First Contentful Paint (FCP) は、ページが最初の画像またはテキスト ブロックを表示するのにかかる時間を測定するのに役立つ重要な指標です。 このメトリクスには、DNS リクエスト、サーバー リクエスト、サーバー側の操作、および DOM プライマリ レンダリングの処理時間が含まれます。 DNS やネットワーク速度などの要因は制御できませんが、サーバー側のタスクの処理時間を短縮し、スタイルとスクリプトの読み込みを最適化すると、パフォーマンスに大きな影響を与える可能性があります。 具体的には、ウェブページのヘッド セクションに重要なスタイルのみを含めることを優先し、可能であればリンク タグの代わりにスタイル タグを使用して不要なサーバー リクエストを最小限に抑えることをお勧めします。

ウェブサイトのパフォーマンスをさらに向上させるために、Google アナリティクスはユーザーの行動とエンゲージメントに関する豊富な情報を提供します。 たとえば、ユーザー タイミング レポートを使用することで、Web サイトの所有者は、ページの読み込み、ユーザー インタラクション、その他のカスタム イベントなど、特定のアクションやイベントの期間を監視できます。 このデータは、最適化が必要な Web サイトの領域を特定し、加えられた変更の効果を追跡するのに役立ちます。

スピード インデックス メトリック

FCP は最初の要素が表示されるまでの時間を測定しますが、スピード インデックス (SI) メトリックは、ページがユーザーに完全に表示されるまでに必要な時間を考慮して、Web ページの全体的な読み込み速度を把握します。 ページ読み込みパフォーマンスの包括的な概要を提供し、ネットワーク速度とサーバー処理時間の影響を考慮します。 FCP と SI を組み合わせて活用することで、サイトの所有者は Web サイトのパフォーマンスの包括的な概要を取得し、ユーザー エクスペリエンスを向上させるための適切な措置を講じることができます。

SI は、ネットワーク速度、サーバー処理時間、ロードされるリソースのサイズなど、Web ページのパフォーマンスに影響を与えるさまざまな要因を考慮します。 このメトリックは、読み込みプロセス中に一定の間隔で Web ページの視覚的な完全性を計算し、ページ速度を表すスコアを割り当てます。 SI スコアが低いほど、ページの読み込みが速くなり、ユーザー エクスペリエンスが向上します。

SI を改善するために、Web 開発者は、CSS や JavaScript などの外部リソースの最小化、画像サイズの縮小、ブラウザー キャッシュの活用によるリソースの読み込みの高速化など、さまざまな最適化手法を使用できます。 Google Analytics や WebPageTest などのツールを使用して SI スコアを分析することにより、Web サイトの所有者は、最適化が必要な領域を特定し、Web サイトのパフォーマンスを改善するために変更を加えることができます。 最終的に、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させることで、Web サイトの所有者はエンゲージメントを改善し、コンバージョンを増やし、ビジネスを成長させることができます。

次のペイントへの相互作用

Interaction to Next Paint (INP) は、ユーザーが Web ページを操作してから視覚的な反応が表示されるまでの時間を測定する重要な指標です。 この指標は、ソーシャル メディア プラットフォームや e コマース サイトなど、頻繁なユーザー操作を必要とするページに特に関連しています。 INP は、Web ページの応答性に関する貴重な洞察を提供し、ユーザー エクスペリエンスを向上させるために最適化が必要な領域を特定するのに役立ちます。

INP は、現在の Web ページ訪問中の最新のユーザー インタラクションを選択し、Web ページが視覚的な更新で応答するのにかかった時間を測定することによって計算されます。 この更新には、新しい画像やテキスト ブロックの外観、要素の位置やサイズの調整、複雑なアニメーションの実行など、さまざまな変更が含まれる場合があります。 INP は、ユーザー インタラクションから視覚的な反応までの時間を測定することで、Web ページの知覚パフォーマンスに関する貴重な洞察を提供し、最適化が必要な領域を特定するのに役立ちます。

INP を改善するために、Web 開発者は、JavaScript の使用を最小限に抑えたり、画像やビデオのサイズを縮小したりするなど、さまざまな最適化手法を実装できます。 さらに、Intersection Observer API や Web ワーカーなどの最新の Web テクノロジを利用すると、リソースを大量に消費するタスクをオフロードし、メイン スレッドのワークロードを削減することで、パフォーマンスを向上させることができます。

また読む：フランス語の翻訳はあなたのビジネスにどのようにプラスの影響を与えますか？

最初の一口までの時間 (TTFB)

Time to First Byte (TTFB) は、ページ パフォーマンスの重要な指標です。 リクエストが送信された後、サーバーがデータの最初のバイトを受信するのにかかる時間を表します。 TTFB 値は、ネットワークの待ち時間、サーバーの処理時間、Web サイトのコードの複雑さなど、さまざまな要因の影響を受けます。 TTFB 値が低いほど、読み込み時間が短くなり、ユーザー エクスペリエンスが向上するため、望ましい値です。 Web サイトの理想的な応答時間は 250 ～ 350 ミリ秒ですが、500 を超えると応答時間が長いと見なされ、Web サイトのパフォーマンスに悪影響を及ぼす可能性があります。

TTFB 値を改善するために、Web サイトの所有者はさまざまなツールや手法を使用できます。 そのような手法の 1 つがクエリ キャッシングです。これは、頻繁にアクセスされるデータをキャッシュに格納することで、より高速なアクセスと取得を可能にします。 Varnish のようなツールは、サーバーとユーザーの間のキャッシュ レイヤーとして機能し、Web サイトの速度を向上させ、サーバーの負荷を軽減します。 PWA プロジェクトの場合、Service Worker を使用して HTML コンテンツをキャッシュできます。これは、コンテンツが変更されたときに更新できるため、頻繁にアクセスされるコンテンツへのアクセスが高速になります。

Magento プロジェクトの場合、ページ全体のキャッシュも TTFB 値を改善できます。 フルページ キャッシュを使用すると、ページ全体をキャッシュできるため、サーバーで大量のコードを実行してデータベースから情報を取得する必要がなくなります。 フルページ キャッシュを有効にすると、ブラウザーはキャッシュからページを直接読み取ることができるため、読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。

したがって、できるだけ多くのページとブロックを作成するのではなく、できるだけ減らす必要があります。

Core Web Vitals の監査に推奨されるツール

Lighthouse は、開発者が Web サイトの速度と対話性の問題を診断するのに役立つ強力な Web パフォーマンス監査ツールです。 最新の Web テクノロジーとベスト プラクティスを組み合わせて、詳細な Web サイト パフォーマンス分析を提供し、実用的な最適化の洞察を提供します。 Lighthouse 監査を実行することで、開発者は、サイトの速度、対話性、およびその他の主要な指標を改善する機会をすばやく特定できます。

Lighthouse レポートにはいくつかのセクションがあります。

1. サイトのパフォーマンス:サイトのダウンロード速度の分析

2. 機能:サイトを高速化し、パフォーマンスを向上させる方法について説明します。

3.診断：何に注意を払い、修正する必要があるかを示します

4. プログレッシブ Web プログラム:詳細な監査

5. 可用性: UX デザインを改善する方法に関するセクション

6. ベスト プラクティス:ほとんどのサイトを確実に最適化するための最良の方法

監査を実行する前に、[ページの読み込みを分析] ボタンを使用して、監査レベルを興味 (パフォーマンス、SEO、アクセシビリティなど) に合わせて調整できます。

監査が開始されると、監査レポートが新しいウィンドウに表示されます。 また、PageSpeed Insights Web サイトで測定することもできます。

Core Web Vitals の指標は、過去 28 日間にわたって取得されることを忘れないでください。

また読む：最高のApple MacBook AirおよびMacBook Proラップトップは何ですか？

結論

結論として、Core Web Vitals 監査チームに連絡して、オンライン ショップの優れたユーザー エクスペリエンスを確保することを検討してください。 Core Web Vitals 指標は抽象的なように見えるかもしれませんが、サイトをよりユーザーフレンドリーにします。 さらに、これらの指標はサイトのコードの機能と明確に関連しているため、比較的簡単に改善できます。

私たちの経験に基づくと、これらの指標を最適化すると、ランキングとコンバージョン率が急速に向上する可能性があります。 Core Web Vitals を測定することで、最適化が必要な領域を特定し、Web サイトの全体的なユーザー エクスペリエンスを向上させることができます。 そのため、Core Web Vitals 監査チームに連絡して、オンライン ビジネスに与えるプラスの影響を確認してください。