Core Web Vitals(コアウェブバイタル)基礎ガイド：ホームページ制作の新たな標準

「Core Web Vitals」や「コアウェブバイタル」という言葉をご存じでしょうか。ホームページ制作に関わっている人ならば、このワードを無視することはできません。
Core Web Vitals(コアウェブバイタル)とはどんなものなのか、なぜ注目を集めているのか、背景とともに詳しく解説していきます。

この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。
私たちが提供する「ホームページ制作サービス」の観点から専門用語を抜粋して分かりやすくお伝えします。

Core Web Vitals(コアウェブバイタル)の誕生背景

Googleは、ユーザーに良質なウェブ体験を提供するための取り組みとして、2020年に「Core Web Vitals」という新しい評価指標を発表しました。導入の背景として、サイト制作者やオーナーがホームページのパフォーマンスを向上させるための手助けするためです。
Googleの目的は、ユーザーがウェブを閲覧する際に最も重視する要素、すなわち「ページの読み込み速度」「インタラクティブ性」「安定性」を明確にし、それを基準としてウェブページの品質を高めることです。

なぜCore Web Vitals(コアウェブバイタル)が大切なのか

先ほどお話した通り、「Core Web Vitals」は、Googleが提案するホームページの品質を測る指標です。
この評価が高いサイトは、Googleの検索結果(SEOの評価)で上位に表示されやすくなるだけでなく、訪問者にも良質なユーザーエクスペリエンスを提供できるのです。

Core Web Vitals(コアウェブバイタル)とSEO評価の関係

「Core Web Vitals」はSEOの評価に大きく影響を及ぼします。具体的には以下の点が挙げられます。

①検索順位への影響: 2021年より、Googleは「Core Web Vitals」の評価を検索ランキングの要因の一つとして取り入れることを明らかにしました。
②ユーザーエクスペリエンスの向上: 良好なユーザーエクスペリエンスを持つサイトは、訪問者の滞在時間が長くなるため、検索エンジンがポジティブに評価します。
③サイトの信頼性向上: 「Core Web Vitals」が良好であるサイトは、信頼性や専門性が高いと評価される可能性があります。

加えて、以下の既存の4つの指標もSEOにおける重要な要因として認識されています。

●モバイルフレンドリー: スマートフォンの利用者が増える中、モバイルフレンドリーなサイトは検索結果で高く評価されます。
●セーフブラウジング: サイトが安全なコンテンツしか持たないことを示す指標です。マルウェアやフィッシングなどの問題がないサイトは、ユーザーに安全であると認識されます。
●HTTPS: サイトがHTTPSを使用していると、データの暗号化が行われ、ユーザーの情報の安全性が高まります。このため、HTTPSを使用しているサイトはSEO評価が高くなります。
●インターステイシャルの最適化: ページのコンテンツへのアクセスを妨げない、ユーザーフレンドリーな広告やポップアップの配置が推奨されています。

以上のことから、ホームページ制作時には必ず「Core Web Vitals」と他のSEO関連の指標を総合的に考慮することが求められます。

具体的にどんな指標があるのか

「Core Web Vitals」には以下の3つの指標があります。それぞれの指標には、ウェブページの品質を示す異なる側面があります。

LCP (Largest Contentful Paint)

説明

ページが読み込まれてから、最も大きなコンテンツが完全に表示されるまでの時間を示す指標です。例えば、大きな画像やテキストブロックなどの要素がどれだけ速く表示されるかを測定します。この指標が速ければ、訪問者はサイトのコンテンツに迅速にアクセスできると感じます。

指標

良好
2.5秒未満

改善が必要
4秒未満

不良
4秒以上

FID (First Input Delay)

説明

ユーザーがページ上の何らかのインタラクション（ボタンのクリックやリンクの選択など）を行った際、そのアクションが反映されるまでの遅延時間を測定する指標です。この値が低いほど、ページがレスポンシブであると感じられます。

指標

良好
100ミリ秒未満

改善が必要
300ミリ秒未満

不良
300ミリ秒以上

CLS (Cumulative Layout Shift)

説明

ページが読み込まれる過程で、要素が予期せずに位置を移動する（シフトする）ことの頻度を示す指標です。高いCLSスコアは、ページの要素が読み込み中に頻繁に動くことを意味し、ユーザーにとっては不快な体験となります。

指標

良好
0.1未満

改善が必要
0.25未満

不良
0.25以上

「Core Web Vitals」の他にも、ホームページのパフォーマンスを測定するためのいくつかの重要な指標があります。これらは、ユーザーの体験を向上させるための参考として活用されます。

FMP (First Meaningful Paint)

説明: ページの主要なコンテンツがユーザーにとって意味のあるものとして表示されるまでの時間を示す指標です。
指標: 良好な範囲や最適なスコアは、ページの内容や目的によって変わるため、一般的な基準は設定されていませんが、早ければ早いほど良いとされます。

FCP (First Contentful Paint)

説明

ページの最初のコンテンツ（テキストや画像など）が表示されるまでの時間を示す指標です。

指標

良好
1.8秒未満

改善が必要
3秒未満

不良
3秒以上

SI (Speed Index)

説明: ページの可視コンテンツがどれだけ速く表示されるかを示す指標です。完全なロードよりも、ユーザーが内容を見ることができる速度を重視します。
指標: 低い数値が良好とされています。

TTI (Time to Interactive)

説明

ページが完全に読み込まれ、インタラクティブになるまでの時間を示す指標です。これは、ユーザーがページとのインタラクションを開始できる時間を意味します。

指標

良好
3.8秒未満

改善が必要
7.3秒未満

不良
7.3秒以上

TBT (Total Blocking Time)

説明: ページがロードされる間、主なスレッドがどれだけの時間ブロックされているかを示す指標です。これは、ページがユーザーとのインタラクションを待機している時間を示します。
指標: 低い数値が良好とされています。

どうやって測定すればよいか

では実際に「Core Web Vitals」の指標を測定するのでしょうか。この測定方法にはいくつかのツールが用意されています。

Google Search Console（グーグルサーチコンソール）

サイト全体の「Core Web Vitals」の状況を確認できるツール。問題点や改善点を示してくれます。

https://search.google.com/search-console/

PageSpeed Insights（ページスピードインサイト）

ページごとのパフォーマンスをチェックし、改善提案も示してくれるツール。

https://pagespeed.web.dev/

Chrome DevTools

実際にブラウザでページを開きながら、リアルタイムに各指標の情報を取得できるツール。

https://developer.chrome.com/docs/devtools/

Core Web Vitals(コアウェブバイタル)の改善方法

「Core Web Vitals」の各指標(LCP、FID、CLS)を改善するための方法は、以下の通りです。

LCP(Largest Contentful Paint)の改善方法

●サーバーの最適化: サーバーのレスポンス時間を短縮するために、キャッシュの使用や、CDN(Content Delivery Network)の活用を考慮します。
●画像の最適化: 画像の圧縮や適切なフォーマットの使用、遅延読み込みなど、画像の最適化を行います。
●CSSの最適化: 不要なCSSの削除や非同期の読み込み、インラインCSSの使用を減らすなどの手法でCSSを最適化します。

FID(First Input Delay)の改善方法

●JavaScriptの最適化: JavaScriptの実行時間を短縮するために、非同期処理の活用や、スクリプトの遅延読み込み、不要なスクリプトの削除を行います。
●第三者スクリプトの最小化: 不要な第三者のスクリプトを削除することで、ページの読み込みやインタラクションの速度を上げます。

CLS(Cumulative Layout Shift)の改善方法

●要素の安定性確保: 画像や動画などのメディア要素には固定のサイズ属性を設定し、予期しないレイアウトの変化を防ぎます。
●フォントの最適化: ウェブフォントを使用する際に、フォールバックのフォントを設定することで、テキストの不意のレイアウト変化を避けます。
●動的なコンテンツの挿入の注意: ページ読み込み後に動的にコンテンツを挿入する場合は、ページの上部ではなく下部や適切な場所に追加することで、レイアウトの変化を最小限に抑えます。

以上の改善方法を適切に適用することで、「Core Web Vitals」の指標を向上させることが可能です。サイトのユーザーエクスペリエンスの向上と共に、SEO評価の向上も期待できます。

まとめ

今回は「Core Web Vitals」についてお話ししましたが、いかがでしたでしょうか。
「Core Web Vitals」の導入により、Googleはウェブ全体のユーザーエクスペリエンスの向上を促進しています。これからのホームページ制作においては、この新たな標準を意識して、サイトの品質を高めることが求められるでしょう。もちろん、良質なコンテンツ作成は欠かせませんが、この新しい基準も念頭に置きながら制作を進めることをおすすめします。

ホームページを作成するうえで気にするところはこれだけではありません。
これ以外にも以下のようなことも考慮する必要があります。

ユーザビリティ(使いやすさ)

ナビゲーションのシンプルさ、明確なカテゴリー分け、検索機能の提供など

クロスブラウザ対応

様々なウェブブラウザを使用していること (Chrome、Firefox、Edgeなど)

コンテンツの品質と正確性

情報が最新かつ正確であること

著作権と画像の使用

著作権を遵守し、適切なライセンスを持つものを使用する

セキュリティ対策

SSL証明書の導入や定期的なセキュリティチェックなど

バックアップと定期的な更新

トラブルやセキュリティ問題を回避する

だからこそ格安ホームページ制作を行うZIUS(ジウス)に頼ってみませんか？
ZIUS(ジウス)では月額1,100円～ホームページを制作することができます。また最短即日(※)でホームページが完成するので急いでホームページを制作する必要がある場合などには最適です。少し凝ったデザインでも3,520円～。詳細は以下のリンクからご確認ください。
※即日公開ができかねる場合もありますので、詳しくはお問い合わせください。