コアWebバイタルのためにあなたのサイトを最適化する方法は？

あなたのウェブサイトが完全にロードするのに時間がかかっているので心配していますか？ ビジネスサイトのユーザーエクスペリエンスを向上させたいですか？

もしそうなら、コアウェブバイタルはあなたが責任を負うと呼ぶことができる一部である可能性があります。 このブログ投稿では、CoreWebVitals用にサイトを簡単な手順で最適化する方法について説明します。

Core Web Vitalsは現在Googleのランキング要素であり、ほとんどのSEO専門家はサイトの最適化に重点を置いています。

Googleが更新をロールするたびに、人々は全体的なランキングの増減に直面します。 Web Vitalsの優れた指標を持つ人々は、地位を維持し、訪問者を維持します。

では、どのようにしてベストプラクティスに従って、Webサイトのランキングに害を及ぼさないようにすることができるでしょうか。 簡単な答えは、「コアWebバイタル」メトリックを改善することです。

コアWebバイタルのためにサイトを最適化する：概要

コアウェブバイタルは今や不可欠な要素であり、検索エンジン最適化（SEO）の不可欠な部分になっています。 より多くの時間を与えることにより、これらのメトリックを定期的に最適化する必要があります。 それはあなたのウェブサイトのユーザーエクスペリエンスとランキングを改善するのに役立ちます。

私たちは皆、より良いコンテンツが検索エンジンでより良くランク付けされると信じています。 しかし、SEOは、他にどのようなことが効果的に優れたコンテンツをトップに、次に最初の位置にもたらすことができるかを知っています。 したがって、Webの位置を維持するためのこの要素を説明するために、さらに説明します。

基本的にコアWebバイタルとは何ですか？

Core Web Vitalsは、ビジネスサイトページの全体的なユーザーエクスペリエンスを測定するための特定の指標です。 これらには、ページの読み込み時間、デザインの安定性、速度、およびユーザーの操作を示す3つの異なるスコアがあります。

それらをもう少し深く見ると、次のものが含まれます。

もう一度言及します。 サイトのパフォーマンスを最高にするには、これら3つの指標を最適化する必要があります。 Googleは、これらすべてのスコアを使用してWebページをランク付けします。 それぞれを改善する方法を説明する前に、なぜそれらがそれほど評価されているのかを知っておく必要があります。

なぜあなたはコアウェブバイタルのためにあなたのサイトを最適化する必要がありますか？

これらの基準で良いスコアを取得すると、Webサイトの全体的なパフォーマンスに影響を与えます。 Core Web Vitalsスコアを改善するためにSEOを採用した場合、時間と投資は1ペニーの価値があります。 最良の結果が得られたら、次のメリットを享受できます。

サイトのコアWebバイタルを最適化するための最良のヒント

それでは、CoreWebVitalsテスト用にサイトを最適化する方法を学びましょう。 3つの異なるメトリックがあるため、それぞれを個別に説明します。 それらを分析する方法、悪いスコアの理由、およびそれらを改善する方法をお知らせします。

1.最大のコンテンツフルペイント（LCP）分析と最適化

LCPは1つの要素のみに焦点を当てています。 サイトの読み込み時間。 ユーザーが探しているものが1秒以内に表示されない場合、ユーザーはサイトを離れます。 したがって、Webサイトページのすべてのコンテンツを一度に高速にロードする必要があります。

LCPを分析する

LCPを分析するには、以下のようないくつかの方法、特にツールを使用できます。

• ChromeのDevToolsLighthouseまたはChromiumベースのブラウザを使用します。
• Chromiumベース以外のブラウザーの場合は、PageSpeedInsightsまたはweb.devツールを使用します。
• WebVitals拡張機能を使用します。 スコアインジケーターを備えた非常に効果的なツールです。
• コーディングができれば、web-vitalsJavaScriptライブラリを使用できます。
• Googleの検索コンソールのコアWebバイタル機能を利用してください。

悪いLCP：なぜ

LCPを最適化する前に、その背後にある理由を知る必要があります。 それで、ここにあなたのウェブサイトが低いLCPスコアを持っているいくつかの原因があります。

• サーバーは共有ホスティングサービスへの応答が遅く、ページのレンダリングに時間がかかります。
• HTMLのレンダリングをブロックするリソースは、ページがすぐに読み込まれないようにする可能性があります。
• 最適化されていない大きな画像やビデオは、より多くの帯域幅を消費し、レンダリングが遅くなる可能性があります。
• コンテンツの読み込みと表示の問題は、サーバーではなくクライアント側に存在します。

これが悪いLCPの例です！

LCPを最適化する

LCPの低下の原因を理解すれば、それぞれを簡単に最適化できます。 それでは、先に進んで、これをどのように行うことができるかを確認しましょう。

2. First Input Delay（FID）の分析と最適化

FIDは、ユーザーがページを操作できるかどうかに関係なく、サイトのユーザビリティに重点を置いています。 ユーザーがリンクをクリックまたはタップしてすぐに開かない場合は、応答が遅いことを意味します。 したがって、Webサイトページの他のコンテンツをできるだけ早く応答させると役立ちます。

FIDを分析する

したがって、FIDに問題があるかどうかを分析するには、次の手順を実行できます。

• WebPageTestを使用して、JavaScriptの実行時にメインスレッドをブロックするコードを見つけます。
• Inspect Elementの「Bottom-Up」タブから、URLを含む長いタスクを検索します。
• DevToolsまたはPageSpeedInsightsの助けを借りて、Total Blocking Time（TBT）を見つけてください。
• Chrome Web Vitals拡張機能を使用して、ユーザーがクリックまたはスクロールしたときの操作を確認します。
• Chrome UXレポートは、さまざまなデバイスでのURLのパフォーマンスを確認するのに役立ちます。

悪いFID：なぜ

FIDが不十分な場合、新しい訪問ユーザーのほとんどを失う可能性があります。 FIDスコアが低い場合、考えられる理由は次のいずれかです。

• JavaScriptを使用するとタスクが長くなり、Webサイトの応答性が低下します。
• レンダリングをブロックするリソース、CSSおよびJavaScriptは、ページの読み込みに遅延を引き起こします。
• ページを読み込んだ直後に大きなJavaScriptを開始すると、レンダリングが遅れる可能性があります。
• サードパーティまたは最適化が不十分なJavaScriptを使用すると、レンダリングがブロックされる可能性があります。

FIDを最適化する

これで、FIDスコアが低い原因を見つけたら、すぐに最適化できます。 したがって、これを行うために従う必要のある手順は次のとおりです。

3.累積レイアウトシフト（CLS）の分析と最適化

CLSは、主にWebサイトのページの安定性に重点を置いています。 ロード中に物事が動くかどうかにかかわらず、ページのコンテンツとデザインレイアウトを調べます。 この問題は、テキストがページからスライドするときに読者を悩ませます。 したがって、ユーザーエクスペリエンスのために最適化しておく必要があります。

CLSを分析する

CLSはより一般的であり、すぐに経験できるため、簡単に分析できます。 次のツールまたは方法を使用して、CLSを分析できます。

• DevTools Lighthouseを使用して、レイアウトシフトに影響を与えるすべての問題を見つけます。
• ライブパフォーマンステストを実行するには、PageSpeedInsightsを使用できます。
• デスクトップデバイスでCLSをリアルタイムで分析するには、web.devツールを使用します。
• レイアウトシフトGIFジェネレーターは、領域を示すレイアウトシフトを見つけるのに役立ちます。

悪いCLS：なぜ

不十分なCLSメトリックは、ユーザーエクスペリエンスを低下させ、したがってWebサイトの全体的な価値を低下させる可能性があります。 CLSスコアが低い場合は、これらの理由のいずれかが考えられます。

• 元のコンテンツのためのスペースを残さない過剰な広告バナーの使用。
• 画像と動画のスペースはゼロで、アップロード中に属性は指定されません。
• YouTubeビデオ、ソーシャルメディアの投稿などの埋め込みを配置すると、CLSが減少します。
• FOUT / FOITを引き起こすWebフォントを使用すると、CLSにも影響を与える可能性があります。

CLSを最適化する

配置したコンテンツとユーザーに価値を付加するには、CLSの最適化が必要です。 CLSを最適化するには、次の簡単な手順を実行できます。

その他のWebVitalsメトリクス

あなたが知る必要がある他の重要なウェブバイタルメトリックがあります！

1. FCP –最初の満足のいくペイント

上記の測定値とは別に、Googleページの速度インサイトでサイトの速度を確認しながらもう1つの重要な指標を確認できます。これは、FCPに他なりません。 これは、ページが白いコンピューター画面に何かを表示するのにかかる時間を測定するFirstContentfulPaintと略されます。

これは非コアWebVitalsメトリックであることを理解する必要があります。 グーグルは、1.8秒以下がLCPの問題を診断するために使用されるので良いFCPスコアであると言います。 ここで、サイトがCWV評価に合格できるように、適切なFCPスコアを取得する方法について考えることができます。

FCPスコアを改善する方法は？

以下は、FCPスコアを改善するために焦点を当てる必要がある領域です。

• サーバーの応答時間の短縮に焦点を当てる
• ページリダイレクトを実行しないでください
• レンダリングをブロックするリソースを避ける
• 効率的なキャッシュプラグインを使用して静的アセットを提供する
• 読み込み速度を向上させるためにWebフォントをプリロードします
• 未使用のCSSとJavaScriptを取り除く
• 次世代フォーマットでサイト画像をサーバー化する
• CloudflareやBunnyCDNのような信頼できるCDNを使用する

上記のヒントをほぼすべて実行して、適切なFCPスコアを取得しました。 次の写真を見てください！

2. TTFB –最初のバイトまでの時間

あなたはこの主要な測定基準を知っているかもしれません！ TTFBの拡張は、「Time To First Byte」です。これは、要求に対するWebサーバーの応答の評価です。 これは、ページ速度の読み込みエクスペリエンスに直接関連しており、LCPスコアが低い問題を特定するのに役立つため、他のWebバイタルメトリックに分類されます。

TTFBスコアを改善する方法は？

ページ速度の負荷を増やすには、TTFBスコアを下げる必要があります。 次のヒントを実装して、TTFBメトリックを下げます。

• プレミアムDNSサービスで最速のホスティングを使用する（私はCloudwaysを好む）
• データベースを最適化する
• 最新のPHPバージョンを使用していることを確認してください
• WordPressのバージョン、テーマ、インストール済みのプラグインを最新の状態に保ちます。

コアWebバイタルのためにあなたのウェブサイトを最適化するためのヒントをまとめる

上手！ これまでのところ、CoreWebVitals用にサイトを最適化する方法については以上です。 あなたがオンラインで働いているビジネスまたはサービスを販売している会社であるならば、あなたはそれらを最適化する必要があります。 それはあなたのウェブサイトをランク付けし、あなたのユーザーを引き付け続け、そして彼らをあなたの定期的な訪問者にするのを助けます。

そもそもこれらのプロセスを実行している場合は、分析のために言及したこれらのツールについて読んでみてください。 いくつかは、PageSpeedInsightsやGoogleSearchConsoleのような非常に基本的なツールです。 多くのことを最適化するために、Autoptimizeなどのいくつかのスピードプラグインを使用することもできます。

Cloudwaysのようなウェブホストプロバイダーは最適化をほとんどまたはまったく必要としない機能を提供しているため、コアWebバイタルを最適化するための手順を実行する前に、適切なホスティングを使用していることを確認してください。 デフォルトではほとんどの作業が完了し、作業が少なくて済みます。