SEO - Core Web Vitals

こんにちは、Web開発者の志願者たちとSEO愛好家たち！Core Web Vitalsの世界を楽しく案内するお手伝いをすること、とても嬉しいです。私がコンピュータサイエンスを教えている時間よりも長い（デイアルアップインターネットが速いとされた時代を覚えています）ですが、Webの興味深い進化を目撃してきました。今日は、インターネットで自分の足跡を残したいと考えている任何人にとって重要なテーマに潜り込みます：Core Web Vitals。

Core Web Vitalsとは？

家を建てることを考えてみてください。ただ見栄えの良いものに焦点を当てるだけでなく、堅固な基盤、良い排水設備、効率的な電気システムを確保したいでしょう。Core Web Vitalsは、Webサイトに対するこれらの基本的な構成要素です。

Core Web Vitalsは、Googleがウェブページのユーザーエクスペリエンスの全体において重要と考えている特定の要素のセットです。これらは、モバイルフレンドリー、セーフブラウジング、HTTPSセキュリティ、intrusive interstitialガイドラインとともに、GoogleのPage Experienceシグナルの一部です。

Core Web Vitalsの重要性

さて、Core Web Vitalsについて関心を持つ理由を皆さんは気にしているかもしれませんね。そこで、ちょっとした話をします。

私が教師としての初期の頃、美しいウェブサイトを構築した生徒がいました。それはデジタル版のシスティナ礼拝堂のようでした。しかし、それをロードしようとすると、おっと！カタツムリがピーナッツバターを通って走るよりも遅かったです。ユーザーはページがロード完了する前に去ってしまいました。それで、私はサイトの見た目だけでなく、パフォーマンスの重要性に気づきました。

Googleは、Core Web Vitalsが現在のランクイン要素であることを明確にしています。これは、あなたのサイトの検索結果での位置に影響を与える可能性があることを意味します。SEOの競争激しい世界では、どんな利点も重要です！

Core Web Vitalsの主要メトリクス

Core Web Vitalsを構成する主なメトリクスは以下の3つです：

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

これらを一つずつ見ていきましょう。

Largest Contentful Paint (LCP)

LCPはロードパフォーマンスを測定します。具体的には、ページの主要なコンテンツがおそらくロードされたタイムラインのポイントを示します。

LCPは何を評価できる？

LCPは、最大のコンテンツ要素がユーザーに見えるまでの速さを教えてくれます。これは画像、動画、またはブロックレベルのテキスト要素などが該当します。

LCPの測定基準

以下の表を参考にしてLCPの基準を理解しましょう：

LCP時間	評価
0-2.5秒	良
2.5-4秒	改善が必要
4秒以上	質が悪い

LCPを最適化するためには、以下の点を考慮してください：

<!-- 最大の画像を最適化 -->
<img src="optimized-hero-image.jpg" alt="Hero Image" loading="eager">

<!-- 重要なリソースを事前に読み込む -->
<link rel="preload" href="critical-style.css" as="style">

この例では、最大の画像を最適化し、重要なCSSを事前に読み込むことで、LCPを大幅に改善できます。

First Input Delay (FID)

FIDはインタラクティビティを測定します。ユーザーが反応の遅いページとインタラクションを試みる際の体験を数値化します。

FIDは何を評価できる？

FIDは、ユーザーが初めてあなたのサイトとインタラクション（例えば、リンクをクリックまたはボタンをタップ）を試みたときと、ブラウザが実際にそのインタラクションに応じるまでの遅延を評価します。

FIDの測定基準

以下のようにFIDが測定されます：

FID時間	評価
0-100ms	良
100-300ms	改善が必要
300ms以上	質が悪い

FIDを改善するためには、長いタスクを分割し、JavaScriptを最適化することを考慮してください：

// 長いタスクを分割
const longTask = () => {
// 長いタスクのコードここに
};

// requestIdleCallbackを使用して、ブラウザがアイドルのときにタスクを実行
requestIdleCallback(() => {
longTask();
});

このコードスニペットは、requestIdleCallbackを使用して、ブラウザがアイドルのときに長いタスクを実行することで、インタラクティビティを改善する方法を示しています。

Cumulative Layout Shift (CLS)

CLSは視覚的な安定性を測定します。ユーザーが予期しないレイアウトシフトを経験する頻度を数値化します。

GoogleはCLSスコアをどのように計算する？

CLSは、インパクトフラクション（ビューポートのどれだけが影響を受けたか）とディスタンスフラクション（要素がどれだけ移動したか）を掛け合わせて計算されます。

CLSは何を評価できる？

CLSは、ページレイアウトがロードされる際の安定性を評価します。低いCLSスコアは、新しい要素がロードされる際にページがシフトしないことを意味し、より良いユーザーエクスペリエンスを提供します。

CLSの測定基準

以下のようにCLSが測定されます：

CLSスコア	評価
0-0.1	良
0.1-0.25	改善が必要
0.25以上	質が悪い

CLSを改善するためには、画像と広告のサイズを指定することを常に心がけてください：

<!-- 画像のサイズを指定 -->
<img src="example.jpg" width="640" height="360" alt="Example Image">

<!-- 広告のスペースを確保 -->
<div style="min-height: 250px; min-width: 300px;">
<!-- 広告のコードここに -->
</div>

このコードは、画像と広告のスペースを確保し、ページがロードされる際のレイアウトシフトを減少させることを目的としています。

Core Web Vitalsを強化する

Core Web Vitalsが何であるか、そしてどのように測定されるかを理解したので、それらを強化するための一般的な戦略を見てみましょう：

画像を最適化（圧縮、WebPなどの現代的なフォーマットを使用）
JavaScriptを最小化し、遅延
キャッシュを利用
非重要リソースに対してラzy loadingを導入
コンテンツデリバリネットワーク（CDN）を使用

以下は、ラzy loadingを実装する簡単な例です：

<img src="example.jpg" loading="lazy" alt="Lazy Loaded Image">

この属性は、ブラウザが画像がビューポートに近づくまで画像をロードしないよう指示します。これにより、バンド幅を節約し、ロード時間を短縮できます。

結論

そして、みなさん！Core Web Vitalsの土地を旅しました。それらを理解し、改善する方法を学びました。これらのメトリクスを最適化することは、Googleを満足させるだけでなく、ユーザーにより良い体験を提供することでもあります。

私たちが終わりにする時、私は別の生徒を思い出します。彼女はこれらの原則を心に留め、遅い、重いサイトをユーザーを喜ばせる機械に変換しました。彼女のトラフィックは爆発的に増え、最後に聞いた話では、成功したデジタルマーケティングエージェンシーを運営していました。

ですから、初めてのウェブサイトを作成している人でも、経験豊富なプロでも、これらのCore Web Vitalsを忘れないでください。それらは、より良いランクと幸せなユーザーへのチケットです。あなたが次の成功ストーリーになるかもしれません！

次回まで、ハッピーコーディングをし、あなたのWebビタルが常に緑の状態でありますように！

Credits: Image by storyset