コラムのイメージ画像

ホームページ制作・運用コラム COLUMN

CMSWordPress

WordPress高速化ガイド LCP・CLS改善とCore Web Vitals対策を徹底解説

WordPress高速化ガイド LCP・CLS改善とCore Web Vitals対策を徹底解説

WordPressで作ったサイトの表示速度が遅いと感じているものの、何から手をつければよいかわからないという悩みをお持ちの方は少なくありません。本記事では、GoogleのCore Web Vitalsが示すLCP・INP・CLSの3指標を改善するための具体的な手順を、キャッシュプラグインの設定・WebP変換・CDN導入・テーマ軽量化を中心に解説します。

1. WordPressの表示速度が重要な理由

1-1. 表示速度はSEOと直結している

WordPressサイトを運営しているにもかかわらず、「なかなか検索順位が上がらない」「直帰率が高い」という悩みをお持ちの方は少なくありません。その原因の一つとして見逃されがちなのが、表示速度の問題です。

Googleは2021年のコアアップデート以降、Core Web Vitalsを検索順位の評価指標として正式に組み込みました。表示速度は単なるユーザー体験の問題にとどまらず、検索エンジンからの評価にも直接影響する重要な技術的要素です。

モバイルファーストインデックスが標準となった現在、スマートフォンでの表示速度は特に重視されます。表示が遅いサイトはユーザーが離脱しやすく、コンバージョン率の低下にもつながります。WordPressで作られたサイトは動的生成方式を採用しているため、適切な最適化なしには速度が低下しやすい構造を持っています。

1-2. Core Web Vitalsとは何か

Core Web Vitals(コアウェブバイタル)とは、Googleがユーザー体験の質を測定するために定めた指標群です。現在、検索順位の評価に影響する主要な3指標は以下のとおりです。

  • LCP(Largest Contentful Paint):ページ内で最も大きなコンテンツが表示されるまでの時間。Googleの推奨値は2.5秒以内です。ページを開いてから主要コンテンツが表示されるまでの体感速度に直結し、ユーザーの第一印象を左右します。
  • INP(Interaction to Next Paint):ユーザーのボタンクリックやフォーム入力などの操作から、次の画面更新が完了するまでの応答速度。旧FID(First Input Delay)に代わり2024年3月に正式採用されました。推奨値は200ミリ秒以内です。
  • CLS(Cumulative Layout Shift):ページの読み込み中に要素が予期せずずれ動く「レイアウトシフト」の累積量を測定します。画像や広告が遅れて読み込まれることで文字が突然ずれるような現象がこれにあたります。推奨値は0.1未満です。

1-3. PageSpeed InsightsでWordPressサイトを計測する

改善に取り組む前に、まず現状のスコアを把握することが重要です。GoogleのPageSpeed Insights(PSI)を使えば、URLを入力するだけでモバイル・PCそれぞれのCore Web VitalsスコアとWordPress高速化の改善提案を無料で確認できます。

PageSpeed Insightsにアクセスし、計測したいWordPressサイトのURLを入力します。結果は「良好」「改善が必要」「不良」の3段階で表示され、各指標の数値と具体的な改善候補が一覧で表示されます。まずこの診断結果を確認し、どの指標に問題があるのかを特定することが改善の出発点です。

特に「改善の機会」と「診断」のセクションに表示される項目は、技術的な改善ポイントを具体的に示しています。「レンダリングをブロックしているリソースの除去」「適切なサイズの画像」「次世代フォーマットでの画像の配信」といった指摘が出ている場合は、本記事で解説する施策が有効です。

2. LCP改善の具体的な手順

2-1. 画像をWebP形式に変換する

LCPに最も影響を与えやすいのが画像ファイルのサイズです。WordPressサイトで使用される画像がJPEGやPNGのままでは、ファイルサイズが大きくなりがちです。WebP(ウェブピー)はGoogleが開発した次世代画像フォーマットで、同等の画質をJPEGの約25〜35%小さいファイルサイズで実現できます。

WebP変換にはWordPressプラグインを活用するのが最も簡単な方法です。代表的なプラグインとして「Imagify」「ShortPixel Image Optimizer」「EWWW Image Optimizer」があります。これらのプラグインはアップロード時に自動でWebPへ変換する機能を持っており、設定後は意識せずに最適化された画像を配信できます。

プラグインのインストール後は、既存の画像を一括変換する機能を使い、サイト内の過去に登録した画像もWebP形式に変換します。対応ブラウザでは自動的にWebPが配信され、非対応環境ではオリジナル形式がフォールバックとして提供されます。

2-2. 画像の遅延読み込み(Lazy Load)を設定する

ページ内のすべての画像を一度に読み込むと、初期表示に時間がかかります。スクロールしなければ見えない位置にある画像も最初から読み込んでしまうためです。Lazy Load(遅延読み込み)を設定すると、ユーザーがスクロールして画像が表示範囲に入ったタイミングで初めて読み込みが発生するため、WordPress高速化に効果があります。

WordPress 5.5以降では画像タグへのloading=”lazy”属性の自動付与がデフォルトで有効になっています。ただし、ファーストビューに表示されるメインビジュアルや最上位のコンテンツ画像にLazy Loadを適用すると、かえってLCPが悪化する場合があります。ファーストビューの画像にはfetchpriority=”high”属性を追加し、優先読み込みを指示することが推奨されます。

2-3. キャッシュプラグインを導入・設定する

WordPressは動的にHTMLを生成するため、アクセスのたびにデータベースへの問い合わせが発生します。キャッシュプラグインを導入すると、生成済みのHTMLを保存(キャッシュ)しておき、次のアクセス時にそのデータを再利用することでサーバーの処理を大幅に削減できます。代表的なキャッシュプラグインとその特徴は以下のとおりです。

  • WP Super Cache:WordPressが公式にサポートするキャッシュプラグインです。設定が比較的シンプルで、初心者でも導入しやすいのが特徴です。基本的なページキャッシュ機能を無料で利用できます。
  • W3 Total Cache:ページキャッシュ・データベースキャッシュ・オブジェクトキャッシュ・ブラウザキャッシュなど多岐にわたるキャッシュ設定ができる高機能プラグインです。CDNとの連携も可能で、本格的な高速化に取り組む場合に選ばれます。
  • WP Rocket:有料プラグイン(年間約49米ドル〜)ですが、設定のわかりやすさと高い効果で多くのサイトに採用されています。キャッシュ機能に加えてCSSやJavaScriptの最適化・遅延読み込み・プリロードなど、WordPress高速化に必要な機能が一括で設定できます。

2-4. サーバーのPHPバージョンを最新化する

WordPressはPHPで動作しており、PHPのバージョンが古いほど処理速度が低下します。PHP 8.x系は旧バージョンと比較して大幅な性能向上が実現されており、WordPress公式もPHP 8.1以上の利用を推奨しています。

PHPバージョンの変更はレンタルサーバーの管理画面から行えることが多いですが、バージョンアップ前には必ずステージング環境でWordPressおよびすべてのプラグインの動作確認を行ってください。PHPバージョンの変更によってプラグインの互換性問題が生じる場合があります。

3. CLS改善の具体的な手順

3-1. 画像・動画要素にサイズ指定を入れる

CLSの主な原因は、サイズが未指定の画像や動画要素が読み込まれる際にレイアウトが崩れることです。HTMLのimgタグやvideoタグにwidth・height属性を明示的に指定することで、ブラウザは読み込み前からその要素が占めるスペースを確保でき、レイアウトシフトを防げます。

WordPressのメディアライブラリからブロックエディタ(Gutenberg)で画像を挿入する場合、通常は自動的にwidth・height属性が付与されます。ただし、テーマのカスタムCSS等で画像サイズを上書きしている場合や、外部サービスから埋め込んだ画像は未指定になることがあります。ページのHTMLソースを確認し、主要な画像すべてにサイズ属性が設定されているかチェックしてください。

3-2. WebフォントのCLS対策を行う

WebフォントはCLSの原因になりやすい要素の一つです。フォントの読み込みが完了するまで表示されたテキストと、フォント適用後のテキストでサイズ・字幅が異なると、レイアウトシフトが発生します。

CSSのfont-display: swap設定を使うと、Webフォントのロード中はシステムフォントで先に表示し、ロード完了後に置き換える動作になります。完全にシフトをゼロにはできませんが、フォントが読み込まれるまでテキストを非表示にするデフォルトの動作よりもユーザー体験が向上します。Google Fontsを使用している場合は、URLに&display=swapパラメータを追加することで適用できます。また、使用するフォントのウェイト(太さ)を必要最小限に絞ることも、読み込み時間の短縮と間接的なCLS改善につながります。

3-3. 広告・埋め込みコンテンツのスペースを確保する

Google AdSenseなどの広告や、YouTubeの動画埋め込み、SNSウィジェットなどの外部コンテンツは読み込みタイミングが予測しにくく、CLSの主要な原因になります。これらのコンテンツが表示される前後でレイアウトが大きく変動するケースが多く見られます。

対策としては、広告や埋め込みコンテンツが表示される領域に対して、あらかじめmin-heightやheightをCSSで指定し、スペースを予約しておくことが有効です。例えば、ヘッダー部分のバナー広告であれば、広告の読み込み前からその高さ分の余白をCSSで確保しておくことでレイアウトシフトを防げます。

4. CDN(コンテンツデリバリーネットワーク)の導入手順

4-1. CDNとは何か、WordPressに導入するメリット

CDN(Content Delivery Network)とは、世界各地に分散配置されたサーバー群を活用し、ユーザーの物理的な位置に近いサーバーからコンテンツを配信する仕組みです。WordPressサイトにCDNを導入することで、特に画像・CSS・JavaScriptなどの静的ファイルの配信速度を大幅に改善できます。

例えば、製造業のコーポレートサイトを国内のサーバーで運用していた場合、海外からのアクセスでは物理的な距離による遅延が生じますが、CDNを活用すると世界各地のエッジサーバーからコンテンツを配信するため、地理的な距離の影響を大幅に軽減できます。国内ユーザー向けのサイトでも、CDNを利用することでサーバー負荷の分散とLCPの改善効果が期待できます。

4-2. Cloudflareを使ったCDN設定の手順

CDNサービスの中でも無料プランから利用できる「Cloudflare(クラウドフレア)」はWordPressサイトへの導入実績が豊富で、初めてCDNを導入する方に適しています。

まず、Cloudflareの公式サイトでアカウントを作成し、「サイトを追加」からWordPressサイトのドメインを登録します。Cloudflareがドメインの既存DNS設定を自動で読み込むので内容を確認します。次に、ドメイン登録業者の管理画面でネームサーバーをCloudflareが指定するものに変更します。この設定が反映されると、Cloudflareを経由したコンテンツ配信が開始されます。

CloudflareのWordPress向け最適化設定として、管理画面の「Speed」メニューにある「Auto Minify」(CSS・JS・HTMLの圧縮)の設定を確認してください。「Rocket Loader」(JavaScriptの非同期読み込み)はWordPressの一部プラグインと相性が悪い場合があるため、有効化後は動作確認が必要です。

4-3. CloudflareとWordPressプラグインの連携設定

CloudflareとWordPressを組み合わせて使う場合、WordPressのキャッシュプラグインとCloudflareのキャッシュが干渉しないよう設定を調整する必要があります。WP RocketはCloudflareと公式に連携する設定項目を持っており、APIキーを入力することでWordPressの管理画面からCloudflareのキャッシュをクリアする操作が可能になります。W3 Total CacheもCDN設定項目でCloudflareとの連携設定ができます。

キャッシュ設定を変更した後は、PageSpeed Insightsでスコアを再計測し、改善効果を確認してください。変更前後のスコアを記録しておくと、どの施策が最も効果的だったかを把握しやすくなります。

5. テーマ軽量化と不要プラグインの整理

5-1. 軽量・高速テーマの選定基準

WordPressのテーマはサイトの見た目を決めるだけでなく、表示速度にも大きく影響します。機能が豊富な多目的テーマは便利な反面、使用していない機能のコードも読み込まれるため、ページの重さにつながります。

軽量テーマを選ぶ際の基準として、まずPageSpeed Insightsのスコアをそのテーマのデモサイトで計測し、初期状態でのパフォーマンスを確認することをお勧めします。代表的な軽量テーマとしては、国内で広く使われる「Cocoon」や「SWELL」、海外製では「Astra」「GeneratePress」「Kadence」などがあります。これらは初期状態でのPageSpeed Insightsスコアが高く、不要なCSSやJavaScriptの読み込みを最小化する設計がされています。

既存テーマからの変更は、デザインの大幅な変更を伴う場合があります。テーマ変更を検討する際は、ステージング環境でのテストを行い、コンテンツへの影響を事前に確認してください。

5-2. 使用していないプラグインを削除する

プラグインは「無効化」するだけではなく「削除」しないと、サーバー上にファイルが残り続けます。特定の状況ではセキュリティリスクにもなるため、使用しないプラグインは完全に削除することを推奨します。

プラグインの整理手順として、まずWordPressの管理画面「プラグイン」一覧から有効化されていないプラグインをすべて削除します。次に、有効化しているプラグインについても役割を再評価し、複数のプラグインで重複している機能がないかを確認します。例えば、SEOプラグインとキャッシュプラグインが別々に画像最適化機能を持っている場合は、どちらか一方に統一することが望ましいです。

5-3. CSS・JavaScriptの最適化(ミニファイ・結合)

WordPressのページを読み込む際、テーマやプラグインが個別に出力するCSS・JavaScriptファイルが多数存在します。これらをミニファイ(不要な改行・スペースの除去)し、ファイル数を削減することでネットワークリクエスト数が減り、読み込み速度の改善につながります。

WP RocketやW3 Total Cacheにはこの機能が含まれており、設定画面から有効化できます。ただし、CSS・JavaScriptのミニファイや結合は、WordPressの一部機能やプラグインの動作に影響することがあります。設定変更後は必ずサイト全体の表示と機能を確認し、問題がないことを検証してください。

6. 改善効果の測定と継続的な管理

6-1. Google Search ConsoleでCore Web Vitalsを監視する

PageSpeed Insightsは特定のURLを単発で計測するツールですが、Google Search ConsoleのCore Web Vitalsレポートを使えば、サイト全体のページごとのスコアを継続的に監視できます。「良好」「改善が必要」「不良」にグループ分けされたURLが一覧で表示されるため、優先的に対応すべきページを特定するのに役立ちます。

Search ConsoleのCore Web Vitalsレポートは、実際のユーザーデータ(フィールドデータ)に基づいています。PageSpeed InsightsのLab Dataとはスコアの算出方法が異なる場合がありますが、Googleの検索順位評価にはフィールドデータが使用されるため、Search Consoleの数値を定期的に確認することが重要です。

6-2. 改善施策の優先順位の付け方

Core Web Vitalsの改善施策は多岐にわたりますが、すべてを一度に実施することは現実的ではありません。PageSpeed InsightsとSearch Consoleのデータをもとに、改善効果が大きい施策から優先的に取り組む順序を決めることが重要です。

改善優先度の判断基準として、まず数値が「不良」判定を受けている指標(LCP、INP、CLS)を最初の対象とします。次に、PageSpeed Insightsの「改善の機会」に表示される推定削減時間(秒)を参考に、最も大きな改善効果が見込まれる項目から着手してください。画像の最適化(WebP変換・サイズ指定)は効果が出やすく、比較的低リスクで実施できる施策であるため、最初のステップとして推奨されます。

6-3. 継続的なパフォーマンス管理の重要性

Core Web Vitalsの改善は一度行えば終わりではありません。WordPressのアップデートやプラグインの更新によってスコアが変化することがあります。また、新しいコンテンツの追加や広告の設置などによっても影響を受けます。

改善後もPageSpeed InsightsやSearch Consoleで定期的にスコアを確認し、数値の変動があった場合は原因を特定して対処する運用フローを整備することが重要です。月に一度程度の定期確認を運用計画に組み込むことをお勧めします。

7. まとめ

WordPressの表示速度改善とCore Web Vitals対策は、SEO評価を高め、ユーザーの離脱を防ぐために欠かせない取り組みです。本記事では、LCP・CLS改善のための具体的な手順として、WebP変換・Lazy Load設定・キャッシュプラグインの導入・CDN活用・テーマの軽量化・CSS/JavaScriptの最適化について解説しました。

これらの施策は個別に取り組んでも効果がありますが、複合的に実施することで相乗効果が生まれます。ただし、設定変更には予期せぬ不具合のリスクが伴うため、ステージング環境での事前テストと変更後の動作確認を欠かさないことが大切です。

WordPressサイトの表示速度を根本的に改善するには、サーバー環境の最適化からテーマ選定・プラグイン構成の見直しまで、サイト全体の技術的な設計が問われます。個別施策の適用に限界を感じる場合や、現状のパフォーマンス課題を正確に診断したい場合は、Webの技術的な知見を持つ制作会社への相談が有効です。フォー・クオリアでは、幅広い業界のWebサイト制作で培った知見をもとに、WordPressサイトの表示速度改善から継続的な運用サポートまで対応しております。 WordPressのメリット・デメリットや運用全般については、「WordPress導入前に必ず知っておきたいメリット・デメリットと運用のポイント」でも詳しく解説していますので、あわせてご参照ください。表示速度の課題も含めたCMS選定・制作・運用について、まずはお気軽にご相談ください。

 まずはお気軽に
ご相談ください