漫画SEO用語集その8‐コアウェブバイタルとは

ユーザーエクスペリエンスはサイト運営者にとって非常に重要な課題です。現在のSEOではSXO（Search eXperience Optimization）と呼ばれるほど大きな課題となっています。

中でもコアウェブバイタルは2021年6月からサイトの評価基準にも組み込まれましたが、対策が難しいこともよくあり、多くのサイト運営者の頭を悩ます種になっています。コアウェブバイタルとは何か？どのようにすれば改善できるのかを解説いたします。

コアウェブバイタル（Core Web Vitals）とは？SEOへの影響と改善方法

コアウェブバイタルとは、ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みのことです。中でも特に重要な指標のことをコアウェブバイタルと呼びます。

コアウェブバイタルの指標には次の3つがあり、それぞれを改善することで優れたパフォーマンスを発揮するサイトに変えることが可能です。

LCP（最大コンテンツ描画）とは

LCP（最大コンテンツ描画）とは、ページ内の最大コンテンツ（最も有意義なコンテンツ）が描画されるまでの時間を意味します。LCPが2.5秒未満であれば良好とされています。

最大コンテンツはメインコンテンツと近しい意味ですが、実際には微妙に異なります。最大コンテンツはGoogleが最も有意義だと判断したコンテンツという意味ですので、自身でコンテンツの核だと思っていてもLCPには関係がないことがあります。

>>LCPとは

FID（初回入力遅延）とは

FID（初回入力遅延）とはページの応答性を意味します。ユーザーがページに入って最初にアクション（クリックなど）をした際の反応の遅延を意味しています。FIDは100ミリ秒未満であれば良好とされています。

CLS（累積レイアウト変更）とは

CLS（累積レイアウト変更）とはページがどの程度安定しているかを示しています。ページの読み込みに時間がかかる場合、表示し終わったと思っても時間差で画像が表示されてコンテンツが下にずれてしまうというケースがあります。CLSは0.1未満であれば良好とされています。

これがレイアウトがずれている（Layout Shift）ということです。レイアウトのズレが起きるということはユーザーがクリックしようとしたときに誤って意図しないボタンをクリックしてしまうというようなことが起こるため非常に重要な指標といえます。

コアウェブバイタルの重要性

Googleはたびたびコアアップデートを行い、検索精度を向上させていますが、2021年6月16日に行われたアップデート（通称、ページエクスペリエンスアップデート）ではコアウェブバイタルを評価基準の1つに導入しています。

つまり、コアウェブバイタルを改善しユーザーエクスペリエンスを向上させることはSEO対策になるということです。

※Googleはランキングへの影響があるのはモバイルに限るとしていますが、将来的にはパソコンのコアウェブバイタルもランキングに影響する可能性があること、ランキングに関係なく表示速度を改善することはユーザーファーストに繋がることから早めの対処を推奨します。

数値の確認方法

コアウェブバイタルの数値を確認する手法は複数ありますが、もっとも簡単に確認できる方法はPageSpeed Insightsを使うことです。

＞＞ページ表示速度を早くする

LCP、FID、CLSの3つの指標をそれぞれ数値で評価し、改善ポイントも出してくれるため非常に有用です。

コアウェブバイタルの改善方法

コアウェブバイタルの改善方法は多く、速度を突き詰めていくとキリがありません。重要なことは100点を取ることやライバルよりも早いことではなく、ユーザーにストレスを感じさせないことです。

改善点や手法はサイトによって大きく変わりますいので、ここでは代表的な改善点をご紹介いたします。

LCP（最大コンテンツ描画）の改善

LCPを改善するには速度を上げればよいため、代表的な改善方法としては次の3つが挙げられます。

具体的には次のような手法があります。

速度を早くするためには画像最適化が効果的で簡単なことが多いですが、それ以外にも高速化できる手法は様々です。時にはサーバー移転やサーバー環境の再設定などをすることで改善することもあります。

ファイルサイズの軽量化

画像最適化は効率的に速度改善ができる手法です。画像にはBMP、GIF、JPEG、PNGなど様々なものが使われています。PNGが比較的使われることが多いのですが、圧縮されずに使われているケースも多く、tinypngなどのツールを使うことで画像の質を損なうことなく圧縮することができます。

WebPなどの次世代画像を使うことで更に圧縮することが可能です。

※AVIFはWebPよりも新しい圧縮形式ですが、サポートしていない場合もありますので利用の際にはご注意ください。

重要なCSSのインライン記述

ウェブサイトの構築の際にはCSSでの記述は必須といえますが、表示速度のことを考えた場合には表示に重要な記述はインラインで記述し、残りはCSSに記述するということは有効な手法です。

不要CSSの削除

CSSはサイトの運用歴と共に長くなることがあり、圧縮されていないことも頻繁に見かけます。可能であれば一度CSSの不要部分を削除し、圧縮してみることをお勧めいたします。

不要javascriptの削除

javascriptはオープンで公開されているものも自作したものも圧縮されていないことがよくあります。一度記述してしまえば後は変更することが少ないことから、元データは残しておき、サイト表示に関わるものは圧縮してみることをお勧めいたします。

CDNの利用

CDNとはコンテンツ・デリバリー・ネットワークのことです。CDNはレイテンシー（アクセスしてから完全に読み込まれるまでの遅延のこと）を最小化するために利用されますので、CDNを導入することで表示速度が大きく改善することが見込まれます。

サーバー変更

数年前に作られたサイトの場合、当時のサーバーをそのまま使っているということもよくあります。サーバーが古いことが一概に悪いわけではありませんが、サーバーが古いということは設定やスペックが最新のものに劣ることがあり、サーバー変更をすることで速度が改善することがあります。

PHPなど環境の見直し

サーバーが古くなくても設定が古いということはあり得ます。古いサイトをそのまま移管した場合、PHPなどのバージョンも古いままということがあります。セキュリティ的にも速度の観点からもサポートされていないバージョンが使われていることは望ましくありません。

PHPのバージョンを変えただけで速度が30%改善したという例もありますので、現在の環境を見直すことも定期的に行いたい施策です。

FID（初回入力遅延）の改善

FIDはアクションに対する応答速度の改善をする必要があるため、該当するjavascriptを特定して修正する必要があります。

javascriptの読み込み遅延を行ったり、ポリフィル（古いブラウザで機能するようにするためのコード）を最小にしたり、長いタスクを分割分割したりすることで反応速度の延滞を短くすることができます。

CLS（累積レイアウト変更）の改善

CLSは多くの場合、画像か広告のサイズを指定していないことが起因して悪化します。きちんとしたWEB制作会社に依頼しても画像のサイズ指定はCSSだけで行っているということも頻繁に見られますのでCLS改善のためには、まずはソースコードを見直すところから開始してください。

画像サイズの設定

画像のサイズはCSSだけでも表示することができますが、CSSだけで表示してしまうと読み込みが終わるまでの間、画像の領域が確保されず、結果的に後から表示された画像の分だけコンテンツがずれるということが起こります。

サイトによっては作業量は多いですが、確実にCLSを改善させるためには必須です。

広告サイズの設定

画像と同様に広告が後から挿入されてコンテンツがずれるということもあります。内容は画像とまったく同じですが、広告の場合にはソースコードを自分で書き換えられないのが普通です。

【まとめ】コアウェブバイタルは意外に奥が深く、ここで紹介した手法を試してみても数値が改善しないということはあります。それでも改善しない場合には東京SEOメーカーにご相談ください。LCP、FID、CLSの3つに限らずSEOを広い視点で解決いたします。

格安SEOのTOPページへ戻る