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

ロリポップのライトプランでもPageSpeed InsightsのFCP/LCPは改善できる!Cocoonでの具体的な設定手順

副業・転職・スキル

「ロリポップのライトプランは安いけれど、速度が遅いからCore Web Vitalsのスコアが上がらない……」と諦めていませんか?確かに、上位のハイスピードプランと比較すると、サーバーの物理的なスペックやLiteSpeed採用の有無といった差はあります。

しかし、無料テーマ「Cocoon」の標準機能と適切な設定を組み合わせることで、ライトプランであってもPageSpeed Insights(PSI)のFCP(First Contentful Paint)やLCP(Largest Contentful Paint)を劇的に改善することは十分に可能です。

本記事では、ロリポップ!ライトプランユーザーが、Cocoonを使って「合格圏内」のスコアを叩き出すための具体的な高速化手順を、初心者にも分かりやすく徹底解説します。

1. FCPとLCPが改善しない原因とは?ロリポップ・ライトプランの特性を知る

具体的な設定に入る前に、なぜあなたのサイトが「遅い」と判定されているのか、その理由を整理しましょう。特にFCPとLCPは、ユーザーが「ページが表示された」と感じるまでの体感速度に直結します。

FCP(First Contentful Paint)とは

ページが開かれてから、ブラウザが最初のテキストや画像を描画するまでの時間です。1.8秒以内が「良好」とされます。主な遅延要因は、サーバーの応答速度(TTFB)や、レンダリングをブロックするJavaScript/CSSです。

LCP(Largest Contentful Paint)とは

ページ内で最も大きなコンテンツ(通常はメイン画像や見出し)が表示されるまでの時間です。2.5秒以内が「良好」とされます。主な遅延要因は、画像サイズが重いことや、読み込みの優先順位が低いことです。

ロリポップのライトプランは、サーバーが「Apache」で動作しており、上位プランのように「LiteSpeed」専用の高速化プラグインが使えません。そのため、WordPress側(テーマ・プラグイン)での地道な最適化がスコアアップの鍵となります。

2. Cocoon設定で行う「高速化」の基本ステップ

Cocoonには、標準で非常に強力な高速化機能が備わっています。まずはここを徹底的に使い倒しましょう。WordPress管理画面から「Cocoon設定」→「高速化」タブを開きます。

設定項目 推奨設定 効果
ブラウザキャッシュの有効化 チェックを入れる 2回目以降の訪問速度を向上
HTMLを圧縮する チェックを入れる データ転送量の削減
CSSを圧縮する チェックを入れる FCPの改善
JavaScriptを圧縮する チェックを入れる レンダリングブロックの軽減
Lazy Load設定 チェックを入れる 画像による表示遅延の防止

CSS・JavaScriptの縮小化と除外設定

基本的にはすべてにチェックを入れて問題ありませんが、もしサイトのデザインが崩れた場合は、一つずつチェックを外して原因を特定してください。特に、重要なのは「CSSの縮小化」です。これにより、コード内の不要な改行やスペースが削除され、FCPが短縮されます。

Googleフォントの非同期読み込み

もしCocoonでGoogleフォントを利用しているなら、「Cocoon設定」の「全体」タブからフォント設定を確認してください。外部フォントの読み込みはFCPを大幅に低下させるため、可能な限り「システムフォント(MS Pゴシック、游ゴシックなど)」を使用することをおすすめします。

3. LCP改善の最重要課題:画像の最適化

LCPスコアを下げている最大の原因は、ほぼ間違いなく「画像」です。ロリポップのライトプランでは、サーバー側の処理能力に限りがあるため、画像はWordPressにアップロードする前に軽量化しておくのが鉄則です。

画像形式は「WebP」が必須

従来のJPEGやPNGよりも圧倒的に軽量な次世代画像形式「WebP(ウェッピー)」を導入しましょう。Cocoon単体では変換できないため、プラグイン「EWWW Image Optimizer」を導入します。

  • 設定画面で「WebP変換」にチェックを入れる。
  • .htaccessに書き込みを行い、ブラウザが対応していればWebPを表示するように設定する。

ファーストビュー画像の「遅延読み込み」を除外する

CocoonのLazy Load(遅延読み込み)は便利ですが、LCP対象となる画像(記事冒頭のアイキャッチなど)まで遅延読み込みさせてしまうと、逆にLCPスコアが悪化します。

PageSpeed Insightsで「最大コンテンツの描画要素」として指摘されている画像については、遅延読み込みの対象から外す設定(クラス指定での除外など)を検討するか、あるいは記事冒頭の画像だけは軽量なJPG/WebPを直貼りするように工夫しましょう。

4. ロリポップ!サーバー側での最適化設定

WordPress内だけでなく、サーバー側の設定も見直すことで、ライトプランの限界を引き出すことができます。

PHPのバージョンを最新にする

ロリポップの管理画面(ユーザー専用ページ)にログインし、「サーバーの管理・設定」→「PHP設定」を確認してください。古いバージョン(PHP 7.xなど)を使っている場合は、最新の安定版(8.1や8.2以降)に変更しましょう。これだけで実行速度が数倍変わることもあります。

OPcacheの有効化

PHPのコードをキャッシュして高速化する「OPcache」が有効になっているか確認しましょう。ロリポップでは標準で有効になっていることが多いですが、念のため確認が必要です。

Gzip圧縮の導入(.htaccessの編集)

サーバーからブラウザへデータを送る際に圧縮をかける設定です。ロリポップのライトプランでも、.htaccessに以下のコードを追記することで、転送量を劇的に減らすことができます。

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
</IfModule>

※編集前には必ずバックアップを取ってください。記述ミスがあるとサイトが表示されなくなります。

5. プラグインの整理と「WP Meteor」の活用

プラグインの入れすぎは、ライトプランにおいて致命的な低速化を招きます。不要なプラグインは停止ではなく「削除」してください。その上で、FCP/LCP対策の最終兵器としておすすめしたいのが「WP Meteor」です。

WP MeteorでJavaScriptの実行を遅らせる

FCPを改善する手っ取り早い方法は、ユーザーが操作を開始するまでJavaScriptの実行を完全に停止させることです。WP Meteorを導入し、設定を「2 seconds delay」程度にすることで、PSIのスコアは劇的に向上します。

ただし、このプラグインは広告(Google AdSense)やアクセス解析の読み込みも遅らせるため、収益化しているサイトでは慎重にテストを行ってください。

6. 【実践】PSIスコアを改善するためのチェックリスト

設定が終わったら、改めてPageSpeed Insightsで計測しましょう。以下の項目がクリアできているかチェックしてください。

  • サーバー応答時間(TTFB)の短縮:PHPのバージョンアップ、不要なプラグインの削除ができているか?
  • レンダリングを妨げるリソースの排除:Cocoonの高速化設定でCSS/JSの圧縮・非同期化ができているか?
  • 画像サイズの最適化:WebP化されており、1枚あたりの容量が100KB以下(理想は50KB以下)になっているか?
  • LCP画像の優先読み込み:アイキャッチ画像が「Lazy Load」のせいで表示が遅れていないか?

7. まとめ:ライトプランは「工夫」で速くなる

ロリポップのライトプランとCocoonの組み合わせは、コストパフォーマンス最強の構成です。ハイスピードプランに変更すれば手っ取り早く速くなりますが、月額料金を抑えたいのであれば、今回紹介した設定を一つずつ丁寧に積み重ねてみてください。

特に「Cocoonの高速化設定」「PHP最新化」「画像のWebP化」の3点は、それだけでスコアを数十分改善するポテンシャルがあります。まずはここから着手し、ユーザーにとっても検索エンジンにとっても快適なサイトを作り上げましょう!

コメント

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