サイト運営者向けのGooglePagespeedInsights-ウェブサイトのページ速度を改善するためのヒント

公開: 2022-05-20

ページの読み込み速度は、検索結果のランキングでGoogleが考慮する主要な要素です。 Googleは、全体的な訪問者エクスペリエンスへの注目を高め、ページの読み込み速度、ページレイアウトの安定性、およびユーザーがページを操作し始めるまでの時間を追跡するためにGoogle CoreWebVitalsを作成しました。

Googleは最近、検索ランキングの要素として、合格/不合格ベースでページの速度とエクスペリエンスの測定を開始しました。 ページエクスペリエンスは、ページの読み込み時間と帯域幅に敏感な広告ブロックユーザーの影響をすでに感じているオンラインパブリッシャーにとってますますベンチマークになっています。

特にサイト運営者は、Googleの新しいページ速度テストとスコアリングアプローチによって悪影響を受ける可能性があります。これは、広告、ヘッダー入札、ターゲティング、およびアドテックツールが全体的なページエクスペリエンスと速度にさらに影響を与える可能性があるためです。 Google PageSpeed Insightsは、本質的にリーチに関連しています。 ページの読み込みが遅い場合、ニュースは先に進みます—そしてあなたを置き去りにします。

GooglePageSpeedInsightsとコアWebバイタルスコア


GoogleはPageSpeedInsightsツールを開発して、サイトのコンテンツと読み込み速度を分析し、サイトのパフォーマンスをスコアリングし、サイト運営者がサイトの速度を改善するのに役立つ情報を提供します。 Googleは、Lighthouseと呼ばれるサイトスピードツールを使用して、デスクトップバージョンとモバイルバージョンでサイトを1から100まで個別にスコアリングし、90以上が良いスコアです。



当初、PageSpeed Insightsは主に読み込み速度の要素に焦点を当てていましたが、最近Googleはサイト全体のエクスペリエンスに焦点を当てるようになりました。 Googleは次のように述べています。「ユーザーエクスペリエンスの品質を最適化することは、ウェブ上のあらゆるサイトの長期的な成功の鍵です。」

PageSpeed Insightsは当初、ウェブサイトのラボテストから追い出されましたが、最近Googleは、ウェブサイト全体のエクスペリエンスの多くに焦点を移し、ウェブサイトのパフォーマンスのフィールドデータを含めました。 彼らは、ユーザーエクスペリエンスの3つの指標であるページの安定性、コンテンツの読み込み速度、ページのエンゲージメント速度に焦点を当てたGoogle Core Web Vitals(CWV)を作成しました。

SEOスペシャリストは、Googleのフィールドデータのみが検索ランキングに使用され、質の高いコンテンツがランキング要素で依然として大きな役割を果たしていると考えています。


ペイウォールのインストールからの実際の成功数を見たいですか?
デモをスケジュールする


GoogleのコアWebバイタルメトリックとは何ですか?

GoogleのCoreWebVitalsは、ページの安定性、ページの読み込み速度、およびページがユーザーの操作にどれだけ速く反応するかを評価する3つの指標です。 Core Web Vitalsは、デスクトップとモバイルの両方のエクスペリエンスについて測定および報告され、Google検索コンソール内および開発者のPageSpeedInsightsページからアクセスできます。 自分のサイトまたは任意のサイトを測定したい人は誰でも、ページのURLを入力してレポートを表示できます。

CoreWebVitals_Scoring

  • 最大のコンテンツフルペイント(LCP)-この評価は、ページがページのメインコンテンツをロードできる速度を示します。 2.5秒以下のLCPは良いスコアです。

  • First Input Delay(FID)-この評価は、ユーザーが実行するアクションにWebページが反応するのにかかる時間を測定します。 この測定のタイマーは、ユーザーが反応する視覚的なものがページにあるときに開始し、ページがその訪問者のアクションに応答できるようになると終了します。 ページが最初にロードしている他の多くのスクリプトに応答しているためにページがユーザーに応答できない場合、FIDスコアが低下します。 パススコアの場合、100ミリ秒以下のFIDが適切なスコアです。

  • 累積レイアウトシフト(CLS) -CLSは、ページとレイアウトの視覚的な安定性を測定します。 タブダウンすると、物事は動き回りますか? 後で読み込まれ、ページレイアウトがシフトする広告、画像、またはページ要素がありますか? その結果、CLSスコアが低くなります。 0.1以下のCLS評価は良いスコアです。

Googleの開発グループによるこのビデオの例は、CLSの問題を示しています。 ユーザーが購入を拒否しようとしていますが、クリック中にレイアウトがシフトし、誤って購入をクリックしたため、非常に不幸な体験になりました。

独自のページ速度監査を行うサイト運営者へのGoogleのガイダンス: 「上記の3つの指標すべての75パーセンタイルで推奨される目標を満たしている場合は、ページの通過を検討してください。」

ページの読み込み速度と主要なウェブバイタルメトリックは、Chromeブラウザ内から利用できるChromeの開発者ツールに統合されています。 Chromeデベロッパーモードでは、読み込みプロセス全体でページのスナップショットを取得し、問題が発生した場所を正確に特定するのに役立ちます。

Chrome-Developer-mode-page-loading-speed
更新:MozのTom Capperによる最近の調査データによると、ウェブサイトのランキングは、コアWebバイタルのしきい値(LCP、FID、CLS)の3つすべてに失敗した場合に主に影響を受けますが、1つまたは2つに失敗しても、ランキング。
CWV-失敗-影響

サイト運営者はどのようにしてページの読み込み速度とコアWebバイタルを向上させることができますか?


サイト運営者は、サイトのパフォーマンスを向上させるために、少なくとも次の3つの手順を定期的に実行する必要があります。まず、ページ速度とインタラクションのテストを定期的に実行し、レポートを確認します。 次に、古いフォントやcssスクリプトなど、未使用または不要な要素が読み込まれていることを確認します。 第三に、画像、CSS、ビデオ、JavaScriptをメモします。これらはすべて、圧縮、縮小、または連結によってサイズと読み込み速度を最適化できます。

以下は、サイトの読み込み時間、主要なWebバイタル、および訪問者のエクスペリエンスを改善するためのパブリッシャー向けの追加の手順とリソースです。

遅延読み込みを実装してFIDWebVitalを改善する

遅延読み込みは、プライマリページのコンテンツとレイアウトが読み込まれて使用可能になるまで、画像やその他の要素の読み込みを延期します。 これにより、帯域幅とFIDメトリックを改善できます。 折り目の上に表示されることのない画像や要素について考えてみてください。これらの要素は、最初のエクスペリエンスが高速でインタラクティブであることを確認するために延期することができます。

Wordstreamは、遅延読み込みをいつどのように実装するかについての優れた記事を提供していますが、CMSシステムを中心に構築された特定のコミュニティを確認することをお勧めします。 Hubspotには、一部の機能に遅延読み込みが組み込まれており、遅延読み込みを自動化するためのWordpressプラグインが多数あります。

コンテンツ配信ネットワークCDNの活用

CDNを活用し、パフォーマンスが適切に構成されていることを確認します。 コンテンツ配信ネットワーク(CDN)は、地理的にユーザーに近いメディアのコピーをホストすることにより、帯域幅とページの読み込み時間を短縮できます。 たとえば、カナダの訪問者はトロントのCDNサーバーによってコンテンツを配信し、インドの同時訪問者はチェンナイからコンテンツを配信し、すべてCDNによって最適に管理される可能性があります。

ページの読み込みを高速化するために画像と動画を圧縮する

大きなメディアファイルは、ページの読み込み時間が遅い場合のコメントの原因の1つであり、対処が最も簡単なものの1つです。 サイト上のすべての画像をサイズでランク付けし、100k以上の画像にすぐに注意を払う必要があります。 Screaming Frogなどのツールを使用してサイトをスパイダーし、すべての大きな画像を数分で識別できます。 Wordpressと最新のCMSシステムには、多くの場合、画像圧縮ツールが組み込まれていますが、自分で確認してください。 tinypngやjpeg-optimizerなど、画像圧縮専用に構築されたサードパーティツールを使用すると、はるかに優れた結果が得られる場合があります。

未使用のJavaScriptファイルを削除して、ページのレンダリング速度を向上させる

あなたのウェブページにはJavaScriptの肥大化がありますか? JavaScriptがレンダリングをブロックしている場合、ページがレンダリングを完了する前に、JavaScriptを呼び出し、ダウンロードし、解析して評価し、実行する必要があります。 未使用のJavaScriptファイルはありますか? JavaScriptファイルは、ターゲティング、CMSシステム、トラッキングピクセルの設定、ソーシャルタグ、フォントの読み込みなどのために積み上げることができます。 Chrome DevToolsのカバレッジ機能を使用すると、JavaScriptの未使用量を詳細に特定できます。

Googleページスピードツールを実行すると、20キロバイトを超える未使用のコードを含むJavaScriptが識別されます。

remove-unused-javascript-pagespeed

CSSとスクリプトを組み合わせたり縮小したりして、ページ速度を向上させます

これらのスクリプトを縮小すると、マシンの可読性は維持されますが、ロードがはるかに高速になります。 スクリプトを縮小するために利用できるツールがいくつかあります。 RankRedは、スクリプトミニファイツールと説明の優れた品揃えをまとめました。 JavaScriptまたはCSSファイルを連結すると、サーバーへの移動を節約することもできます。

コアWebバイタル用のキャッシュの最適化

キャッシュ戦略は、Cache-controlやLast-ModifiedなどのキャッシュPI機能全体で、使用しているサイトのタイプに合わせて確認する必要があります。 Googleの開発者は、キャッシュオプションのガイダンスとチェックリスト、および一般的なサーバーの構成オプションを提供しています。 パフォーマンスを評価するためにGooglebotが到着する前にページがすでに最適化されるように、キャッシュをプリロードすることをお勧めします。

WPツールメーカーのWPRocketは、キャッシュのプリロードがページ速度を向上させるための重要な助けになる可能性があることを示唆し、説明するためにこのビデオを作成しました。

ブラウザがレイアウトシフトを回避するためにスペースを割り当てるのを助ける

  • 画像の高さと幅の属性を指定して、後で読み込みが遅れる場合でも、ブラウザがそれらの領域を計画できるようにします。
  • 広告、iframe、動的コンテンツ用のスペースを予約します。 コンテナを使用して、レンダリング時のレイアウトシフトを回避します。
  • link rel="preload"を使用してフォント表示を最適化することを検討してください  およびfont-display:オプション。

Analyticsを実行する

PageSpeedテストを頻繁に実行すると、コアWebバイタルについてより多くの洞察を得ることができます。 ページ速度スコアを確認できるだけでなく、読み込まれている要素の数と読み込み速度も確認できます。 レポートを詳しく調べて、ページの速度を低下させている可能性のある要素を特定します。 さまざまなレベルの詳細を表示し、ページの読み込み、ページの速度、検索エンジンの最適化に関するレポートを作成するための一般的なツールをいくつか紹介します。

  • Google PageSpeed Insights
  • GTmetrix
  • Pingdomページ速度監視
  • WebPageTest

ページ速度の最適化に関するより技術的で詳細な議論のためのいくつかの推奨事項は次のとおりです。

  • サイトの速度を向上させる方法Wordpress
  • Nitropack:コアWebバイタルを測定および改善する方法
  • SearchEngineWatch-あなたのサイトを過給する28の方法
  • Toptal-GoogleのPageSpeedInsights評価に対応
  • SmashingMagazine-コアWebバイタルを測定するためのガイド
  • Web.dev-高速な読み込み時間でサイトのパフォーマンスを向上

仕切り

あなたの将来の計画に有料の潜水艦はいますか?

admiral_webinar-paid-subscriptions_recorded_921_600p


Admiralがパブリッシャーのパフォーマンスの向上にどのように役立つか

Admiralは、特にページの速度、広告エクスペリエンス、Better Ads vs Bad Adsなどについて書いたり話したりすることで、サイト運営者にとってページエクスペリエンスの重要性を早期に提唱していました。 サイトエクスペリエンスを改善すると、消費者による広告ブロックソフトウェアの使用を減らすことができます。

さらに、多くのアドテックベンダーはポイントソリューションに重点を置いていましたが、アドミラルは、サイト運営者の技術的負荷を軽減するように設計された、訪問者との関係の過程全体でソリューションを提供する水平エンゲージメント自動化プラットフォームを構築しました。

ポイントソリューションは、出版社の技術的負債を増やす

ポイントソリューションを使用すると、パブリッシャーは多くのタグ、統合、ターゲティング決定エンジン、開発チームとの話し合いなどを行うことができます。ニュースレターの成長、アドブロックに別々のシステムを使用すると、本質的にページ速度とUXに影響を与えるフランケンシュタインのモンスターを作成します。回復、同意管理、有料サブスクリプション、登録ウォール、ソーシャルフォロワーの成長など。


100以上の顧客シナリオにわたるサードパーティの速度テストによって検証された提督

Admiralは、パブリッシャーがCore Web Vitalsを最適化するのを積極的に支援し、全国的に認められたデジタルエージェンシー(Anvil Media)と契約して、Admiralのワンタグソリューションの速度とCoreWebVitalsへの影響を厳密にテストしました。

Anvilのページ速度の専門家は、15の顧客サイト、すべてのAdmiralソリューションモジュール、デスクトップとモバイル、5日間、測定前後、および3つのCWVメトリックすべてでAdmiralタグをテストしまし全部で300以上のデータポイント。

アンビルのテストチームは、アドミラルのタグが顧客とモジュール全体のCWVスコアに重大な悪影響を及ぼさないことを確認しました。 実際、Admiralのマルチモジュールタグは、サイト運営者が無駄なポイントソリューションタグを排除し、ページ速度を長期的に最適化するための強力なツールです。

Admiralは、複数のポイントソリューションを統合されたマーケティングオートメーションに置き換えます

Admiralの1タグインストール、および水平ビジターリレーションシップマネジメントプラットフォームを使用することにより、パブリッシャーは、ビジタージャーニー全体に対して、速度が最適化された1つのタグ、管理する単一のベンダーリレーションシップ、ローコード/ノーコード展開、エンゲージメント全体での一貫したユーザーエクスペリエンスを実現します。 、およびAdmiralのAIがバックグラウンドで実行され、訪問者の旅を最適化して収益を促進します。 これにより、1つの小さく、速度が最適化されたタグと、多くの競合する冗長なタグ、およびよりスリムでより効果的なWebページが作成されます。


Admiralが無駄なタグの削除、ページ速度の最適化、アドブロック収益のロック解除、サブスクリプションなどの新しい収益チャネルの促進、訪問者のエンゲージメントの拡大に​​どのように役立つかについて詳しくは、今すぐデモをリクエストしてください。

デモをスケジュールする