WordPress サイトのコア Web バーチャルを改善するには?

公開: 2023-02-09

デジタルマーケティングでスピードが重要な理由レンダリング時間の短縮を経験したユーザーは、ページにとどまり、ブラウジングする可能性が高くなります。これは、全体的なSERPランキングにプラスの影響を与える可能性があります. さらに、Web ページが最初の表示領域をレンダリングするのにかかる時間は、検索エンジンにとってますます重要になってきています。実際、Google のすべてのランキング要因のほぼ半分が、ユーザーエクスペリエンスの向上に直接関係しています。検索エンジンは、コア Web バイタル (CWV) として知られる読み込みのいくつかの側面を含む、特定のランキング要素を強調することで知られています。ページエクスペリエンスは、ランキングに直接影響するだけでなく、ユーザーがコンテンツを閲覧する際のエンゲージメントや、コンテンツに戻る可能性にも影響を与える可能性があります。

Core Web Vitals の 3 つのコンポーネント

Google のアルゴリズムは、高品質でユーザーフレンドリーなサイトを促進し、品質基準を満たしていないサイトを格下げするために、継続的に変更されています。これらのアルゴリズムの一部はコア Web バイタルであり、最近の幅広いアップデートのロールアウトで重要な役割を果たしています。 Google の CWV の目的は、開発者がサイトのパフォーマンスを最適化する際に、ユーザーエクスペリエンスにもっと集中するよう促すことです。

Largest Contentful Paint、First Input Delay、Cumulative Layout Shift — これらは、コア Web バイタルの 3 つのコンポーネントです。

最大のコンテンツペイント— 最大のコンテンツペイント (LCP) は重要な基準です。これは、Web サイトの視覚的認識が画面の最大要素の読み込み速度に大きく影響されるためです。 DOM コンテンツがロードされてから、ユーザーが画面に何か (大きな画像やテキストのブロック) を表示するまでの時間は、CPL (コンテンツペイントの待ち時間) です。基本的には、ユーザーがクリック (たとえば、ページをロードするため) してから、何らかのコンテンツが表示されるまでの時間です。コンテンツの描画に 4 秒以上かかると、SEO スコアに悪影響を及ぼす可能性があります。
最初の入力遅延— 最初の入力遅延は、何かをクリックした後にページが入力に応答する時間です。 FID は通常、ミリ秒 (ms) 単位で測定されます。たとえば、ユーザーがサイト要素をクリックし、画面が新しい情報で更新されるのを待つ場合、ブラウザはこのアクションを処理して結果を配信します。 FID が短いほど、ユーザーはより迅速にページをナビゲートし始めることができ、より長い時間ユーザーを維持してコンバージョンを増やすことができます。 Google は、優れたスコアの場合は 100 ミリ秒、低いスコアの場合は 300 ミリ秒の最初の入力遅延を許容することを明らかにしました。
累積的なレイアウトシフト— ページを下にスクロールしていて、ページの大部分が上にシフトしていることに突然気づいたことはありませんか? 累積レイアウトシフト (CLS) は、コンテンツが描画された後にページ内を移動することです。その結果、特にテキストが多い場合、ユーザーはページのコンテンツを理解して再解析する必要があります。累積レイアウトシフトスコアが 0.1 未満であれば十分であり、0.25 未満であれば不十分です。

WordPress サイトのコアウェブバイタルを測定する方法

WordPress Web サイトのコア Web バイタルを最適化し、Web サイトが最大の効率レベルで実行されるようにするには、重要なデータポイントを監視、追跡、分析するために必要なすべてのツールを配置することが不可欠です。

Googleサーチコンソール

実際のユーザーデータを測定した後、Search Console は、Web サイトのデスクトップバージョンとモバイルバージョンについて、問題が見つかったページ数を含む CWV レポートを生成します。ステータス (悪い、改善が必要、良い)、コア Web バイタル (CLS、FID、LCP)、および同様のページのグループに基づいて、URL のパフォーマンスをカバーします。 URL に特定の指標のレポートデータが十分にない場合、その URL はレポートに含まれないことに注意することも重要です。

PageSpeed インサイト

同時に、PageSpeed Insights を使用すると、Google のクローラーとユーザーの視点からサイトを表示し、ページの問題を分析し、パフォーマンスを改善するための提案を提供できます。このレポートにより、どのリソースが読み込み時間の増加に寄与しているかをよりよく理解できます。また、ページに関する重要な洞察を提供し、必要な変更を行う方法を知らせるレポートも取得します。

SEランキング

上記のツールに加えて、SE Ranking による Web サイト監査では、デスクトップバージョンとモバイルバージョンに個別にコア Web バイタルセクションも提供されます。このツールは、Web サイトに発生する可能性のある技術的な問題を検出するため、SEO スペシャリストにとってさらに有益な場合があります。監査結果に基づいて、このツールは Web サイトの全体的な正常性スコアと、パフォーマンスに影響を与える問題のリストを詳細な説明と解決方法のヒントと共に提供します。

最も一般的な Core Web Vitals の問題とその修正方法

1- サーバーが遅すぎる

すべての WordPress Web サイトが同じように作成されているわけではないことを覚えておくことが重要です。これにより、一部の Web サイトのパフォーマンスが、同じ設定の他の Web サイトよりも遅くなる可能性があります。これは、インストールしたプラグインの数、スクリプトと CSS の量、サーバーの場所など、多くの要因がサーバーの速度に影響を与える可能性があるためです。

ただし、WordPress Web サイト専用に最適化されたホスティングもあります。通常、キャッシュソフトウェアにより読み込み速度が速く、多くの訪問者を処理できます。このようなホスティングは、多くの技術的な問題を管理でき、多くのプラグインがプリインストールされています。したがって、1つまたは複数のWebサイトを作成するだけで、WPホスティングにすべての技術的なことを任せることができます.

2- 大きな画像と動画

Web サイトで作業していて、コア Web バイタルテストを実行するときが来たら、画像やビデオに関連する問題が発生する可能性があります。ページ速度が遅い根本的な原因は、画像や動画の重みが大きすぎることです。「何メガバイトが多すぎるか」という古くからの決まり文句の質問は、コアWebバイタルの世界で最近確かに出てきました. より具体的には、サイトでの画像、ビデオ、およびその他の大きなファイルの使用を最適化するにはどうすればよいかという問題が生じています。

経験則として、1 つの主要な画像と動画のサイズを用意し、画像と動画の要素に幅と高さの属性を含めます。多くの場合、画像をアップロードする前に特定の幅にカスタマイズし、背景や不要なテキストなどの特定の領域を切り取る新しい画像要素を作成することをお勧めします。オンラインには、写真を切り抜いたりサイズを変更したりできる無料の画像編集アプリケーションがたくさんあります。 . 大きな画像を表示する際の問題は、表示に必要なダウンロードサイズと帯域幅が大きくなることです。

同じことがビデオにも当てはまります。ビデオを事前にカスタマイズすると、ブラウザで縮小する必要がないため、ページの速度が大幅に向上します。ビデオは通常のサイズのサイズで再生できます。さらに、ネイティブ動画は重いため、YouTube の埋め込みに置き換えることができ、サイトの速度が大幅に向上します。

遅延読み込みの使用は、ユーザーエクスペリエンスを損なうことなくページの速度を向上させるもう 1 つの優れた方法です。遅延読み込みは、ビューポート (または画面セクション) に入ったときにのみ画像を読み込む手法です。このアプローチにより、スクロールすると画像が徐々に読み込まれ、ページの速度が向上します。一番良いところ？ Lazy Load のような WordPress の遅延読み込みプラグインを使用して実装するのは初歩的なことです。これにより、ユーザーエクスペリエンスが大幅に向上します。ユーザーは、ページが読み込まれるまで待つ必要はありません。数回スクロールすると、画像が自動的に読み込まれます。

3-最適化されていないコード

最適化されていないコードは、First Contentful Paint やユーザーエクスペリエンスなどの主要な Web Vitals スコアを損なう可能性があります。ここでの最大の原因は主に JavaScript です。ページがロードされた後にダウンロードして実行する必要があるためです。 (JavaScript が HTML の前に来るため、ページの読み込みがブロックされます)。これにより、特にユーザーの接続が高速でない場合、画面が数秒間フリーズする可能性があります。したがって、JavaScript が最適化されていないと、サイトのパフォーマンスポイントが失われる危険があります。 JavaScript が読み込まれるまでページの読み込みがブロックされないようにするために、async タグと defer タグを使用できます。また、コードファイルから不要な要素を削除することをお勧めします。

コードの縮小により、不要なコメント、スペース、改行がコードから削除されます。これにより、ファイルのサイズを小さくすることができ、訪問者のブラウザーでのダウンロード時間が短縮されます。これには 2 つの理由があります。まず、訪問者がダウンロードするのが速くなります。次に、サイズが小さくなるため、使用するサーバーリソースが少なくなります。簡単に縮小できるファイルには、 <style> および <script> ファイルが含まれます。最適化の前後でファイルを比較することで、自分自身をテストできます。スタイルシートまたは JavaScript ファイルの場合、結果はあまり目立たない場合があります。これは、YUI Compressor、Minify などの CSS および JS 圧縮ツールが、縮小プラグインよりもこれらのタイプのファイルを最適化するのにはるかに優れているためです。

DOM (ドキュメントオブジェクトモデル) は、ドキュメント内のすべての要素の階層です。 DOM は HTML タグで構成され、CSS スタイルと JavaScript が関連付けられています。要素の数がかなり多くなる可能性があるため、ページのサイズが大きくなります。これにより、モバイルデバイスにページを提供する場合にパフォーマンスの問題が発生する可能性があります。したがって、要素の数を最小限に抑え、ドキュメント内での配置を最適化することが重要です。

4-レイアウトシフト

レイアウトシフトは、訪問者のブラウザウィンドウのサイズが変更されたときに発生する現象です。また、画像、フォント、色などの Web サイトの要素が緩んだり、位置が変わったりします。これにより、読者はあなたが提示しようとしていることに集中することが難しくなります。レイアウトシフトスコアは、デバイス間のレイアウト変更によってサイトがどの程度影響を受けるかを追跡するスコアです。ビューポートについて話すとき、それはかなり重要です。デザインが大きく変化すると、訪問者やコンバージョンを失う可能性があるためです。レイアウトの変化を最小限に抑え、可能な限り最適化することで、チャーンが減少し、最終的にはページビューが増加します。

さらに、大幅なレイアウトの変更は、SEO の取り組みに悪影響を及ぼす可能性があります。ただし、大規模なレイアウトを設計すると、保守が困難になる場合があります。これは、サイトをレスポンシブデザインで特別に設計していない限りです。そのため、すべてのデバイスに合わせてレイアウトを調整する必要があります。これを定期的に行う必要があると、時間がかかる場合があります。品質や機能性を損なうことなく成功するには、持続性と一貫性が必要です。そのため、最善の解決策は、Web サイトのデザインをレスポンシブにすることです。レスポンシブ画面は、表示されている画面サイズに応じてサイズが変更されます。レスポンシブスクリーンを実装するということは、速度が低下したりクラッシュしたりすることなく、Web サイトが調整されることを意味します。

5-キャッシングの問題

Web リソースを構築するとき、リソースごとに異なるキャッシングポリシーが使用されます。キャッシングポリシーは、各リソースをキャッシュする方法を定義し、リソースをキャッシュする期間に関する情報を提供します。これらのポリシーを設定する必要があります。これにより、ユーザーがアクセスするたびに Web リソースを最初から作成しなくても、Web リソースを再利用できます。パフォーマンスを向上させるには、サーバーが作成済みのリソースを作成するために時間を無駄にしないようにすることが重要です。サーバー側のスクリプトテクノロジを利用すると、このポリシーを利用できます。何かが変更されない限り、重要なリソースが再作成されないようにしてください。

Signed Exchange (SXG) は、プライバシーを保護しながら Web からコンテンツをプリフェッチできるようにする新しいイニシアチブです。 Signed Exchange には、Web サイトがプリフェッチするリソースの仕様が含まれています。また、これらのリソースが安全に (個人情報を漏らさずに) フェッチされることを確認してください。 Signed Exchange バイナリ形式は、資産転送形式です。これは、追加のヘッダーが添付された HTTPS 経由でコンテンツが転送されることを意味します。これは、Google 検索でページの読み込みパフォーマンスを向上させる画期的な新しい方法です。特に AMP ページや、外部リソースに依存するその他のタイプのページでは。

結論

Core Web Vitals は、Google が開発した 3 つの指標であり、ウェブページを読み込んでいるユーザーのエクスペリエンスをスコアリングします。 3 つの主要な Web 指標は、ページの読み込み速度を理解する上で重要です。ユーザーの入力に対するブラウザーの応答性と、コンテンツがブラウザーに読み込まれるときの不安定性。読み込み時間が遅いと、訪問者がサイトにとどまるかどうかに影響します。彼らは完全に去ったり、サイトのコンテンツに費やす時間が減ったりする可能性があります.