Core Web Vitals (Adsense) に合わせて Web サイトを最適化する方法

Core Web Vitals を改善する競争は簡単ではありません。 Google AdSense などの広告プログラムに依存してウェブサイトを収益化するのはさらに困難です。

Google AdSense を実行している Web サイトは、Google AdSense を実行していない同じ Web サイトよりも Core Web Vitals テストに失敗する可能性が 10 倍高くなります。 これは主に、Google AdSense が Web サイトに追加するサードパーティのリクエストとアセットの数によるものです。 これらのアセットのほとんどは、最適化されておらず、サイズが大きく、ユーザー フレンドリーではありません。

AdSense や広告プラットフォーム以外で、最適化されていない画像、JavaScript、CSS が特にスクロールしなければ見えない部分にたくさんある場合、Core Web Vitals テストに不合格になる可能性が非常に高くなります。

Core Web Vitals テストに合格し、検索エンジンのランキングの可能性を高めるのに苦労している場合は、この記事で実用的な解決策を見つけることができます.

Core Web Vitals とは何ですか?

Core Web Vitals は、サイトがどのように優れたページ エクスペリエンスを提供しているかを判断する、Google Lighthouse を利用した指標です。 テストの実行には多くの指標がありますが、最も重要な指標は、Largest Contentful Paint (LCP)、First Input Delay (FID)、および Cumulative Layout Shift (CLS) です。

Google は、2021 年 5 月から、これらの指標が、検索結果での Web ページの位置を決定するために使用されるランキング シグナルの一部になると発表しました。

要約すると、Core Web Vitals は Web マスターを恐怖に陥れるためのものではなく、Web サイトのページ エクスペリエンスを向上させるための手段であると言えます。

Largest Contentful Paint (LCP) : LCP は、Web ページに表示されている最大の画像またはテキスト ブロックの読み込みにかかる時間を測定します。 表示されている最大のテキストまたは画像が高速に読み込まれると、残りの画像とテキストも高速に読み込まれるように認識されます。 通過するのに必要なロード時間は2.5 秒です。

First Input Delay (FID) : FID は Web ページのインタラクティブ性を測定します。 これは、ユーザーがサイトをクリックしてからブラウザーがイベント ハンドラーの処理を開始するまでにかかる時間によって決まります。 これは、ウェブサイトの第一印象と広く呼ばれています。 通過に必要な時間は100 ミリ秒です。

累積レイアウト シフト (CLS) : CLS は Web ページで発生するレイアウト シフトを測定します。 Web ページが読み込まれた後、突然何かが表示または非表示になり、ページが大きくなったり小さくなったりするように調整する必要がある場合、その変化が測定されます。 ユーザーエクスペリエンスにとってはひどいものであり、同意します。 合格する必要があるスコアは0.1です。

Core Web Vitals 向けに Web サイトを最適化する方法

次の手順に従って、ウェブサイトを最適化します。

1. 高速な Web ホストから始める

応答時間がひどい Web ホストを使用している場合、ここにリストする他のすべてのことを行っても、望ましい結果が得られない可能性があります。 サーバーがリクエストに応答する速度が速ければ速いほど、より良い結果が得られます。

最初のバイトまでの時間 (TTFB) が短い Web ホストが重要なのはなぜですか? TTFB は問題ではないと主張する人もいますが、問題はあります。 それが他のすべての基礎です。 インターネットの速度が遅い都市にユーザーがいる場合、Web ホストの応答速度がすべてを左右します。 主に超高速インターネットを備えた都市からのユーザーがいる場合、どのWebホストもうまく機能します。

Web ホストが 4G ではなく 3G または 2G にどのように応答するかをテストしてみてください。 多くのユーザーが 3G または 2G 経由で接続している場合、Core Web Vitals スコアに加算されるためです。 したがって、ミリ秒ごとにカウントされます。 FID で 100 ミリ秒を取得する場合と 101 ミリ秒を取得する場合の違いは、100 ミリ秒では合格ですが、101 ミリ秒では不合格になることです。 したがって、誰かが 1 ミリ秒は問題にならないと言った場合、その人は単に間違っている可能性があります。

Web ホストを選択するときは、常にデータセンターを Web サイト ユーザーの大部分に近づけるようにしてください。 分析を調べることで、それらの場所を見つけることができます。 ユーザーのほとんどはどこから来ていますか? それらに近いデータセンターを選択してください。 近ければ近いほどよい。

Web ホストを変更した後、Web サイトの Core Web Vitals のフィールド データが大幅に変化していることに個人的に気付きました。 私は他に何もしませんでした。

高速な Web ホストを探している場合は、誠意のないアフィリエイトによってのみ推進されている推奨事項がたくさんあります。 WordPress を実行していて、余裕がある場合は、Kinsta を強くお勧めします。 それらは WordPress に最適です。 より安価なものが必要な場合、または WordPress を使用していない場合は、Cloudways も非常に効果的です。

2.軽量で速度が最適化されたテーマを使用する

このヒントは、コーダーではない人や、時間がないコーダーにとっても非常に役立ちます。 特に、非常に多くのオプションがある WordPress を使用している場合は、軽量で速度が最適化されたテーマを使用するようにしてください。

テーマはウェブサイトの骨格のようなものなので、骨格が壊れると本体が壊れます。 それだけです。

テーマで探すべきベスト プラクティスの長いリストがあります。 最も一般的な悪い習慣のいくつかは、JQuery に過度に依存する、不要なときにあまりにも多くの CSS/JS をロードする、大きなテーマ サイズなどです。 Yellow labs のようなツールをいつでも使用して、デモをテストできます。

WordPress を使用している場合は、最速の WordPress テーマのリストを確認できます。

3. 画像を最適化する

画像はクールです。 彼らはコンテンツをとても魅力的にします。 しかし、最適化されていないと負担になる可能性があります。 3 MB のような大きな画像があると、速度に確実に影響します。 また、スクロールする前にサイトにアクセスしたときにこれらの画像が表示されていれば、LCP 指標に確実に影響します。

実際のところ、最適化されていない画像はページのサイズを増やします。 ページ サイズが大きいほど、読み込みに時間がかかります。

個人的には、アップロードする前にすべての画像を最適化することを好みます。 画像の最適化に外部サービスは使用しません。 ただし、WordPress や類似の CMS を使用している場合は、画像を自動的に最適化するプラグインとソリューションがあります。 使用するものに関係なく、クラウド ソリューションもあります。

4. 背景画像の削除またはサイズの縮小

通常、背景画像は非常に大きくなります。 また、意味のあるコンテンツが表示される前に最初にロードする必要があるため、ロード時間が遅くなる可能性があります.

背景画像を完全に削除して、より高速なウェブサイトを作成できます。 それらが非常に重要な場合は、可能な限り最小のサイズに最適化するか、画像の代わりにパターンを使用することを検討してください。

5. ブラウザのキャッシュを使用する

多くの忠実な読者がいる場合は、ブラウザーのキャッシュを検討する必要があります。 ユーザーが初めて Web サイトにアクセスすると、ブラウザーはその Web サイトをキャッシュします。 他のすべての訪問では、瞬時に読み込まれます。 これにより、2回目の訪問からFIDとLCPを大幅に改善できます。

WordPress ユーザーの場合、ほとんどのキャッシュ プラグインがこれを実現するのに役立ちます。

6. JavaScript を縮小し、未使用の JavaScript を延期する

JavaScript は素晴らしいものですが、多くの場合、レンダリングをブロックします。 これは、読み込み時間、そして最終的には FID に影響を与える可能性があることを意味します。

ファイル サイズを小さくするために、空白とコメントを削除して JavaScript を縮小してみてください。 また、重要でない JavaScript を延期するようにしてください。 これにより、FID が改善されるはずです。

WordPress ユーザーには、Autoptimize、WP Rocket など、これを実行できるプラグインがあります。

7. AdSense のサイズ属性を設定する

Web サイトで AdSense を実行していて、CLS に苦しんでいる場合、これですべての問題を解決できます。 それは私のためにやったし、あなたのためにもあるはずです。

ユーザーがアクセスしたときに表示されるヘッダーの近くに広告ユニットがある場合、問題の 1 つは、広告がすぐに読み込まれない可能性があることです。 ページが既に読み込まれた後に読み込まれる場合があり、その場合、レイアウトにずれがあります。 これは、レスポンシブ広告ユニットでは非常に一般的です。 その場合、CLS メトリックを渡すことはできません。

これを処理する最善の方法は、AdSense コードを少し編集することです。 心配はいりません、それは非常に合法です。 広告のサイズ属性、特に高さを指定するだけです。 これを行うと、広告が読み込まれるたびにレイアウトがずれることに気付かなくなります。

以下は、私のブログでヘッダーのすぐ下に使用したレスポンシブ広告ユニットの例です。 パブリッシャー ID と広告スロットを XXXXXX に置き換えました。 高さ属性 (最小高さ: 300px) を追加したことに気付きました。 私がそれをした瞬間、すべてのCLSの問題は永遠になくなりました.

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Header ad --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

これが行うことは、そのサイズをページに確保することです。 すでにサイズを設定しているため、広告が表示されるたびにレイアウトが変わることはありません。

8. 画像やその他のメディアのサイズ属性を設定する

広告と同様に、画像やその他のメディアを Web サイトに読み込むと、レイアウトがずれることがあります。 何かを読んでいる最中に画像が読み込まれ、突然レイアウトが変わったり、読んでいたものが見えなくなったり、別のものだけが表示されたり、誤って別のものをクリックしたりすることがあります。

メディア ファイルに size 属性を設定することで、これらすべてを回避できます。 あなたの CLS メトリクスはあなたが満足するでしょう。

9. 画像の遅延読み込み。

画面外の画像を延期するように PageSpeed Insight に関するアドバイスを見たことがあるかもしれません。 簡単に言うと、画像を遅延ロードすることです。

遅延読み込みが行うことは、ページ サイズを縮小し、ユーザーがアクセスしたときのページの読み込み時間を短縮することです。 これは CWV メトリックに適しています。

これは特に LCP の改善に役立ちます。

10. 重要な CSS を縮小して生成することにより、CSS を最適化する

CSS は Web サイトの見栄えを良くするものですが、CSS ファイルが大きいと、ユーザーへのページのレンダリングが遅れるため、大きな問題になる可能性があります。

ユーザーが Web サイトにアクセスすると、ブラウザーは通常の動作で、Web ページのヘッダーで参照されているすべての CSS を読み込み、解析し、実行するまで、ユーザーへの Web ページのレンダリングを遅らせます。 大きな CSS ファイルがある場合、これは大きな問題になる可能性があります。 それはあなたのサイトを遅くします。

クリティカル CSS は、ページの読み込みに必要な CSS のみを読み込むことで役立ちます。 CSS の残りの部分は非同期でロードできます。

また、空白やコメントを削除して CSS を縮小し、ファイル サイズを縮小することも役立ちます。

未使用の CSS を削除することもできます。 使用しているサービスが使用されていない CSS をプッシュしている場合は、それらを削除しても安全です。

WordPress を使用している場合、WP Rocket、LiteSpeed Cache、FlyingPress など、これを実現するのに役立つプラグインがあります。

11. AdSense のスマート ローディングを実装する

この方法により、AdSense が Web サイトの速度低下の原因である場合、すべての問題をほぼ完全に解消できます。

これは、AdSense をスマートに読み込む方法です。 ユーザーがスクロールやクリックなどの操作を行うまで、AdSense は読み込まれません。 これにより、読み込み時間と、AdSense の影響を受ける主要な Web Vitals が大幅に改善されます。

これを行うのに役立つ多くの WordPress プラグインがあります。WP Rocket と Flying Scripts はその一例です。 私の知る限り、この方法は Google AdSense ポリシーに違反していません。

注:この方法は体感速度とページ スコアを改善するのに役立ちますが、AdSense の収益に影響を与える可能性があります。 価値があるかどうかを確認するために実験を行うことをお勧めします

12. 可能であれば System Stack フォントを使用する

フォントは、どの Web サイトでも余分な読み込み時間を追加します。 また、画像のない Web ページの場合、テキスト ブロックが LCP 評価の原因となる場合があります。 その場合、LCP スコアはフォントの影響を直接受けます。

Google Font と Font Awesome は改善を続けていますが、システム スタック フォントを使用すると大幅に改善されます。 デバイスによっては空想的ではありませんが。

13. CDN を使用する

世界各地のユーザーがいる場合、CDN を使用すると速度が向上し、間接的に Core Web Vitals 指標が向上します。

簡単に説明すると、CDN は Web サイトのコピーを多数作成し、それらを世界のさまざまな場所にあるさまざまな Point of Presence (POP) に保存します。 誰かがあなたのウェブサイトをリクエストすると、最も近い場所からあなたのウェブサイトを提供します。

たとえば、サイトが米国でホストされていて、英国からの訪問者がいる場合、米国からサイトを取得する代わりに、CDN は英国からサイトを提供します。 その効果は、迅速な配達になります。 スピード。

そこにある最高の CDN をチェックアウトできます。

14. DNS プリフェッチを設定する

Web サイトの配信を CDN などの外部サービスに依存している場合は、DNS ルックアップによる遅延を最小限に抑えるために、DNS プリフェッチを設定する必要がある場合があります。

DNS プリフェッチは、呼び出される前に DNS をプリフェッチします。 最終的に呼び出されたときに瞬時にロードされるようにします。

15.サードパーティのスクリプトを最適化する

サイトで使用しているサービスの一部が、サイトの速度を低下させる可能性のあるサードパーティのスクリプトを追加していないことを確認してください。

ソリューションをサードパーティのリクエストに置き換えて、サイトをより適切なソリューションに置き換えることができます。

別のサードパーティ スクリプトである Google AdSense に関しては、できることはほとんどありません。 ベスト プラクティスは、1 ページにまとめて最大 3 つの広告を使用することです。 低収入をもたらしますが、読み込み時間が長くなるため、一致するコンテンツは避けてください。

16. スクロールせずに見える範囲から AdSense を削除する

このアドバイスは実験に基づいています。 検索コンソール レポートで LCP を除くすべての指標が良好である場合は、まず画像とフォントが最適化されていることを確認してください。 それらが最適化されていても LCP にまだ失敗している場合は、AdSense が原因である可能性があります。

余裕がある場合は、スクロールせずに見える範囲から 1 か月間 AdSense を削除して、問題が解決するかどうかを確認してください。

削除したくない場合は、手動で、または Flying Scripts などのプラグインを使用して遅延させることができます。

17. AMP に切り替える

AMP は Accelerated Mobile Pages を意味します。 AMP の考え方は、Web ページを最適化してモバイルでの読み込みを高速化することです。 そしてもちろん、AMP オープンソース プロジェクトは Google によって開始されました。

AMP はもともとモバイル ページを高速化することを目的としていましたが、デスクトップ ページを高速化することもできます。

AMP ページは一貫してモバイル ページやデスクトップ ページよりも高速であり、調査によると 100% を超える場合もあります。

ウェブサイトの唯一の収益化戦略が Google AdSense である場合は、すべてのウェブサイトを AMP に切り替えることを検討してください。 個人的に気付いたのですが、私が所有するブログでは、AMP ページの AdSense は、モバイルやデスクトップよりも多くのコンバージョンを達成することがあります。

結論

Core Web Vitals は、Google だけでなくユーザーのためにウェブサイトを改善するのに役立ちます。 ラボ データのテスト スコアが高くても、フィールド データのスコアが低いことはよくあることです。

これは、ユーザーの構成によるものです。 ユーザーのほとんどがインターネットの速度が遅い場所から来ている場合、最適化はうまく行っていても、フィールド データではまだ失敗している可能性があります。