コアウェブバイタル（アドセンス）のためにあなたのウェブサイトを最適化する方法
Core Web Vitalsをパスするのに一生懸命努力していますか？ CWVスコアを改善するための簡単で実用的な方法をいくつか紹介します。
CoreWebVitalsを改善するための競争は簡単なものではありません。 あなたがあなたのウェブサイトを収益化するためにグーグルAdSenseのような広告プログラムに頼るならば、それはより難しくなります。
Google AdSenseを実行しているWebサイトは、GoogleAdSenseがインストールされていない同じWebサイトよりもコアWebバイタルテストに失敗する可能性が10倍高くなります。 これは主に、GoogleAdSenseがウェブサイトに追加するサードパーティのリクエストとアセットの数によるものです。 これらの資産のほとんどは、最適化されておらず、大きく、ユーザーフレンドリーではありません。
AdSenseと広告プラットフォーム以外で、最適化されていない画像、JavaScript、CSSが特に多くある場合は、CoreWebVitalsテストに失敗する可能性が非常に高くなります。
Core Web Vitalsテストに合格し、検索エンジンランキングの可能性を高めるのに苦労している場合は、この記事で実用的な解決策を見つけることができます。
コアWebバイタルとは何ですか？
Core Web Vitalsは、Google Lighthouseを利用した指標であり、サイトが優れたページエクスペリエンスをどのように提供しているかを判断します。 テストの実行には多くのメトリックがありますが、最も重要なメトリックは、最大コンテンツペイント（LCP）、最初の入力遅延（FID）、および累積レイアウトシフト（CLS）です。
Googleは、2021年5月からこれらの指標が検索結果におけるウェブページの順位を決定するために使用されるランキングシグナルの一部となることを発表しました。
要約すると、Core Web Vitalsは、Webマスターにとっての恐怖ではなく、Webサイトのページエクスペリエンスを向上させる手段であると言えます。
最大コンテンツペイント (LCP)：LCPは、ウェブページ上で最も大きく表示される画像またはテキストブロックの読み込みにかかる時間を測定します。最も大きく表示されるテキストまたは画像が速く読み込まれると、残りの画像やテキストも速く読み込まれると認識されます。合格に必要な読み込み時間は2.5秒です。
初回入力遅延 (FID) : FID は、ウェブページのインタラクティブ性を測定する指標です。これは、ユーザーがサイトをクリックしてからブラウザがイベントハンドラの処理を開始するまでの時間によって決まります。これは一般的に、ウェブサイトの第一印象と呼ばれています。必要な時間は100 ミリ秒です。
累積レイアウトシフト (CLS)：CLS は、ウェブページで発生するレイアウトシフトを測定します。ウェブページが読み込まれた後、何かが突然表示または非表示になり、ページが大きくなったり小さくなったりして調整する必要がある場合、そのシフトが測定されます。これはユーザーエクスペリエンスにとって非常に悪いものであり、私も同感です。合格に必要なスコアは0.1です。
コアWebバイタルのためにあなたのウェブサイトを最適化する方法
次の手順に従って、Webサイトを最適化します。
1.高速ウェブホストから始めます
応答時間がひどいWebホストがある場合、ここにリストする他のすべてのものは、望ましい結果をもたらさない可能性があります。 サーバーがリクエストに応答する速度が速いほど、優れています。
最初のバイトまでの時間（TTFB）が速いWebホストが重要なのはなぜですか？ TTFBは重要ではないと主張する人もいますが、問題はありません。 それが他のすべての基盤です。 インターネットが遅い都市にユーザーがいる場合、Webホストがどれだけ速く応答できるかがすべてを意味します。 主に超高速インターネットを使用する都市のユーザーがいる場合は、どのWebホストでもパフォーマンスが向上します。
ウェブホストが 3G ではなく 2G または 4G にどのように応答するかをテストしてみてください。3G または 2G 経由で接続するユーザーが多いと、Core Web Vitals スコアが加算されます。したがって、100 ミリ秒も重要です。FID が 101 ミリ秒の場合と 100 ミリ秒の場合の違いは、101 ミリ秒の場合は合格ですが、1 ミリ秒の場合は不合格になるということです。したがって、XNUMX ミリ秒は問題ではないと言う人がいたら、その人は間違っている可能性があります。
ウェブホスティングサービスを選ぶ際は、ウェブサイトのユーザーの大多数に近いデータセンターを選ぶようにしましょう。ユーザーの所在地は、アナリティクスを確認することで把握できます。ユーザーのほとんどがどこからアクセスしているかを確認し、その地域に近いデータセンターを選びましょう。近ければ近いほど良いでしょう。
ウェブホストを変更した後、コアウェブバイタルのウェブサイトのフィールドデータに大きな変化があることに個人的に気づきました。 私は他に何もしませんでした。
高速なウェブホスティングサービスをお探しなら、アフィリエイトによる宣伝ばかりで誠意のないサービスが数多く存在します。WordPressを運用していて予算に余裕があるなら、Kinstaを強くお勧めします。WordPressには最適です。もっと安価なサービスが必要な場合や、WordPressを使用していない場合は、Cloudwaysも非常に効果的です。
2.軽量で速度が最適化されたテーマを使用する
このヒントは、非コーダーにとって、さらには時間のかからないコーダーにとっても非常に役立ちます。 特に、オプションが非常に多いWordPressを使用している場合は、軽量で速度が最適化されたテーマを使用するようにしてください。
テーマはウェブサイトのスケルトンのようなものなので、スケルトンが壊れると本体が壊れてしまいます。 それだけです。
テーマを選ぶ際に考慮すべきベストプラクティスは数多くあります。よくある悪い例としては、jQueryへの過度な依存、必要のないCSS/JSの過剰な読み込み、テーマサイズの肥大化などが挙げられます。デモをテストするには、Yellow Labsのようなツールをいつでも利用できます。
WordPress を使用している場合は、最速の WordPress テーマのリストを確認できます。
3。 画像を最適化する
画像はかっこいいです。 彼らはコンテンツをとても魅力的にします。 ただし、最適化されていない場合は、負担になる可能性があります。 3 MBのような大きな画像があると、速度に間違いなく影響します。 また、スクロールする前にサイトにアクセスしたときにこれらの画像が表示されている場合は、LCPメトリックに確実に影響します。
真実は、最適化されていない画像がページのサイズに追加されるということです。 ページサイズが大きいほど、読み込みに時間がかかります。
個人的には、アップロードする前にすべての画像を最適化することを好みます。画像の最適化に外部のサービスは使用していません。ただし、WordPress または同様の CMS を使用している場合は、画像を自動的に最適化するプラグインやソリューションがあります。また、使用するものに関係なく、クラウド ソリューションもあります。
4.背景画像のサイズを削除または縮小します
背景画像は通常非常に大きいです。 また、意味のあるコンテンツが表示される前に最初にロードする必要があるため、ロード時間が遅くなる可能性があります。
背景画像を完全に削除して、より高速なWebサイトを作成できます。 それらが非常に重要な場合は、可能な限り最小のサイズに最適化するか、画像の代わりにパターンを使用することを検討してください。
5.ブラウザのキャッシュを使用する
忠実な読者がたくさんいる場合は、ブラウザのキャッシュを検討する必要があります。 ユーザーが初めてWebサイトにアクセスすると、ブラウザはそのWebサイトをキャッシュします。 XNUMX回おきにアクセスすると、すぐに読み込まれます。 これにより、XNUMX回目の訪問以降のFIDとLCPを大幅に改善できます。
WordPressユーザーの場合、ほとんどのキャッシュプラグインがこれを実現するのに役立ちます。
6. JavaScriptを縮小し、未使用のJavaScriptを延期します
JavaScriptは素晴らしいものですが、多くの場合、レンダリングがブロックされます。 これは、ロード時間、そして最終的にはFIDに影響を与える可能性があることを意味します。
ファイルサイズを小さくするために空白とコメントを削除してJavaScriptを縮小してみてください。 また、重要ではないJavaScriptを延期するようにしてください。 これにより、FIDが向上するはずです。
WordPressユーザーであれば、Autoptimize、WP Rocketなどのプラグインを使えば、こうした作業を自動で行うことができます。
7.AdSenseサイズ属性を設定します
ウェブサイトでAdSenseを実行していて、CLSに苦労している場合は、これですべての問題を解決できます。 それは私のためになりました、そしてそれはあなたのためにすべきです。
ユーザーがアクセスしたときに表示されるヘッダーの近くに広告ユニットがある場合、XNUMXつの問題は、広告がすぐに読み込まれない可能性があることです。 ページが既にロードされた後にロードされる場合があり、ロードされると、レイアウトにシフトが生じます。 これはレスポンシブ広告ユニットでは非常に一般的です。 そのため、CLSメトリックを渡すことは不可能です。
これを処理する最良の方法は、AdSenseコードを少し編集することです。 心配ありません、それは非常に合法です。 広告のサイズ属性、特に高さを指定するだけです。 これを行うと、広告が読み込まれるたびにレイアウトのずれに気付くことはなくなります。
以下は、ブログのヘッダーのすぐ下で使用したレスポンシブ広告ユニットの例です。 サイト運営者IDと広告スロットをXXXXXXに置き換えました。 height属性（min-height：300px）を追加したことに気づきました。 私がそれをした瞬間、すべてのCLSの問題は永遠になくなりました。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
style="display:block; min-height: 300px"
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.画像やその他のメディアのサイズ属性を設定します
広告の場合と同様に、画像やその他のメディアは、ウェブサイトに読み込まれるときにレイアウトがずれる可能性があります。 何かを読んでいるだけで、画像が読み込まれ、突然レイアウトがずれたり、読んでいたものが見えなくなったり、他の何かが表示されたり、誤って他の何かをクリックしたりする場合があります。
メディアファイルに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 がウェブサイトの速度低下の原因である場合、ほぼすべての課題を完全に排除できます。
これは、AdSense をスマートに読み込む方法です。ユーザーがスクロールやクリックなどのアクションを実行するまで、AdSense は読み込まれません。これにより、読み込み時間と、AdSense の影響を受けるコア ウェブ バイタルが大幅に改善されます。
WordPressには、これを実現できるプラグインが多数あります。WP RocketやFlying Scriptsなどがその例です。私の知る限り、この方法はGoogle AdSenseのポリシーに違反しません。
注：この方法は、体感速度やページスコアの向上に役立つ可能性がありますが、AdSenseの収益に影響を与える可能性があります。効果があるかどうかを確認するために、実験を行うことをお勧めします。
12.可能であれば、システムスタックフォントを使用します
フォントは、どのWebサイトでも読み込み時間を長くします。 また、画像のないWebページの場合、テキストブロックがLCP評価の原因となる可能性があります。 この場合、LCPスコアはフォントに直接影響されます。
GoogleFontとFontAwesomeは引き続き改善されていますが、システムスタックフォントを使用すると大幅に改善されます。 デバイスによってはそれほど空想的ではありませんが。
13. CDNを使用する
世界のさまざまな地域からのユーザーがいる場合は、CDNを使用すると、速度を向上させ、間接的にCoreWebVitalsメトリックを向上させることができます。
簡単な説明のCDNは、Webサイトのコピーを多数作成し、世界のさまざまな地域のさまざまなPoint of Presence（POP）に保存します。 誰かがあなたのウェブサイトを要求すると、それは最も近い場所からあなたのウェブサイトを提供します。
たとえば、サイトが米国でホストされていて、英国からの訪問者がいる場合、米国からサイトを取得する代わりに、CDNは英国からサイトにサービスを提供します。 その効果は短納期になります。 スピード。
おすすめのCDNをチェックしてみてください。
14.DNSプリフェッチを設定します
ウェブサイトの配信にCDNなどの外部サービスを利用している場合は、DNSルックアップによる遅延を最小限に抑えるために、DNSプリフェッチを設定する必要があるかもしれません。
DNSプリフェッチは、呼び出される前にDNSをプリフェッチします。 最終的に呼び出されたときに瞬時に読み込まれるようにします。
15.サードパーティのスクリプトを最適化する
サイトで使用しているサービスの一部が、サイトの速度を低下させる可能性のあるサードパーティのスクリプトを追加していないことを確認してください。
ソリューションをサードパーティのリクエストに置き換えて、サイトの速度を低下させることができます。
別のサードパーティのスクリプトであるGoogleAdSenseに関しては、できることはほとんどありません。 ベストプラクティスは、3ページに最大XNUMXつの広告を統合して使用することです。 収入は少なくなりますが、読み込み時間が長くなるため、一致するコンテンツは避けてください。
16.スクロールしなければ見えない位置からAdSenseを削除します
このアドバイスは実験に基づいています。 LCPを除くすべての指標が検索コンソールレポートで適切である場合は、最初に画像とフォントが最適化されていることを確認してください。 それらが最適化されていて、それでもLCPに失敗している場合は、AdSenseが原因である可能性があります。
余裕があれば、AdSenseをXNUMXか月間上から削除して、問題が解決するかどうかを確認します。
削除したくない場合は、手動で、またはFlyingScriptsなどのプラグインを使用して遅延させることができます。
17.AMPに切り替えます
AMPとはAccelerated Mobile Pagesの略です。AMPの目的は、モバイル端末でウェブページをより速く読み込めるように最適化することです。そしてもちろん、AMPのオープンソースプロジェクトはGoogleによって開始されました。
AMPは元々、モバイルページの速度を上げることを目的としていましたが、デスクトップページの速度を上げることもできます。
AMPページは、モバイルページやデスクトップページよりも一貫して高速であり、私たちの観察によれば、100％を超えることもあります。
ウェブサイトの唯一の現金化戦略がGoogleAdSenseである場合は、すべてのウェブサイトをAMPに切り替えることを検討してください。 私が所有するブログでは、AMPページのAdSenseがモバイルやデスクトップよりも変換されることがあることに個人的に気づきました。
結論
コアWebバイタルは、GoogleだけでなくユーザーのWebサイトを改善するのに役立ちます。 ラボデータのテストスコアは良好ですが、フィールドデータのスコアは不良であることが非常に一般的です。
これは、ユーザーの構成によるものです。 ほとんどのユーザーがインターネットの速度が遅い場所から来ている場合は、最適化はうまくいっていても、フィールドデータで失敗している可能性があります。
関連記事
