コアWebバイタルのためにビジネスWebサイトの最適化を開始する5つの方法

公開: 2022-05-04

Googleは、Core Web Vitalsの展開を5月から6月中旬に延期し、完全なライブアップデートを8月末まで延期しました。 待望の新しいランキングシグナルのセットが現在の検索シグナルと組み合わされ、新しいページエクスペリエンスが作成されます。 この新しい開発はあなたのビジネスにとってどのような意味がありますか？

WebデザインチームやSEOスペシャリストと熱心に協力して、Webサイトに変更を実装している場合は、心配する必要はありません。 ロールアウトの遅延は、あなたが時代を先取りできることを意味するだけです。 一方、サイトの変更を開始していない場合、遅延は、新しい一連の指標を満たすための時間があることを意味するだけです。

コアWebバイタルとは何ですか？

Core Web Vitalsは、GoogleがWebサイトをランク付けする方法を変更するように設定されています。 これは、3つの主要なメトリックをカバーしています。

  1. 最大のコンテンツフルペイント（LCP）。 ページの読み込み速度を測定します
  2. 最初の入力遅延（FID）。 FIDは、双方向性またはページの魅力に関するものです
  3. 累積レイアウトシフト（CLS）。 この指標は、ユーザーがページを操作するときにページ内の要素がどれだけ安定しているかを測定します。

そのため、新しい一連の指標は、読み込み時間、双方向性、ページの安定性に重点を置き、あなたとあなたのWeb開発者が取り組む必要のあるものの青写真を提供します。

そして、これを行うための5つの効果的な方法があります。

  1. 画像と動画を最適化する

ページの読み込みが遅いと、潜在的なクライアントにコストがかかる可能性があります。 多くのサイトでは、画像が最大の要素であるため、画像を最適化することをお勧めします。

これを行う効果的な方法は、Webサイト上のすべての画像を拡大縮小および圧縮することです。 使用する画像最適化ツールには、tinypngまたはShortPixelがあります。 また、画像を.pngなどのより効率的な最新の形式に変換したり、モバイルデバイスとデスクトップデバイスの両方で完璧に見える応答性の高い画像であることを確認したりすることもできます。

「最適化」と「サイズ縮小」を区別します。 画像の読み込みを高速化するために、画像のサイズを縮小してみてください。 ただし、Core Web Vitalsの背後にある全体的なポイントは、ユーザーにより良いエクスペリエンスを提供することであることを忘れないでください。 画像（または動画）の読み込みは速くなる場合がありますが、ぼやけているか品質が低い場合、Webサイトの訪問者は画像が役に立たない場合があります。

  1. 遅延読み込み画像とサードパーティのスクリプト

遅延読み込みは、ウェブサイトの画像の応答性を高め、読み込みを高速化するもう1つの方法です。 この方法では、ユーザーがページのその領域にスクロールすると、画像が読み込まれます。 スクロールしなければ見えない位置にある場合は、ユーザーが見ているは​​ずのすべての画像が最初に表示されます。 下にスクロールすると、ページのそれらの領域の画像が続きます。

遅延読み込みは、帯域幅を適切に割り当てるだけでなく、画像が多いWebサイトにも役立ちます。

画像を簡単に遅延ロードできる1つの方法は、HTMLを使用することです。 このマークアップに従う必要があります：

<img src =” imagename.png” Loading =” lazy” alt =” image1” />

<iframe src =” content1.html” Loading ='lazy”> </ iframe>

特定のページに大量の画像がある場合、このプロセスは面倒な場合がありますが、遅延読み込みは簡単に実行できます。

  1. ページ内のすべての要素がずれないようにしてください

Googleは、パフォーマンスオブザーバーを介してCLSを測定し、レイアウトの変化を検出します。 要素がシフトするか、レイアウトがシフトすると、パフォーマンスオブザーバーは、既存のレイアウトシフトスコアに追加するコールバック関数を呼び出します。

ウェブサイトの安定性を確認したり、レイアウトシフトをデバッグしたりするのに役立つツールの1つは、ChromeのDevToolsのレイアウトシフト領域オプションです。 この機能は、移動する要素を移動時に強調表示します。 それはなぜそれがシフトしているのかをあなたに伝えていません、あなたはあなた自身でそれを理解しなければなりません。 それが行うことは、シフトに影響を与えている要素を表示することです。

画像と動画の要素には、幅と高さのサイズ属性が必要です。 CSSアスペクト比ボックスを使用して、画像または要素に必要なスペースを予約することもできます。 このようにして、ファイルのロード時にページ上のすべての要素をシフトすることなく、ページはファイルに正しいスペースを割り当てることができます。

レイアウトシフトは、ユーザーに表示されている場合にのみカウントされます。 したがって、ページの下でシフトが発生したが、ユーザーがまだその領域までスクロールダウンしていない場合、CLSにはカウントされません。

  1. デスクトップとモバイルのUXパターンを修正する

多くのレイアウトシフトは、悪いUXパターンの結果です。 その一例は、ウェブサイトのポップアップや、ページの上部にポップアップしてアナウンスを行うバナーです。 これらの要素がそれを行うとき、それらはページ上の他のすべてを押し下げる傾向があります。

動的コンテンツ用に十分なスペースを確保してください。 これらは、プロモーションや広告のように、後でポップアップするコンテンツです。 1つのヒントは、特にページ全体のコンテンツを調整することにフォローアップしていない場合は、既存のコンテンツの上に新しいコンテンツを挿入しないようにすることです。

  1. リアルユーザーモニタリング（RUM）の設定を改善する

Real User Monitoringは、Webサイトまたはアプリケーションの各ユーザーの動きをキャプチャして分析するプロセスです。 これは、実際のユーザー指標またはエンドユーザーエクスペリエンスの監視と呼ばれることがよくあります。 これを行うには、ページレベルのパフォーマンスデータを確認します。

Google Search Console（GSC）は、URLグループまたは類似のHTML構造を持つURLのグループに基づいてページのパフォーマンスを通知する便利なツールです。

RUMを監視することで、サイトの応答性と双方向性に対するユーザーの第一印象がポジティブであることも確認できます。

ボーナスのヒント：

CWVのパフォーマンスに影響を与える可能性のあるもう1つの要因は、サーバーの応答時間です。 一般に、サーバーの応答時間が速いほど、すべてのページ負荷メトリックが向上します。

理想的には、ブラウザがサーバーからコンテンツをすばやく受信するようにします。そうすれば、ブラウザも画面に表示され、記録的な速さでユーザーが表示できるようになります。

サーバーの応答時間が遅いかどうかをどのように判断できますか？ WebPageTestやLighthouseなどのツールを使用します。

特にLighthouseには、Reduce Initial ServerResponseTimeと呼ばれるページ監査要素があります。 監査レポートにこれが表示されている場合は、Web開発者との問題を掘り下げるために時間を費やす必要があることを意味します。

より良いウェブサイトのパフォーマンス、より良いユーザーエクスペリエンス—より良いランキング


Core Web Vitalsは、ユーザーがオンラインで体験を楽しむのに役立つことを目的としています。 彼のアップデートにより、Googleはサイトの速度とユーザーエクスペリエンスを優先することを目指しています。 しかし、それはあなたのウェブサイトの現在のパフォーマンス、あなたの目標、そしてあなたがいる業界に依存するので、最適化のための一つの公式はありません。

最終的に、これらのアップグレードにより、Webに関連性のある高品質のWebサイトが確実に配置されます。 ウェブサイトにベストプラクティスを適用して、顧客に最高のサービスとエクスペリエンスを提供していることを確認します。