本ページはプロモーションが含まれています

格安サーバーでもできる!CocoonのPageSpeed Insights(FCP/LCP)スコア改善の具体策

副業・転職・スキル

「ブログの表示速度を測ってみたら、PageSpeed Insights(PSI)のスコアが赤色(低評価)だった……」「特にFCPやLCPという項目が『改善が必要』となっているけれど、格安サーバーを使っているから仕方ないの?」と悩んでいませんか?

確かに、月額数百円の格安サーバー(ロリポップのライトプランやさくらのレンタルサーバ、スターサーバーなど)は、月額1,000円以上のハイスペックサーバー(エックスサーバーやConoHa WINGなど)と比較すると、サーバーの応答速度(TTFB)に物理的なハンデがあります。しかし、無料のWordPressテーマ「Cocoon(コクーン)」の機能を正しく設定し、適切なチューニングを行えば、格安サーバーであってもPageSpeed Insightsで緑色(合格圏内)、あるいはそれに準ずる高スコアを叩き出すことは十分に可能です。

本記事では、Cocoonユーザーが格安サーバー環境下でFCPおよびLCPを改善し、SEO評価とユーザー体験を向上させるための具体的なステップを、初心者にも分かりやすく徹底解説します。

1. FCPとLCPとは?格安サーバーでスコアが落ちる原因

改善策を実行する前に、まずはPageSpeed Insightsで指摘される「FCP」と「LCP」が何を意味しているのか、そしてなぜ格安サーバーでスコアが悪化しやすいのかを理解しておきましょう。

FCP(First Contentful Paint)とは

FCPは、ユーザーがURLをクリックしてから、ブラウザの画面上に「最初のテキストや画像(何らかのコンテンツ)」が描画されるまでの時間を指します。1.8秒以下であれば「良好」と判定されます。画面が真っ白な状態から「あ、ページが開き始めたな」とユーザーが感じる瞬間の指標です。

  • 悪化の原因:サーバーの応答速度が遅い、HTML/CSSのファイルサイズが大きい、レンダリング(描画)をブロックするJavaScriptが読み込まれている。

LCP(Largest Contentful Paint)とは

LCPは、ユーザーの画面(ファーストビュー)の中で「最も面積の大きいコンテンツ(メイン画像や大見出し)」が表示されるまでの時間を指します。2.5秒以下であれば「良好」と判定されます。ユーザーが「ページが完全に表示された」と感じる体感速度に直結する、Core Web Vitalsの中でも最重要の指標です。

  • 悪化の原因:アイキャッチ画像のファイルサイズが大きすぎる、画像の読み込み優先順位が低い(遅延読み込みされている)、サーバーの処理能力不足。

格安サーバーの「ハンデ」とは何か?

格安サーバーは、1つのサーバー(CPUやメモリ)を非常に多くのユーザーで共有しているため、WordPressがPHPを実行し、データベースから記事データを呼び出してHTMLを生成するまでの時間(TTFB:Time to First Byte)が長くなりがちです。この「初動の遅れ」がFCPやLCP全体を後ろ倒しにしてしまいます。そのため、サーバーに極力計算させず、キャッシュを有効活用し、ブラウザに送るデータ量を極限まで減らすことが、格安サーバーにおける最大の攻略法となります。

2. Cocoon標準の「高速化設定」をフル活用する

Cocoonには、有料テーマ顔負けの強力な高速化機能が標準で搭載されています。外部プラグインに頼る前に、まずはテーマ側の設定を最適化しましょう。WordPress管理画面の「Cocoon設定」>「高速化」タブを開きます。

設定項目 推奨設定 FCP/LCPへの効果と理由
ブラウザキャッシュの有効化 チェックを入れる 【FCP/LCP向上】再訪問時の読み込み速度が劇的に向上します。サーバーの負担も減ります。
HTMLを縮小化する チェックを入れる 【FCP向上】改行や空白を削除し、データ転送量を減らします。
CSSを縮小化する チェックを入れる 【FCP向上】CSSが軽量化され、描画ブロックの時間が短縮されます。(※表示が崩れる場合はオフにしてください)
JavaScriptを縮小化する チェックを入れる 【FCP向上】JSファイルが軽量化されます。
Lazy Load設定 チェックを入れる 【全体向上】画面外の画像を後から読み込むことで、初動の速度を上げます。

フォント設定の見直し(Googleフォントの罠)

「Cocoon設定」>「全体」タブにある「サイトフォント」の設定も重要です。もしここで「Noto Sans JP」などのWebフォント(Googleフォント)を指定している場合、外部サーバーから重いフォントファイルをダウンロードする必要があるため、FCPが大幅に遅延します。

格安サーバーでスコアを最優先する場合は、「メイリオ」や「游ゴシック」といった「システムフォント(端末に最初から入っているフォント)」を選択してください。これだけでFCPが0.5秒近く改善することも珍しくありません。

3. LCP改善の要!「画像」の徹底的な最適化

LCPのスコアを押し下げている最大の要因は、ほぼ間違いなく「ファーストビューの画像(アイキャッチ画像など)」です。画像に対して以下の3つのアプローチを行うことで、LCPは劇的に改善します。

3-1. 画像形式を「WebP(ウェッピー)」にする

従来のJPEGやPNG画像はファイルサイズが大きくなりがちです。Googleが推奨する次世代画像フォーマット「WebP」に変換しましょう。Cocoon単体では変換できないため、プラグイン「EWWW Image Optimizer」などの導入を推奨します。

  • プラグインの設定で「WebP変換」を有効にします。
  • 過去にアップロードした画像も「一括最適化」機能でWebPに変換します。
  • 画質をほとんど落とさずに、ファイルサイズを半分以下に圧縮できます。

3-2. LCP対象画像の「Lazy Load(遅延読み込み)」を除外する

Cocoon設定で有効にした「Lazy Load」は、ページ全体の読み込みを軽くする素晴らしい機能ですが、LCPの対象となる「画面の一番上に表示されるアイキャッチ画像」まで遅延読み込みさせてしまうと、LCPスコアが大きく悪化してしまいます。

Cocoon(最近のバージョン)やWordPressの標準機能では、1枚目の画像は自動的に遅延読み込みから除外されるよう調整されていますが、もしPSIで「Largest Contentful Paint の画像の読み込み遅延」が指摘されている場合は、アイキャッチ画像のHTMLタグに loading="eager" を付与するか、ファーストビューに画像を使わない(テキストのみにする)といったレイアウトの工夫が必要です。

3-3. 適切なサイズへのリサイズ

スマホで撮影した数MBの写真をそのままアップロードしていませんか?Webサイトで使用する画像は、横幅が最大でも1200px〜1600px程度あれば十分です。「Imsanity」などのプラグインを使って、アップロード時に自動でリサイズされるように設定しておきましょう。

4. 格安サーバー側で実施すべき設定変更

WordPressの内部だけでなく、レンタルサーバーのコントロールパネル(管理画面)からも設定を見直すことで、TTFBを改善し、FCP/LCPの底上げが図れます。

4-1. PHPバージョンの最新化

サーバーの管理画面にログインし、現在の「PHPのバージョン」を確認してください。もし「PHP 7.4」やそれ以前の古いバージョンになっている場合は、「PHP 8.1」や「PHP 8.2」などの最新の安定版に変更してください。PHPはバージョンが上がるごとに実行速度が高速化されており、これだけでWordPressの動作が目に見えて軽くなることがあります。(※変更前に必ずバックアップを取り、サイトが真っ白にならないか確認してください)

4-2. サーバー独自のキャッシュ・高速化機能をオンにする

格安サーバーであっても、独自の高速化モジュールを提供している場合があります。

  • ロリポップ!:「モジュール版PHP」の利用、またはハイスピードプランなら「LiteSpeed Cache」の活用。
  • さくらのレンタルサーバ:「コンテンツ配信ネットワーク(CDN)」機能や「APCu」の有効化。
  • スターサーバー:「Xアクセラレータ」や「ブラウザキャッシュ設定」の有効化。

コントロールパネルを隅々まで確認し、利用できる高速化オプションはすべて「ON」にしておきましょう。

5. FCP/LCPの最終兵器「JavaScriptの遅延実行」

ここまでの設定を行っても、まだFCP/LCPが改善しない場合があります。その原因の多くは「Google AdSense(広告)」「Twitter/Instagramの埋め込み」「Googleアナリティクス」などの外部JavaScriptです。

これらは読み込みに非常に時間がかかり、ブラウザの描画をストップさせてしまいます。これを解決する魔法のような方法が「JavaScriptの遅延実行」です。

プラグイン「Flying Scripts」または「WP Meteor」の導入

これらのプラグインを使用すると、「ユーザーが画面をスクロールする」または「数秒経過する」まで、重いJavaScriptの読み込みを完全にストップさせることができます。これにより、PSIのクローラーは「JavaScriptがない超軽量なページ」として評価するため、FCPやLCPのスコアが劇的に跳ね上がります。

  1. 「Flying Scripts」をインストールして有効化します。
  2. 設定画面の「Include Keywords」に、遅延させたいスクリプトのキーワード(例:adsbygoogle, twitter.com/widgets.js, gtag など)を入力します。
  3. 「Timeout」を「3s」〜「5s」に設定します。

※注意点:アドセンス広告の表示が遅れるため、ファーストビューに広告を置いている場合は収益に影響が出る可能性があります。スコアと収益のバランスを見ながら設定してください。

6. 重いプラグインの断捨離(不要な機能は捨てる)

格安サーバーは処理能力に余裕がないため、プラグインの数は最小限に抑えるのが鉄則です。特に以下のプラグインはサイトを重くする原因になりやすいため、本当に必要か見直してください。

  • All in One SEO / Yoast SEO:Cocoonには標準で強力なSEO機能が備わっているため、これらを入れると機能が重複し、無駄に重くなります。特別な理由がなければ削除推奨です。
  • Jetpack:多機能ですが非常に重いです。アクセス解析ならGoogleアナリティクス、バックアップならBackWPupなど、単機能の軽いプラグインに置き換えましょう。
  • 人気記事表示プラグイン(WordPress Popular Posts等):データベースへの書き込み・読み込みが頻繁に発生し、サーバーに多大な負荷をかけます。Cocoon標準の「人気記事ウィジェット」で十分代用可能です。

7. まとめ:格安サーバー×Cocoonでも「正しい努力」で結果は出る

PageSpeed InsightsのFCPおよびLCPスコアを、格安サーバーとCocoonの環境で改善するための具体策を解説しました。手順を振り返りましょう。

  1. Cocoon設定の「高速化」でキャッシュと縮小化をフル活用する。
  2. フォントを「システムフォント」に変更する。
  3. 画像をWebP化し、LCP画像のLazy Loadを除外する。
  4. サーバーのPHPバージョンを最新(8.x系)にする。
  5. 重い外部スクリプト(広告等)はプラグインで遅延実行させる。
  6. 不要なプラグイン(特にSEO系やJetpack)を断捨離する。

コメント

タイトルとURLをコピーしました