完全な WebVitals スコア: 神話を実現する

公開: 2022-06-20

ページの速度は、SEO コミュニティの最近の中心的な議論であり、Google の新しい速度指標である WebVitals に大きな刺激が与えられています。

Google やその他の検索エンジンは、かなり長い間、ユーザー エンゲージメントが重要なランキング要素であると主張してきました。 当然のことながら、Web 管理者はそれ以来、最高のページ速度スコアに到達しようと努力してきました。

最適化の取り組みは、理想的なページ速度スコアに関するいくつかの神話に基づいています。 ページ速度と Web Core Vitals について質問がある場合は、お気軽にお問い合わせください。

しかし、これは Google による Core WebVitals の導入で終わりました。

新しい WebVitals 指標の発表により、ページ速度をめぐるすべての論争が解消されました。

最近の Web サイトは、Pagespeed Insights、Pingdom、GTMetrics、Measure、WebPageTest.org などのツールで累積されたスコアに集中しています。

Web ページの速度をチェックするには、高度なツールが効果的であることは間違いありません。 ただし、全体的な速度スコアではなく、ユーザーにとって重要な個々の速度スコアに焦点を当てる必要があります。

Google の Core WebVitals メトリクスが導入され、ウェブ管理者が質の高い時間を費やして、ユーザーにとって何よりも重要な速度メトリクスを改善できるようになりました。

ページ速度スコア 99

Core WebVitals とは何ですか?

Google によると、WebVitals は、Web 上で優れたユーザー エクスペリエンスを提供するために必要な速度信号を分析する統一指標です。

Google の事前発表は、WebVital コンプライアンスが 2021 年に始まる Google のランキング シグナルへの最新のエントリになることを確認しています。2021 年にはすでに開始されており、開発チームはすぐに Core Vitals に取り組み始める必要があります。

ウェブサイトの所有者は、コア ウェブ バイタル、モバイル フレンドリー、安全なブラウジング、HTTP セキュリティなどのユーザー エクスペリエンスの指標が、将来の Google アルゴリズムの更新による影響を回避するために考慮されていることを確認する必要があります。

コア ウェブ バイタル指標

コア WebVitals は、2020 年 5 月に Google によって導入された重要な指標です。 サイトの速度、応答性、視覚的な安定性に基づいてページに割り当てられるスコアです。 Google では、これら 3 つの指標を次のように分類しています。

  1. Largest Contentful Paint (LCP) : ページの主要なコンテンツの読み込みにかかる時間です。 理想的な LCP 測定は 2.5 秒以上である必要があります。
  1. First Input Delay (FID) : ページがインタラクティブになるまでにかかる時間で、理想的な値は 100 ミリ秒未満です。
  1. Cumulative Layout Shift (CLS) : ページの視覚的な安定性を測定します。 CLS の推奨測定値は 0.1 未満です。

コア Web バイタル速度スコアは、Web テクノロジの進歩に基づいて、時間の経過とともに変化する可能性があります。 さらに、スコアは、ユーザーが優れた Web エクスペリエンスとして認識するものに基づいて変更される可能性があります。

完璧な WebVitals スコアを達成するには?

ほとんどの SEO は、ページのタイトルや説明を変更するよりも多くの専門知識を必要とするため、Web サイトの速度が遅いことを見過ごしています。 その上、望ましい結果を達成するためには、技術的な SEO についてある程度の専門知識を持っていることが最善です。

キャッシュ プラグインを追加し、画像、CSS、および JavaScript を最適化することは、ウェブマスターが考え出す簡単な修正です。 これらの最適化の取り組みは、サーバーの応答時間を改善し、全体的なリソース サイズを削減するのに役立ちます。

しかし、私たちの調査によると、これらの簡単な修正にもかかわらず、Web サイトは理想的な Core WebVitals スコアを達成できなかったことがわかりました。

これが理由です:

  1. キャッシュ プラグインは、サイトのパフォーマンスを向上させ、ユーザーがサイトに戻ったとき、または同じセッション中に複数のページを閲覧したときにのみ、サーバーの応答時間を短縮します。 キャッシュがすぐに期限切れになると、この利点は無駄になります。
  2. 画像、JavaScript、および CSS は、サイト全体のルック アンド フィールに不可欠です。 ただし、これらのそれぞれに対する一連の応答が遅れると、ひどいユーザー エクスペリエンスが発生する可能性があり、通常はサイトが壊れてしまいます。
  3. CMS を実行している場合、各リソースを最適化するために複数のプラグインまたはアプリが必要になる場合があり、サイトがさらに遅くなります。

これから学習する戦略は、多くのお客様に有効であり、このプロセスに従って完全な WebVitals スコアを達成できるように導きました。

同じ Web サーバーがプライマリ リソースとセカンダリ リソースを配信しようとする場合、理想的な WebVitals スコアを達成することは問題になることに気付きました。

ただし、WP-Engine や AWS などのホスティング プラットフォームには、上記のすべての機能が備わっています。 今後は、そのようなホスティング プロバイダーを選択することが鍵となります。つまり、ホストを決定する前に SEO が開始されることを意味します。

WP-Engine と Amazon Web Server でホストされている一部の Web サイトが、どのようにして優れた WebVitals スコアを達成しているのか疑問に思うかもしれません。 心配しないで; このブログの残りの部分では、それについて説明します。

WebVitals のリソース最適化

ページの読み込み時間が遅くなる要因はいくつかあります。 まず、大量の画像ファイル、CSS ファイル、Javascript、およびそれぞれからのリクエストにより、ブラウザのペイロードが増加し、ユーザーを長時間待たせます。

幸いなことに、Google が推奨するソリューションの中には、ROI を向上させながらサイトのユーザー エクスペリエンスを改善できるものがあります。

同じ手法を使用して、クライアントの完璧な WebVitals スコアを取得しました。

1) ページ速度のために画像を最適化する

画像ファイルが大きいと、ブラウザで最大のペイロードが発生します。 したがって、これらの画像を最適化すると、サイトの速度が向上し、ユーザー エクスペリエンスが向上します。

イメージ CDN: イメージが同じサーバーから読み込まれる場合、サーバーに多くの負荷がかかる可能性があります。 この問題を解決する効果的な方法は、CDN サーバーを利用することです。 優れた Image CDN プロバイダーを探している場合、現在 AWS と Cloudflare が最有力候補です。

WebP 形式:選択した CDN が画像を WebP 形式 (Web 画像の Google 推奨画像形式) に変換することも確認する必要があります。

LazyLoad:遅延読み込み手法を組み込むと、WebVitals スコアも向上します。 画面上の画像リソースのみが最初のペイロードに付属しています。

画面外の画像は、視聴者がサイト上の特定の画像の視点に到達したときに読み込まれます。 読み込みプロセス中の改ページを避けるために、画面外の画像のサイズのみが読み込まれます。

2) Java と CSS の最適化

GZip 圧縮: GZip 圧縮は、ほとんどの Web サイトで標準的な方法になっています。これにより、ファイルが小さくなり、ネットワーク転送が高速化されます。

リソースの縮小: JavaScript と CSS を最適化するための最初のステップは、これらのリソースを縮小することです。 縮小化は、プロセスの速度を上げるために、重要でない冗長なリソースを削除するプロセスです。 これは、多くの最適化プラグインによって提供される標準機能です。

CSS と Javascript を組み合わせる:読み込みに単一のファイルを使用することで、JavaScript コードと CSS はリクエスト数を削減し、レンダリングを高速化します。

有効にすると、1 つのファイルですべての CSS リソースが配信され、各リソースはメディア タイプ別に編成されます。

JavaScript についても同様です。 その結果、DOM リクエストの数を減らすことができ、全体的な速度パフォーマンスが向上します。

レンダリング ブロッキングの削減: PageSpeed スコアが遅い一般的な理由の 1 つは、Javascript と CSS の多用です。 一部の Java および CSS ファイルは Web サイトの全体的な安定性にとって重要ですが、すべてがスクロールせずに見える範囲で読み込まれるわけではないため、レンダリングがブロックされます。

重要でない JavaScript と CSS の実行を最適化することは不可欠です。 これらのファイルは、サイトとのユーザー インタラクションが検出された後にのみレンダリングされるようにしてください。 これにより、PageSpeed スコアが向上し、完璧な WebVitals スコアを達成するのに役立ちます。

ここまでで、多くの人が考えているかもしれませんが、これらはすべて実行しましたが、WebVitals スコアは Google が期待するものに達していません。 その場合は、CSS および Java 配信の重要な側面の 1 つである CDN を見逃している可能性があります。

CDN を使用して CSS と JavaScript を配信する: JavaScript と CSS を読み込むための CDN を実装するまでは、これらすべてのリソースを配信するためにサーバーの速度にプレッシャーがかかります。

CDN がなくても、ほとんどの場合、サーバーにかかる負荷を減らすことができますが、それでも負荷がかかります. ただし、私たちのテストでは、それが有効になっている Web サイトで驚異的な結果が得られました。

3) フォントの最適化

フォントのレンダリング動作は、非常に重要な速度低下要因です。

フォントがペイロードからロードされない限り、ブラウザーはテキストをレンダリングしません。 これにより、ページのレンダリングが遅延し、ページ速度が遅くなります。

フォントを最適化するには、CDN がフォントのレンダリング動作をオーバーライドできることを確認してください。 たとえば、優れた CDN は、レンダリングされたテキストのフォントを切り替えて、CSS から読み込まれるとすぐに元のフォントを表示できます。

通常、両方のリソースが同じ CDN サーバーから同時に配信されるため、これは数マイクロ秒以内に発生します。 これにより、累積レイアウト シフトが大幅に減少し、完璧な WebVitals スコアが得られます。

4) 埋め込みコード

サイトに画像や動画を埋め込むと、サイトに大きな影響を与え、速度が低下する可能性があります。 ただし、これらのビデオは製品のデモや紹介ビデオの一部であるため、ほとんどの企業はこれらのビデオを排除できません。

Google では、これらのアセットを遅延読み込みできる埋め込み画像と動画のソリューションを推奨しています。 また、ユーザーが [メディア/ビデオの再生] ボタンを選択した場合にのみ、ビデオ リソースが読み込まれるようにします。

これを実装したところ、Lighthouse のパフォーマンスが 70% 向上しました。

5) AMP ページ

遅いサーバーは、Web サイトのパフォーマンスに大きな影響を与える可能性があります。 AMP キャッシュは配信の最適化に役立ちますが、デスクトップ向け AMP を有効にすると、UI が大幅に変更され、変換に影響を与える可能性があります。 そのため、サーバーの応答性と高速性を確保することは、依然として重要なタスクです。

結論

一部の Web サイト所有者は、Core Web Vitals の導入に圧倒されるかもしれません。 ただし、完璧な Web Vitals スコアを達成することは、ユーザー エクスペリエンスの向上とコンバージョンの向上を約束します。

Google によると、モバイル デバイスとデスクトップの世界の平均読み込み時間は 3 秒未満です。 ただし、Google で上位 3 つの Web サイトのリストを確認すると、ほとんどの Web サイトで 4 秒未満のページ速度が達成されています。

Web サイトの読み込み速度が遅い場合、訪問者は Web サイトを離れて代わりに競合他社のサイトにアクセスする可能性があります。

多くの場合、これは「クリック レイジ」に終わります。 クリック激怒は、ユーザーがアクションを試みても結果が得られない場合に発生します。 これはフラストレーションの原因となり、ユーザーは同じサイトに再度アクセスできなくなる可能性があります。

HotJar などのツールを使用してクリック レイジを検出することは、Web サイトの所有者にスピード エクスペリエンスを改善するよう警告することです。

Google がこれらの指標を提示することで、ウェブマスターはサイトを最適化して SERP ランキングを改善し、何よりもユーザー エクスペリエンスを優先することが容易になります。

SEO Inc には、興味のある別の更新された Web Core Vitals 記事もあります。

著者略歴:

Stan Ventures のマーケティング担当副社長であるSenthil Kumar Hariramは、SEO 業界で 14 年以上の経験があります。 Senthil は、Stan Ventures とその 100 以上のグローバル クライアントのコア マーケティング戦略を率いています。 Senthil は「SEO On-Air」というタイトルのポッドキャスト シリーズを主催し、Garry Grant、Neil Patel、Rand Fishkin、Bruce Clay、Barry Schwartz などのさまざまな SEO 業界のリーダーと、人気のある SEO 成長のハックと戦略について対話します。 . リンクトイン

Garry Grant、SEO Inc CEO : Garry Grant   は、検索エンジン最適化とデジタル マーケティングのベテラン専門家です。 25 年以上の経験を持つ Garry は、SEO, Inc. でマルチサービス オペレーションの構築に成功し、複雑な戦略的ソリューションを通じて独自のテクノロジを開発しました。 さらに、情報技術とパフォーマンス管理に基づいた重要なイニシアチブと運用責任において豊富な経験を持っています。

リンクトイン