WordPressの表示速度を改善するには|LCP・画像・JavaScriptと計測の注意点

ブログ運営のコツ:【ブログ】WordPressの表示速度を上げる方法と必要性を題材にしたイメージ

2026年10月17日確認:Lighthouseの90点を上位10%とする誤りを訂正しました。プラグインの遅延実行と削除を分け、点数・速度改善を保証する説明を修正しています。

表示速度はSEOに影響するの?
表示速度を知る方法は?
表示速度を速くする方法は?

自分のブログを見てもらえるかどうかにも関わってくる重要な話題、気になりますよね。

この記事を読めば、初心者でも具体的な対策や簡単な対処法が分かるようになります。

プロフィール写真
Y-bow医学博士
  • ブロガー・投資家・医学博士・個人事業主
  • 毎日更新 250記事/8ヶ月達成(2021.9〜)
  • Cocoon→SWELLに乗り換え
  • 本業/副業/子育ての合間でブログ作成
  • FIRE可能な資産あり、好きで働いてます

広告

目次

表示速度の計測と改善の必要性

ブログの作成を進めていると、SEO対策という言葉を目にするようになると思います。

検索順位を高めて読者を増やそうという趣旨ですが、その中でブログの表示速度に関する話題がしばしば取り上げられます。

表示速度自体は以下のPageSpeed insightsというGoogleが提供するスピード判定ツールが無料でWeb上で利用出来ますので、是非ご自身のサイトの表示速度を見てみましょう。

Y-bow

PCではスコアが高くても、モバイルでは低めに出ることが良くあります。

表示速度を向上させる方法

90を超えるスコアが出ると嬉しいですが、逆に30台や40台のスコアが出て『そんなに遅いのか。。。』と不安になることもあるかもしれません。

Googleは特にモバイルの表示速度を重視して、検索順位にも反映させる旨を公表していますので、なんとか対策したいですよね。

PCとモバイルとでそれぞれ多くの解説サイトが存在します。

しかし初心者には分かりづらかったり、内容が統一されていなかったりと参考にするのが難しい場合が多々あります。

そこで本稿では、中でも表示速度に大きく影響する施策を厳選し、その対応方法を分かり易く図解しています。

初心者の方でもこれを見れば簡単に表示速度を向上させることが出来ると思いますので、是非参考にしてみて下さい。

この記事のターゲット 
・ブログ初心者で表示速度をあまり考えてこなかった人
 
・表示速度を上げたいけど何が効果的かよく分からない人
 
・解説サイトを読んでも内容がよく理解出来なかった人

実際のところ少々表示速度が遅くてもPVが下がるような事象は私は体感出来ませんが、都度修正していますので、もし修正せずに放置するとどうなるか分かりません。。。

広告

表示速度の改善法 (LCPの問題:2.5秒超対策)

この項目ではConoHa WingのレンタルサーバーとWordPressを用いて、デフォルトのテーマであるCocoonを利用している前提で説明します。

異なる環境では対応も変わる可能性がありますが、考え方は共通ですので参考にされて下さい。

最後に説明するように、テーマをCocoonからSWELLに変えるだけで解決する部分も多くありますので、検討してみましょう。

画像の最適化(圧縮/サイズダウン)

表示速度の低下要因として大きいのが、埋め込んだ画像のファイルサイズが大きいことです。

フリー素材をダウンロードして利用したり、スマホで撮影した画像を掲載することが多いと思いますが、それらのファイルサイズは注意しておかないとサイトが重くなる原因となります。

アップロード上限はサーバー等の設定で変わります。上限以内なら表示に適した容量という意味ではなく、掲載サイズに合った画像を用意します。

また画像を圧縮してくれるソフトや以下のようなWeb上のツールを用いてサイズダウンをすることも出来ますが、面倒な上に既に公開済みの記事の画像までは対処し切れません。

画像最適化のプラグインは選択肢の一つですが、表示サイズ、配信形式、読み込み開始の遅れなども確認する必要があります。

以下の画像の通り『EWWW Image Optimizer』というプラグインをインストールして有効化しましょう。

するとWordPressメニューの『設定』の中に表示されるようになります。

EWWWプラグインのインストール画像

特に設定を触る必要はなく、次に『メディア』の中の『一括最適化』をクリックします。

すると以下の画像のように『最適化されていない画像をスキャンする』ことが出来ます。

画像の一括最適化を行う手順

スキャンした後、既に公開されている記事やアイキャッチなどに縮減可能なデータがある場合には一斉に縮減処理することが可能です。

処理数が多いと少々時間を要しますが、これでサイト全体の画像が軽くなります。

圧縮方法によっては、文字や細かい図の見え方が変わります。元画像を残し、スマートフォンでも判読できるかを確認します。

加えて、このプラグインを有効化しておけば、これ以降新たに公開する記事に使われる画像も随時最適化してくれます。

Y-bow

圧縮だけで問題がすべて解決するとは限りません。特に最初に大きく表示する画像を遅延読み込みにすると、LCPが悪化する場合もあります。

キャッシュの利用

サーバー側の設定をする事で、サイトの表示を高速化することが出来ます。

ConoHa wingのレンタルサーバーの場合、以下の画像のように『WING』、『サイト管理』、『サイト設定』、『応用設定』の順に進むと、『コンテンツキャッシュ』と『ブラウザキャッシュ』という項目が見つかります。

これらをどちらも『ON』にすることで、各デバイスでの表示速度を改善することが可能です。

ConoHa wingのキャッシュ設定方法

読み込み最適化

以下の画像にある2つのプラグイン『Autoptimize』と『Async JavaScript』をインストールして有効化します。

するとそれぞれ『設定』の中に表示されるようになります。

最適化プラグインのインストール説明

まず『Async JavaScript』について、以下の画像の順に沿って、『Settings』タブの下にある『Enable Async JavaScript?』にチェックをつけます。

そして下方にあるAsyncを選択して設定を保存しましょう。

これで非同期処理と言って、時間のかかる読み込みは後回しにするという設定が完了します。

Asyncプラグインの使い方

次に『Autoptimize』について、以下の画像に沿って設定を進めます。

『JS、CSS &HTML』タブを選択し、『JavaScroptコードの最適化』にチェックをつけます。

さらに下方の『CSSコードを最適化』にもチェックを付けます。

最適化の併用や設定には相性があります。元に戻せる状態で一項目ずつ試し、日英の表示、広告、解析、メニューを確認してください。

Autoptimizeの使い方

利用者の多いプラグインでも、自分の環境で動く保証はありません。導入前のバックアップと、変更後の確認が必要です。

ただし、万一に備えてのバックアップはしておくと良いでしょう。

不要なJavaScriptの削減

表示速度をPageSpeed insightsで見ていると、『使用していないJavaScriptの削減』という項目が出ることがあります。

これに対して有効なプラグインが『Flying Scripts by WP Speed Matters』です。

インストールして有効化すると、『設定』の中に表示されます(下の画像参照)。

JavaScript削除方法

『設定』の中の『Flying Scripts by WP Speed Matters』をクリックして開くと、『Include Keywords』という欄があります。

Flying Scriptsは主に指定したスクリプトの実行を遅らせる仕組みです。未使用コードを削除したり、常に停止したりする機能と混同しないでください。広告・解析・メニューなどの動作確認が必要です。

JavaScript削除手順

画像の重さに勝るとも劣らない影響がありますので、場合によりかなりの改善が見込めるでしょう。

Cocoon設定の高速化:注意すべきプラグインとの干渉

『Cocoon設定』の中に『高速化』というものがあります。

各項目にチェックを入れることで表示速度の改善が見込めます。

ここで1点注意しなければいけないのが、上で紹介した『Autoptimize』との干渉です。

下の画像のようにどちらにも『Lazy Load』という項目があるのですが、同時に有効にしてしまうとページの表示に問題が起こる場合があります。

例えばヘッダーに設定したロゴが表示されなくなってしまうなどの事象が起こりますので、ここはどちらか一方のみの設定にしましょう。

Lazy Loadはサイトが表示された時に、画面に表示されていない部分の画像は読み込まないようにするものです。

注意すべきプラグインの干渉

テーマの変更(SWELL)

表示速度が速いテーマに移行してしまうのも一つの手です。

SWELLにも高速化の機能はありますが、テーマを替えるだけで速度が十分になるとは限りません。広告、画像、外部スクリプト、サーバー応答も関係します。

数々の有料テーマと丁寧に比較した資料もありますので見てみて下さい。

SWELL
機能と使いやすさを追求したテーマ

ブロックエディター完全対応の快適な使い心地は、一度体験したらやめられない(^ ^)!

もしCocoonを利用されているようでしたら、以下の記事を参考にしながら乗り換えを検討してみるのも良いと思います。

Y-bow

SWELLは表示速度だけでなく、ブロックエディターの良いところを全て享受出来ます。

広告

ブログの表示速度改善まとめ

特定のプラグインや設定だけで、PC90以上・モバイル50以上を保証することはできません。原因を計測して一つずつ変更し、表示と機能を確かめます。

Lighthouseの総合スコア90は、全サイトの上位10%という意味ではありません。複数の計測指標をスコア化して重み付けした診断値であり、端末・通信条件や実行ごとの変動もあります。

いくらモバイルでの表示速度を重視して検索順位を決定すると言っても、極端に遅いわけでない限りは内容が重視されるはずですので、まずはスコア50以上、好ましくは60以上を目指すのが良いのではないかと思います。

見直した説明と参照資料

Chrome公式:Lighthouseのスコア計算(2026年10月17日確認)

web.dev:LCPを改善する方法(2026年10月17日確認)

\宜しければ是非シェアを/
  • URLをコピーしました!
  • URLをコピーしました!

Advertisement / 広告

コメント

コメントする

4 × four =

目次