WordPress の Google PageSpeed Insights スコアを上げる方法

Web サイトの読み込み速度は、Web サイトの成功を左右します。 2 つの同一のページを比較すると、速いページが Google などの検索エンジンから優先的に扱われます。幸いなことに、Web サイトの速度をテストし、改善に関するアドバイスを得る方法があります。これは Google PageSpeed Insights と呼ばれるもので、その概要と使用方法を説明します。

Google PageSpeed Insights とは何ですか?

Google PageSpeed Insights (PSI) は、Google が開発した無料のオンライン ツールで、モバイルおよびデスクトップ デバイス上の Web ページの速度とユーザー エクスペリエンスのさまざまな要素を分析します。ページを分析し、Web サイト所有者がサイトのパフォーマンスを向上させるのに役立つスコアと推奨事項を提供します。誰でも任意の Web ページでレポートを実行できます。これは、自分のサイトと競合他社のサイトがどの程度うまく機能しているかを確認する優れた方法です。

これは、Divi WordPress テーマで構築された Web サイトのライブ デモです。まだ実行していない場合は、ボタンをクリックして簡単な PageSpeed レポートを実行します。

Google の Chrome チームは、サイトの速度とユーザー エクスペリエンスの良さを判断するための指標を標準化するために、2020 年にCore Web Vitals (CWV) を導入しました。 PageSpeed Insights は、単にこれらの指標を分析してレポートするツールです。そのため、サイト所有者は CWV メトリクスと、CWV メトリクスがページ速度 SEO にどのように影響するかを理解することが重要です。

Core Web Vitals: これらの頭字語は何を意味し、何を測定するのでしょうか?

PageSpeed スコアは 5 つのコア指標によって測定されます (ただし、実際に「コア」とみなされているのは 3 つだけで、残りの 2 つは「注目すべき」と呼ばれています。

LCP、INP、CLS、FCP、TTFB の頭字語について簡単に説明します。

• LCP (Largest Contentful Paint) は、ビューポート内に表示される最大のコンテンツ要素 (画像、ビデオ、テキストのブロック) が画面上にレンダリングされるまでにかかる時間を測定します。ページのメインコンテンツがユーザーに表示されるまでの時間を表します。優れたユーザー エクスペリエンスを実現するには、2.5 秒以下を目指します。
• INP (Interaction to Next Paint) は、ユーザー インタラクションに対するページの応答性を測定します。ユーザーがページにアクセスしている間のすべてのクリック、タップ、およびキーボード操作の遅延を調べ、ページの一般的な遅延を表す単一の値を報告します。適切な INP は 200 ミリ秒以下です。これは以前は「入力遅延」と呼ばれていました。
• CLS (Cumulative Layout Shift) は、ページの視覚的な安定性を測定します。ビューポート内で表示されるコンテンツの動きがどの程度発生するかを定量化します。予期しないレイアウトの変更により、ユーザーはイライラする可能性があります (ボタンをクリックしようとしたときにボタンが移動する場合など)。 CLS スコアが 0.1 以下になることを目指します。
• FCP (First Contentful Paint) は、ページの読み込みが開始されてから、コンテンツ (テキスト、画像など) が最初に画面に描画されるまでの時間を測定します。これは、ページが読み込まれているという視覚的なフィードバックをユーザーがどれくらい早く受け取るかを示します。 1.8秒以内を目指してください。
• TTFB (Time to First Byte) は、ブラウザがページをリクエストした後、サーバーからデータの最初のバイトを受信するまでにかかる時間を測定します。これはサーバーの応答性の重要な指標です。 800 ミリ秒以下を目指してください。

なぜモバイルページの速度を優先するのでしょうか?

スマートフォンの出現と、ほとんどの検索がモバイル デバイスから行われるようになったことで、Google やその他の検索エンジンは Web サイトや Web ページのモバイル エクスペリエンスを優先し始めています。したがって、PageSpeed Insight 評価を実行すると、デスクトップとモバイルの両方のスコアが得られることがわかります。

私の経験では、現在、デスクトップで 95 以上のスコアを取得するのは非常に簡単ですが、モバイル バージョンでは非常に困難です。これにはいくつかの理由があります。

1. 多くの Web デザイナーは依然として主にデスクトップ エクスペリエンスに基づいて Web サイトをデザインしています。モバイルのデザインは後回しです。
2. モバイル速度テストは携帯電話データを使用したインターネット速度を想定していますが、デスクトップでは安定した高速の家庭用またはビジネス用インターネット接続を使用する傾向があります。この差により、モバイル エクスペリエンスは遅くなる傾向があります。
3. 上記の 1 に基づいて、Web デザイナーもデスクトップを念頭に置いて Web サイトを最適化します。これは、最良の最適化の多くがモバイル エクスペリエンスに合わせて調整されていないことを意味します。

このことを考慮すると、モバイル エクスペリエンスが少なくともデスクトップと同じくらい優れていることを確認してください。ただし、どちらの場合でも、デスクトップとモバイルの両方のエクスペリエンスは同じ基準で判断されるため、それらの指標をよく理解しておく必要があります。

PageSpeed スコアを向上させるためにコア Web Vitals を改善する方法

できることはたくさんありますが、それを絞り込むのに役立ちます。サイト所有者向けに、主要な Web Vitals のそれぞれを改善するための、優先順位が付けられた実行可能な提案を集めました。あなたが直面している問題に基づいて、私の推奨事項が見つかります。

LCP (最大コンテンツフルペイント)

LCP の場合、レポートで説明されている「最大の要素」に注目する必要があります。このスコアが低いと、ユーザーはメイン コンテンツを見る前に、重要性の低いページ コンテンツを見ることになります。

次の 3 つのことに注目してください。

1. LCP 要素を最適化する:初期ビューポート内の最大の要素 (多くの場合、画像またはヒーロー テキスト) を特定します。最初にこの要素を最適化します。
   • 画像: WebP などの最新の形式を使用して画像を圧縮します。適切なサイズ設定を使用します (必要以上に大きな画像を提供しないでください)。レスポンシブ画像には srcset 属性と size 属性を使用します。画像配信には CDN の使用を検討してください。
   • テキスト ブロック: Web フォントが効率的にロードされていることを確認します (font-display: swap を使用すると効果的です)。テキストのレンダリングを遅らせる、レンダリングをブロックする JavaScript または CSS の大きなブロックを避けてください。
2. スクロールせずに見える部分のコンテンツを最適化:スクロールせずに見える部分 (スクロールせずに表示されるページの部分) にあるコンテンツを素早く読み込むことを優先します。非クリティカルなリソースのロードをスクロールせずに延期します。
3. サーバー応答時間 (TTFB) の改善: TTFB の高速化は、LCP に直接影響します。以下の TTFB の提案を参照してください。

INP (次のペイントへのインタラクション)

INP は、ページがユーザー インタラクション (ボタンのクリックなど) にどのように応答するかに焦点を当てます。これは開発者に重点を置いた指標の 1 つであり、開発者以外にとっては分類がはるかに難しい場合があります。

ただし、やる気があると思われる場合は、次のタスクに集中する必要があります。

1. 長時間のタスクを最小限に抑える: 長時間実行される JavaScript タスク (メインスレッドを 50 ミリ秒以上ブロックするタスク) を特定し、分解します。コード分​​割を使用し、重要でない JavaScript を延期します。
2. イベント ハンドラーの最適化: イベント ハンドラー (クリック イベントやタップ イベントなど) が効率的であり、長い遅延を引き起こさないようにします。イベント ハンドラー内での複雑な計算や DOM 操作は避けてください。
3. レイアウトのスラッシングを回避する: 強制的な同期レイアウト (JavaScript がブラウザーに短期間に複数回のレイアウトの再計算を強制する) を回避します。これは、スタイルを読み取ってすぐに書き込むときによく発生します。

CLS (累積レイアウトシフト)

CLS を改善するには、予期しないレイアウトの変更を防ぐことに努めてください。これが発生すると、重要な要素やスタイルが予期せぬタイミングで読み込まれ、画面上でものが飛び回ります。

次のことに焦点を当ててみてください。

1. 画像とビデオに明示的な幅と高さを設定する: 画像とビデオには常に幅と高さの属性を含めて (または CSS アスペクト比を使用して)、読み込み中にスペースを確保します。これにより、コンテンツが飛び回ることを防ぎます。
2. 広告と埋め込みコンテンツ用のスペースを予約する: サイズが変更される可能性のある広告または埋め込みを使用している場合は、プレースホルダーまたはスケルトン ローダーを使用してそれら用に十分なスペースを予約します。
3. 既存のコンテンツの上にコンテンツを挿入することを避ける: ユーザーの操作に応答する場合を除き、既存のコンテンツの上にコンテンツを動的に挿入しないでください。

FCP (ファーストコンテンツフルペイント)

悪い FCP スコアは、コンテンツがすぐに表示されない場合に発生します。これにより、ページが読み込まれていない可能性があるという印象が与えられます。

FCP の問題に対処するには、次の項目に焦点を当てます。

1. レンダリングをブロックするリソースを排除する: レンダリングをブロックする CSS と JavaScript を最小限に抑えるか削除します。 CSS および JavaScript ファイルを縮小して圧縮します。クリティカルな CSS (スクロールせずに見える範囲のコンテンツをレンダリングするために必要な CSS) をインライン化し、クリティカルでない CSS を延期します。 defer または async 属性を使用して、重要ではない JavaScript を延期します。
2. サーバー応答時間の最適化: TTFB が高速化すると、FCP が直接改善されます。以下の TTFB の提案を参照してください。
3. リソースの読み込み順序を最適化: 重要なリソース (スクロールせずに見えるコンテンツに必要な CSS やフォントなど) を早期に読み込むことを優先します。

TTFB (最初のバイトまでの時間)

上記と同様に、ユーザーはページが読み込まれるのを待っています。ただし、TTFB は、個々のページがどの程度読み込まれるかということよりも、サーバー構成に関係します。 TTFB は、サイト上の任意のページを表示するサーバーの応答性を示します。

サーバーの応答時間に対処するには、次の項目を詳しく調べてください。

1. サーバーのパフォーマンスの最適化: これは多くの場合、最も影響力のある要素です。
   1. ホスティング プランをより強力なサーバーにアップグレードします (または、より強力なホスティング プロバイダーに更新します)。
   2. コンテンツ配信ネットワーク (CDN) を使用して、静的アセットをユーザーの近くにキャッシュします。
   3. サーバー側のコードとデータベース クエリを最適化します。
2. キャッシュを使用する: 適切なキャッシュ メカニズム (GZIP、ブラウザ キャッシュ、サーバー側キャッシュ、オブジェクト キャッシュ) を実装して、サーバーの負荷を軽減します。
3. 検索時間が速い DNS プロバイダーを使用する: 高速な DNS プロバイダーを使用すると、ドメイン名を IP アドレスに解決するのにかかる時間を短縮できます。

WordPress ウェブサイトのページ速度を修正する方法

WordPress は、必要と思われる方法でサイトを最適化できる優れたプラットフォームです。 Wix や Squarespace などのウェブサイトビルダーがこれを処理しますが、それらの費用はサブスクリプションに組み込まれています。彼らがパフォーマンスを抑制したり、価格を引き上げたりすることを選択した場合、あなたは閉じ込められることになります。ホスティング プロバイダーまたはプラグイン (WordPress 使用時) でそのようなことが発生した場合は、ベンダーを簡単に切り替えて、希望の価格設定でパフォーマンスを維持できます。

PageSpeed Insights レポートに示されているように、Core Web Vitals を改善するために使用することをお勧めする基本的なプラットフォーム、サービス、プラグインを次に示します。 CWV は相互に浸透しているため、1 つを修正すると他の機能が改善される場合があります。推奨事項の一部は複数の指標に役立つことがわかります。

TTFBを改善する方法

TTFB はサーバーの応答性を測定します。 TTFB が高速になると、Web サイトの読み込みが早く開始されることになります。これを修正するには、サーバー側で何らかの作業を行う必要があります。

サイトグラウンドホスティング

高速な TTFB には、最適化されたサーバー構成による信頼性の高いホスティングが不可欠です。 SiteGround は、WordPress に最適化された優れたパフォーマンスと機能を提供します。

SiteGround を取得する

クラウドフレアCDN

Cloudflare のようなコンテンツ配信ネットワーク (CDN) は、Web サイトの静的資産を世界中のサーバーにキャッシュし、データの移動距離を短縮し、世界中のユーザーの TTFB を向上させます。無料版には大きなメリットがあります。

Cloudflareを入手

FCP、CLS、LCP を改善する方法

これらの CWV は、コンテンツの読み込み速度と読み込み中のレイアウトの安定性に大きく影響されます。キャッシュと画像の最適化が鍵となります。

ニトロパック

NitroPack は、スマート キャッシュ、最適化されたリソース配信、遅延読み込みや WebP 変換などの高度な画像最適化技術により、Web サイトの効率を最大化します。これについて言及したいのは、キャッシュを処理し、CDN と画像のサイズ変更 (プランに応じて) を提供するためです。つまり、必要な 3 つの主要な機能 (キャッシュ、画像の最適化、CDN) をワンストップで利用できるということです。

ニトロパックを入手

W3 合計キャッシュ

W3 Total Cache は、長年使用されている WordPress キャッシュ プラグインで、ページ キャッシュ、縮小化、ブラウザ キャッシュなど、読み込み時間を改善するための包括的なオプション スイートを提供します。

W3 合計キャッシュを取得する

WPロケット

WP Rocket は、ページ キャッシュ、プリロード、ファイル変更などの機能を使用して最適化を簡素化する、ユーザーフレンドリーなキャッシュ プラグインです。非常に使いやすく、好評を博しています。 CDN 用のアドオンがあり、さまざまな構成でうまく動作します。

WPロケットを入手

EWWW 画像オプティマイザー

EWWW Image Optimizer は画像を自動的に最適化し、品質を大幅に低下させることなくファイル サイズを削減します。これによりロード時間が短縮され、CLS が防止されます。これは、画像のサイズ調整に役立つだけでなく、最新の Web でより適切に読み込まれる次世代の画像形式を提供するのにも役立ちます。

EWW イメージ オプティマイザーを入手

LCPとINPを改善する方法

LCP と INP の両方のコードを解読するということは、ページの最初の読み込み時でも、その後のアクティビティでも、サイトにコンテンツを迅速に表示する必要があることを意味します。パフォーマンスの高い WordPress テーマは、これを実現するのに役立ちます。

ディビのテーマ

Divi は、変更前であっても、各ページに読み込まれる CSS と JavaScript の量を最小限に抑えるように構築されています。 Divi モジュールを使用するときは、それが適切にコーディングされており、サーバーに負担がかからないことを信頼できます。 Divi のパフォーマンスをさらに高めるには、グローバル デザイン プリセットを使用して、ページに必要な CSS の量をさらに減らします。これらすべてを組み合わせることで、見栄えが良く、確実に動作する、より優れたページを作成できるようになります。 Divi の完全最適化について詳しくは、こちらをご覧ください。

ディビプロを入手

すべてをまとめる

Core Web Vitals (CWV) 向けに Web サイトを最適化することは、オンラインでの成功への投資です。大変なことは承知していますが、LCP、INP、CLS、FCP、TTFB に焦点を当てることで、ユーザー エクスペリエンスが直接向上し、Web サイトがより楽しく魅力的なものになります。これは、直帰率の低下、サイト滞在時間の増加、そして最終的にはコンバージョンの増加につながります。

さらに、Google はこれらの指標を重要であると考えているため、Core Web Vitals を改善すると、検索エンジンの可視性が向上します。これらの指標はランキング要素ではありませんが、ランキング要素となる種類の要素には役立ちます。これらの改善により、サイトへのオーガニック トラフィックがさらに増加することをご理解いただければ幸いです。

今すぐ高スコアの WordPress サイトを作成しましょう

まだウェブサイトを構築していない場合は、次の順序で重点的に取り組んでいきます。

1. 信頼できるホスティングを入手します (Siteground をお勧めします)
2. 素晴らしいパフォーマンスを実現するベストプラクティスに基づいて構築された Divi のようなテーマを選択してください。
3. 最後に、優れたキャッシュ プラグインと CDN を使用します。

Divi ページのテスト (ライブデモ)

今すぐディビを入手

よくある質問