最終更新日：2023.06.30
コアウェブバイタルは、Webサイトにとって大切な評価指標の一つになります。著しく評価が低い場合には、SEOやアクセスするユーザー全体に悪影響を及ぼすと言っても過言ではありません。
すぐにでも改善したいと思われることは当然のことではありますが、改善箇所が多い場合にはそれなりの作業量となるため、一度に全てを改善することは難しい場合も多々あります。
まずは評価の内容や改善点を把握し、コアウェブバイタルを改善するための道筋を立てましょう。
コアウェブバイタルはどのように評価されるのか？
コアウェブバイタルは、Googleから発表されたWebサイトのユーザーエクスペリエンスに関する評価指標です。「Google Search Console（グーグルサーチコンソール）」や「PageSpeed Insights（ページスピードインサイト）」などで確認することができ、主に3つの指標により評価されています。
- LCP（Largest Contentful Paint）……画面内の最も大きな要素が表示されるまでの時間
- FID（First Input Delay）……ページのインタラクティブ性を測定するための指標
- CLS（Cumulative Layout Shift）……視覚的な安定性を測定するための指標
コアウェブバイタルの改善は一つ一つ地道な対応が必要
コアウェブバイタルを確認することで、現在の評価や各指標に関する「改善できる項目」が提示されます。それらを細かく確認し、具体的な改善点を洗い出しましょう。
Webサイトによって改善すべき点は様々であり、一言にコアウェブバイタルの改善と言っても、改善点が多い場合には一度に全てを改善することはできません。特に効果のありそうな項目や取り組みやすい項目から着手し、一つ一つ地道に改修していくことが大切です。
中にはWeb制作に関する技術・知識がないと対応が難しいものもありますので、そういった項目は無理な作業は極力控え、Web制作会社などにご相談されることをお勧めします。
LCP（Largest Contentful Paint）の改善
LCPとは、ページが読み込まれてから、最も大きいコンテンツ（画像・動画・テキストなど）が表示されるまでに掛かる時間を測定しています。LCPに関する「改善できる項目」としては、以下のような項目がよく挙げられます。
- レンダリングを妨げるリソースの除外
- 使用していない JavaScript の削減
- 使用していない CSS の削減
- CSS の最小化
不要なものを削除する
Webサイトを表示させるには、HTMLやPHP、CSSやJavaScript、画像・動画、Wordpressのプラグインなど、様々な要素を読み込む必要があります。これらのうち、表示させるページにとって、本当は必要ないものも一緒に読み込んでいる場合があります。不要なものまで読み込んでしまうと、その分ページやコンテンツの表示も遅くなります。
不要なコードや使用していないプラグインは削除したり、コードの分割やバンドル化を行い、リソースの読み込みを最小限に抑えましょう。
CSSやJavaScriptなどの読み込み方法を調整する
CSSやJavaScriptなどは、その読み込みが終わるまでHTMLの読み込みが始まりません。それらのリソースが重たい場合は表示遅れの原因となることがあります。その場合は、重たいリソースを分割して一部をインライン要素として記述したり、読み込みが後回しで良いものは非同期で読み込むなどといった工夫が必要になります。
しかし、これらの対策はソースに直接手を加えることにもなりますので、Web制作の技術・知識がないと難しい作業となります。ご自身での作業が困難な場合はWeb制作会社などに依頼をすることをお勧めします。
画像や動画の圧縮や遅延読み込み
画像や動画は圧縮し、容量を軽くした状態のものを使用しましょう。あまり圧縮率を高くしすぎると画像や動画が荒れることもあるため、見た目に変化がない程度に留めておくのが良いでしょう。
圧縮方法としては様々なものがありますが、ブラウザで手軽に圧縮を行えるサイトやツールを使用するのが良いでしょう。WordPressであれば、画像をメディアにアップロードすると自動で圧縮してくれるプラグインもあります。
また、ページ内の画像・動画などを遅延して読み込むことで、ページ表示の高速化を図ることができます。遅延読み込みを適応した画像や動画は、ユーザーがページをスクロールして画面内に表示される直前に読み込まれるようになります。ファーストビューで使用するもの以外は、遅延読み込みすることをお勧めします。
FID（First Input Delay）の改善
FIDとは、ページのインタラクティブ性を評価する指標です。
インタラクティブ性とは、ユーザーによるボタンのクリックやタップ、キーボードでの入力など、何かしらのアクションに対するブラウザの反応速度のことです。以下の基準をもとに、良好〜不良と判定されます。
- 100ミリ秒以下：良好
- 300ミリ秒以下：改善が必要
- 300ミリ秒越え：不良
ユーザのアクションに対してJavaScriptの重い処理が実行される場合など、ブラウザの反応が遅れることでFIDの評価が低下することがあります。
これらを改善するには、重い処理を分割して実行したり、非同期処理や不要な処理が実行されないようにしたりと、コードの改善が必要不可欠となります。
TBT（Total Blocking Time）の改善も効果的
Webサイトのパフォーマンスを診断する指標の一つとして、TBTというものがあります。こちらは、ブラウザがJavaScriptの実行に応答できないビジー状態のときの合計時間を表す指標となります。
TBTとFIDでは改善できる項目に共通点があり、この2つの指標には直接的に関わりがあるとされています。TBTの改善 ＝ FIDの改善ということにはなりますが、FIDと同じくコードの改善は必要になります。
CLS（Cumulative Layout Shift）の改善
CLSとは、ページの読み込み中や直後に発生するレイアウトの崩れを指します。レイアウトの崩れが起こる度に評価が低下して行きます。以下のような現象が起こる場合にレイアウトの崩れとみなされます。
- 画像や動画が遅れて表示されてテキストの位置がずれた
- 突然広告が表示されボタンの位置がずれた
- 動的なコンテンツが遅れて表示された
また、レイアウトの崩れが多すぎる場合には、CLSの評価だけでなく一見無関係なソースや要素にも悪影響を与えることもあります。
CLSを改善するには、画像・動画・広告・動的なコンテンツや埋め込み要素などのサイズを明示的に指定し、これらの要素が表示される前から必要な領域を保つことが大切です。
例えば、テキストとボタンの間に、サイズが不明確な画像が遅れて表示された場合、画像の分だけボタンが下にずれることになります。これを避けるために、imgタグには「width」と「height」を指定しておくことで、予めその領域を確保することができます。
また、レスポンシブなWebサイトに必要な対策として、CSSのプロパティ「aspect-ratio」などを使用して、縦横比を保ちつつ要素の領域を確保する必要があります。
これらの対策は、CLSの評価を下げている全ての要素に対して必要な作業となります。該当する要素が多ければ多いほど大変な作業となるでしょう。
まとめ
Webサイトが重い・遅いと感じる時、コアウェブバイタルはその原因の特定や改善のための具体的な指標となり、主にLCP、FID、CLSという3つの指標により評価されます。ユーザーエクスペリエンスを良くするには、コアウェブバイタルの改善は必要不可欠と言えるでしょう。
しかし、全てを一度に改善することはできないため、Webサイトの現在の評価・改善点をよく確認し、一つ一つ対応することが大切です。
中には難しい作業もあり、着手できない項目やなかなか改善されない項目もあるかと思います。無理な作業により予期しない不具合が発生する可能性もあるため、まずはWeb制作会社へ相談されることをお勧めします。
