Core Web Vitals - それらとは何か、それらを改善する方法は?

Google は 2020 年に Web Vitals と呼ばれる新しいプログラムを導入しました。 これは、品質信号に関するガイダンスを提供する手法を指します。 Google によると、これらの指標はウェブ上で優れたユーザー エクスペリエンスを提供するために不可欠です。 2021 年 5 月、Google は Core Web Vitals をプラットフォームの検索ランキングの指標として使用し始めました。

Core Web Vitals とは何ですか?

Core Web Vitals は、サイトでのユーザー エクスペリエンスを測定するための指標です。 ユーザーが Web サイトを操作する速度と、検索に基づいて得られる結果を測定します。 Core Web Vitals は、サイト訪問者がサイトをナビゲートするのがどれほど簡単でシームレスかを評価するシグナルとして機能します。

サイトとユーザー エクスペリエンスを改善すると、Core Web Vitals の指標を使用して、ページ エクスペリエンスのスコアが高くなります。 Google は、サイト所有者が知って取り入れなければならない 3 つの Core Web Vitals 指標を特定しています。 これらを以下に列挙します。

読み込み: 最大コンテンツ ペイント (LCP) とも呼ばれます。読み込みは、最大の要素がサイトに読み込まれて表示される速度を測定します。 これらの要素には、アニメーション、ビデオ、テキスト、画像などが含まれます。

インタラクティブ性: Google はこれを Cumulative Layout Shift (CLS) と呼んでおり、Web サイトのページに、サイトのコンテンツを使用するときにユーザーの注意をそらしたり妨げたりする可能性のある予期しない機能や紛らわしい動きがないようにします。

視覚的安定性: これは技術的には First Input Delay (FID) と呼ばれ、サイト訪問者が最初にページを操作したときのサイトのページの応答性のレベルを反映しています。 FID は、ブラウザがサイトのユーザーに対して結果を生成できる速度も測定します。

ウェブサイトのコア ウェブ バイタルを改善する方法

最初に行うことは、簡単な Web サイトのパフォーマンス分析を実行して、コア Web Vitals メトリックで Web サイトがどのように機能するかを確認することです。 この分析には、Google Search Console や Page Speed Insights など、さまざまなツールを使用できます。 分析を実行した後、サイトを改善するために次のヒントのいくつかを実装する必要があることに気付く場合があります。

• JavaScript の実行を減らす

FID 評価が低いということは、Web サイト ページが訪問者と 300 ミリ秒以上やり取りしていることを意味します。JavaScript の実行を減らして最適化すると、ブラウザが JavaScript コードを実行する時間間隔が短縮されます。 この結果、実行時間枠が短縮されます。 実行を減らすために、未使用の JavaScript を延期することをお勧めします。 サイトに未使用の JS があるかどうかを確認するには、次の手順に従います。

• サイトに移動し、任意の面を右クリックして [検査] を選択します。

• [ソース] タブをクリックし、下部にある 3 つの点を確認します。 「カバレッジ」ツールを追加し、ロード機能をクリックします。 ロードが完了するのを待ちます。ページ上で未使用の JS のボリュームが表示されます。

この知識があれば、JS の実行を削減することができます。 実行を減らす 1 つの方法は、コード分割を使用することです。 これはどのように作動しますか？ JavaScript バンドルをより小さなビットに分割します。 バンドルされた JS は、Web ページの読み込みに必要な HTTP リクエストが多すぎるのを防ぐためにバンドルされた結合ファイルです。

画像の圧縮と最適化

多くの Web サイトでは、画像がページの最大の要素です。 Web サイトが Loading メトリックを確実に通過するようにするには、サイトの画像を最適化することを検討する必要があります。 これにより、ウェブページが軽くなり、読み込み速度が大幅に向上します。

また、軽量化されたページは、ユーザー エクスペリエンス、LCP スコア、および検索エンジン結果のランキングも向上させます。 ページ サイズを縮小するには、Tiny JPG などのツールを使用して画像を圧縮します。 ページ全体のサイズを小さくしても、解像度や品質には影響しませんが、サイトの LCP 結果は改善されます。

グラフィックには PNG 形式を使用し、横長の画像には JPG を使用することをお勧めします。 画像の圧縮とは別に、サイトの画像に対して CDN (コンテンツ配信ネットワーク) を有効にすることもできます。

コンテンツ配信ネットワークは、Web のコンテンツを格納する世界中のサーバーのグループです。 これらのサーバーはさまざまな場所に分散しています。 ユーザーに最も近いサーバーからより高速に画像を配信できます。

遅延読み込みを実装する

サイトに画像を表示する場合、遅延読み込みの実装は非常に重要です。 この手法を使用すると、コア Web バイタル スコアとサイトのユーザー エクスペリエンスに悪影響が及ぶことはありません。 では、遅延読み込みとは何ですか? 遅延読み込みを使用すると、ユーザーがページを下にスクロールすると同時にサイトに画像を読み込むことができます。 これにより、サイトの読み込み速度が損なわれず、最高の LCP スコア レベルを達成できることが保証されます。 遅延読み込みには多くの利点があります。 それらには以下が含まれます：

• サイトのパフォーマンスの向上

• 帯域使用制限

• サイトの SEO の改善

• サイトの訪問者を維持し、直帰率を最小限に抑える

動画やアニメーション、画像などの重い要素を多く含むページでWebサイトを運営している場合、遅延読み込みを使用することが重要です。 このヒントを実装した後、以前の LCP スコアと、遅延読み込みを実装した後に取得した新しいスコアを比較できます。

埋め込みと画像に適切なサイズを使用する

0.1 を超える CLS スコアは不良と見なされます。 このような低いスコアの主な原因は、埋め込み、広告、寸法のない画像などの重い要素です。 サイトの CLS スコアを改善するには、ディメンションに注意してください。 画像と埋め込みに正確な幅と高さを使用すると、読み込みプロセス中にブラウザーがページに適切な量のスペースを割り当てることが容易になります。 YouTube 動画をウェブサイトに挿入するときは、画像と埋め込みに適切なサイズを設定してください。 YouTube の動画のサイズを変更してサイトに表示する方法は次のとおりです。

• YouTube にアクセスして、サイトに埋め込みたいビデオを開きます。

• 共有ボタンを探し、<> 埋め込みオプションを選択します。

• サイズを含む、ビデオに関するすべての詳細が表示されます。 コードをコピーして、サイトのバックエンドに貼り付けます。 これにより、サイトに正しく収まるように正しい幅と高さに変更されます。

最終的な考え

これらは、Web サイトの主要な Web Vitals を改善するために使用できる重要なヒントです。 この投稿では、コア Web バイタルの基本と、スコアを改善するために採用できるヒントについて説明しました。 スコアが向上すると、検索結果でのランキングが上がり、サイトの直帰率が大幅に向上します。