WordPressが異常に遅い重い！そんな時の高速化対策・2022年版

ここではワードプレスWordpressでつくったブログが異常に重い遅い、といったときの表示速度高速化対策についてお伝えしています。

サーバー応答時間・JavaScript・CSS・過大なDOMサイズ・画像・キャッシュ期間の延長・HTMLといったように、2022年時点でよく起こる原因に対してほぼすべての高速化対策を詳しくお伝えしていますので参考にされてみてください。

2021年12月23日更新版

WordPressが異常に重いときに、まずウエブサイトが表示される仕組みを簡単に把握しておこう

WordPressで構築したブログが異常に遅い重い場合の高速化対策をお伝えする前に知っておきたい事は、ウエブサイトが表示されるための基本的な仕組みです。

インターネットサイトがさまざまなディバイス（モバイルやパソコンなど）で表示されるまでには、以下のプロセスを経て表示されています。

この記事でお伝えするのは、WordPressサイトが異常に遅い状態となった時に、そのプロセスのどこかに遅くなる原因があると仮定して障害を潰していくといったトピックになっています。

2022年版・ワードプレスが異常に遅い重い！高速化するための方法

ここでは初心者～中級向けに、失敗しない効果を実感しやすい高速化の方法をお伝えして行きますので参考にしてください。

どういった点が異常に遅い重い表示速度の原因になっているかはワードプレスで構築したブログの人それぞれの運用状況によってかなり異なると思いますが、比較的効果が高い方法から順にお伝えして行きます。

一つの方法を試したらページの表示速度を確認し、どれだけ効果があったかを次でお伝えするページスピードインサイトでスコア確認するようにするのがおすすめです。

ブログの表示速度をチェックして改善の糸口を掴む

 

step
1ページスピードインサイトでスコアチェック

まずはブログの表示速度を検索エンジン最大大手グーグルが提供するページスピードインサイトで、モバイルとパソコンの両方のスコアをチェックします。

大方はモバイルのスコアが低く、パソコンのスコアはまあまあといったケースがほとんどなのではないでしょうか。

ページスピードインサイトでのブログの表示速度はまず以下を目指して高速化対策を行っていくのがおすすめです。

• モバイル：85以上
• パソコン：90以上

step
２一番表示速度が遅くなっている原因は何かを把握する

ページスピードインサイトでモバイルのスコアが出たら、そのすぐ下に表示される「改善できる項目」を確認します。

上の２点の他、ワードプレスブログの表示が異常に遅くなっている原因として考えられる以下の場合について一つ一つ対策をお伝えします。

【超重要】サーバーの応答時間への高速化対策

対策の重要度

ページスピードインサイトでサーバーの応答時間について改善できる項目では、「テーマ・プラグイン・サーバーの見直しをおすすめする」といったように詳細が説明されています。

この点について具体的にはどういった高速化対策をすればいいのかをご紹介します。

 

ワードプレステーマのバージョンアップ

ワードプレスのテーマとは「外観＞テーマ」で確認できます。

無料のワードプレステーマを使っている場合は、最新バージョンになっているかを確認しておきましょう。

また、ワードプレス自体のバージョンも最新版に更新できているかをチェック、漏れがあるならば更新を行います。

プラグインの見直し

対策の重要度+α

ワードプレスを運用しているとついプラグインを増やしてしまいがちですが、あまりに多く増やし過ぎると干渉してブログの表示速度にかなり影響を与えます。

以下を意識してプラグインの見直しをしてみましょう。

特にサーバーの応答時間を長くしてしまう原因として見落としがちなポイントを具体的にご紹介します。

①必要最低限のプラグインだけ残す

プラグインを増やすとWordpressが充実したかのような気分になりがちですが、Wordpressで構築したブログが異常に遅くてユーザーに離脱されるようでは意味がありません。

今インストールしているプラグインの機能や効果をもう一度見返し、以下で挙げる項目も参考にしながら必要最低限だけを残すように取捨選択してみるのがおすすめです。

②プラグインの機能を他の方法で代用できないかを検討する

WordPressを異常に遅くさせる「高速化表示を妨げるプラグイン」がありますので、これを他の方法で代用できないかを検討します。

①JetPack

JetPackはブログのどのコンテンツにどれだけの訪問があったかをリアルタイム計測するプラグインで便利ですが、下の通りスコアを計測してみると結構重たくなります。

代わりになる機能としては、グーグルアナリティクスやサーチコンソールがあります。

ワードプレス内に内蔵されているわけではありませんが、上のようにページスピードのスコアが１０も違うならば検討の余地はありそうです。

②バックアップ系プラグイン

ワードプレスで構築したブログを定期的にバックアップするようなプラグインも、割と表示速度の妨げになりやすいです。

例えば、以下のようにBackWPupというプラグインの場合は、バックアップデータがどんどん増えて重たくなっているケースです。

バックアップ系のプラグインの代わりとしては、レンタルサーバーのバックアップ機能が挙げられます。

③All in one SEO

All in one SEOも割とワードプレスが異常に重たくなるプラグインとしてよく話題に上ります。

▼All in one SEOアンインストール・スコア改善の例

このプラグインがワードプレスを異常に重たくさせる理由としては、「ごく最近のワードプレステーマ自体にほぼ同じ機能が実装されており、重複機能で遅くなる」といったケースが多いようです。

③ワードプレステーマ自体に同じ機能がないかを確認する

いずれの機能を残すかの流れは以下を参考にされてみてください。

④高速化系プラグインをいくつも入れていないか？再検討

以下のようなパターンで高速化系プラグインを複数インストールしている場合は、よほどうまく設定しないと干渉しあって余計にWordPressが異常に遅くなるはずです。

⑤重複している機能があれば、片方のプラグインに集約して片方を削除する

最近のワードプレスプラグインの傾向として、「気を利かせて様々な機能を搭載しているケース」が増えています。

また、おすすめできないプラグインの例も挙げておきますので参考にされてみてください。

レンタルサーバーのグレードアップ

対策の重要度~

レンタルサーバーを契約してワードプレスブログを運営している人がほとんどかと思います。

まずはそのレンタルサーバーのアカウントにログインして、現在どのくらいの容量を使用しているかを確認してみましょう。

空き容量があまりに少ないのであれば、サーバーのグレードアップを検討します。

他には「サーバーの空き容量が十分あるにも関わらず、レンタルサーバーが原因で表示速度が遅い」といったケースもあることは知っておいて損はないでしょう。

ほかレンタルサーバーにおいて、クリック操作で高速化対策ができる方法を３つお伝えしておきますので参考にされてみてください。

①レンタルサーバーのブラウザキャッシュ機能をONにする

 

②レンタルサーバーのサーバーキャッシュ機能の有効化

出典：Lolipop

サーバーキャッシュを有効化していなければ、ユーザーは閲覧のたびにデータベースサーバーにブログの情報を読み取りに行かなければならなくなり、表示速度の遅延につながります。

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

WEBの仕組みは日々開発やアップデートが行なわれています。その開発でよく登場するPHPについては、上述したデーターベースと関りが高く、ウエブのパフォーマンスや不具合にも対応します。

JavaScriptで高速化対策

対策の重要度+α

JavaScriptが原因となって異常に遅い重いワードプレスブログになるのはかなりの頻度になっています。

ここではレンダリングをブロックしているファイルの削除、ファイルの縮小圧縮・結合・使用されていないものを削減する方法をお伝えします。

 

レンダリングをブロックしているJavaScriptの削除

モバイルのページ表示速度でよく問題になる「レンダリングをブロックしているリソース」で挙げられるのはレンダリングJava Sprictファイル(以下JSファイルと呼ぶ)です。

JSファイルは、動きのあるコンテンツによく用いられています。例えばこんな感じの仕組みもJSによります。

また、弊ブログの下の記事のように「わかりやすくJSが使われているパターン」でJSがどのようにレンダリングを妨げているかをもう少し詳しくお伝えしておきましょう。

上の記事には、数スクロール目にスライダーを使った箇所(下の図の点線赤枠内)が登場すします。

ページスピードインサイトでよく指摘されるのは、こうした事例です。

これについてはプラグインを活用するのがおすすめ。その候補としていくつかワードプレスプラグインの例を挙げておきますので参考にされてみてください。

その場合は以下でお伝えするように「JSファイルを指定」するタイプのプラグインを使用してみてください。

ここではワードプレスプラグインfast velocity minifyを例にしてレンダリングをブロックしているリソースへの具体的対策の詳細をお伝えしてみましょう。

ページスピードインサイトで指摘される「レンダリングをブロックしているリソースの除外」で挙げられているURLの箇所には、JSファイルが記載されています

指摘されているJSファイルにマウスを合わせると、以下のようにJSファイル名が出てくるので、

これをfast velocity minifyの「設定（setting）/レンダリングをブロックしているJsファイル」の部分にペーストして保存します。

他の遅延読み込みプラグインを使っている人で、遅延読み込みしたいJSファイルを指定できる設定があれば同じように行ってみてください。

JavaScriptの縮小圧縮・結合・使用されていないものを削減

さらにJavaScriptファイルについては以下のように対策を行うと効果が得られ、ブログの表示速度が向上します。

• JavaScriptのファイルを圧縮して縮小すればサーバーに負担がかからない
• 複数のJavaScriptを結合して一つにまとめるとリクエストが減る

こちらについては、高速化系プラグインをインストールして対策するのがおすすめです。

お好みプラグインでJSファイルの圧縮と結合についての対策を行ってみてください。

CSSで高速化対策

対策の重要度

ブログが異常に重い遅いときに使用していないCSSをファーストビューの段階で読み込もうとする点が原因になっていることもかなり多いです。

これについて、ページスピードインサイトのようなブログの表示速度判定では「ブログを表示させた初っ端から、ブログ記事の最後のパートまできれいに表示（これがCSS）させようとしなくてもファーストビューでは問題ないので、後の方は遅延読み込みせよ」といった指摘をされます。

こちらについては、ブログ初心者でも取り組みやすいものから、中級の方に向けて高速化対策を以下の通りお伝えして行きます。

①CSS遅延読み込み系プラグインを使用

簡単にCSSの遅延読み込みで高速化対策できるのはやはりプラグインです。

Autoptimizeでは下のようにチェックマークを入れて保存を押すだけの遅延読み込み系プラグインになっています。（ファーストビューでは主要なCSSだけを読み込んで、そのあとは自動的に遅延読み込みする）

②ワードプレスカスタムフィールドの活用

プラグインでSimple Custom CSSのようなプラグインをインストールしている場合は利用の見直しをするのをおすすめします。

理由は、「個々の記事で必要のないCSSまではじめに読み込みが行なわれる仕様のプラグイン」だからです。

おすすめとしては、ワードプレスの機能にデフォルトで入っている「カスタムフィールドで記事ごとにCSSを指定する」といった方法です。

カスタムフィールドはワードプレスの記事管理画面の右上に表示される「表示オプション」のタブをクリック、そこからカスタムフィールドの項目を探してチェックマークを入れましょう。

ブログ記事の管理画面で最下部あたりに以下のようなカスタムフィールドがあります。名前には「CSS」とでも名付け、「値」にその記事で必要な個別のCSSを指定するだけです。

③使用していないCSSを指定して削減

最後のCSS対策は、CSSファイル名の指定をする名指し対策です。

step
1使用していないCSSファイルの特定

まずは使用していないCSSファイルを特定するために、PurifyCSS Onlineというサイトで確認します。

URLの枠にブログの該当URLを入力し、「clean up CSS」のボタンを押してみましょう。

すると、使用していないCSSファイルと、「Unused＝不使用な率」が表示されます。下の例の場合は使われていない率がかなり高いです。

使っていないCSSファイルは、CSSを削除する機能が付いたプラグインがあればそこにファイル名をコピーします。

④関連記事の表示の見直し

以下は、「プラグインJetPackのトラフィック機能が表示する関連記事（上段）」と「ワードプレステーマが表示している関連記事（下段）」の模様です。※ワードプレステーマとプラグインの２つを使って関連記事の表示をしている

多くのワードプレスユーザーが使うJetpackの機能「トラフィック<関連記事」設定がONになっていると、上述の二重の関連記事が表示されるようになっています。

 

 

多くの場合関連記事はワードプレスブログ記事の最後に表示されています。

カテゴリを表示するにもCSSが使われ、関連記事表示の要素となっているサムネイル・タイトル・抜粋文を適切に表示するについてもCSSが読み込まれます。

ごく最近のワードプレステーマやプラグインは小回りの利いた機能を搭載しているものが多いですが、機能を使い過ぎるとブログの表示速度に影響を与えるので、知らずに放置しているとユーザーが離脱しかねないことになります。

⑤カテゴリを非表示できる部分はないかを検討

ワードプレスブログでは、サイドバーや記事下に関連記事や最新記事などを表示しているパターンが多いと思います。

やりたい人だけに限定する高速化対策ですが、この関連記事のカテゴリ非表示でモバイルでの表示速度向上として有効です。

 

モバイルでワードプレスブログを表示するとき、関連記事は記事の最後に表示されますが、上述してきたように通常はじめの読み込みの段階で関連記事のカテゴリを表示させるためにCSSが読み込まれます。

以下は有料ワードプレステーマアフィンガー６のカテゴリ表示設定です。

お使いになっているワードプレステーマにもこうした設定がないかを探して、まずはスコアをチェックして取捨選択をされるのをおすすめします。

⑥プラグインのチェックボックスでCSSを削除する高速化対策

ワードプレスプラグインには、以下のように小回りの利いたCSSを削除する高速化対策機能を搭載しているものがあります。

• Print CSS（ブラウザを印刷するときだけ稼働するCSS）の削除
• フォントやアイコンの見栄えを向上させるためのCSSの結合

フォントに関してはブログが遅く重くなる原因として指摘されることが多いですが、「特殊なフォントを使ってブログの表示が遅くなるデメリット」について再検討してみましょう。

最近のワードプレステーマには、以下のようにフォントについての設定メニューがあるタイプがあります。おすすめは「余計に特殊なフォントを使わない」です。

過大なDOMサイズを見直す

ワードプレスブログが異常に遅い重い状態になっている原因として、ここ数年顕著になりつつあるのが過大なDOMサイズ。

過大なDOMサイズの原因となるのは以下のような「外部ファイルの埋め込み」です。

• 動画の貼り付け
• SNSのシェアボタン
• SNSのタイムライン表示

ごく最近のワードプレスサイトでは当たり前すぎるくらいこれらが登場するので、表示速度を重く遅くさせる原因になっているとなると驚く方も少なくないのではないでしょうか。

過大なDOMサイズを回避・ブログの表示速度高速化対策としては以下の方法をおすすめします。

SNSのシェアボタンについては、使用中のワードプレステーマの設定を探してみましょう。使用状況から、SNSシェアボタンが使われている形跡が極限に少ないのであれば、当面は機能をOFFにして様子見するのもいいでしょう。

以下はSNSの共有ボタンの非表示を徹底している設定です。この場合は、表示速度を最優先しているまで。個々SNSの使用状況でこの共有機能を残すかどうかを判断されてみてください。

ちなみに、前述しているJetpackにもSNSの共有機能が付いていますので、お使いの方はご確認されてみてください。

画像で高速化対策

ワードプレスブログが異常に遅く重い原因として、画像について課題となるケースも多々あります。

ここでは「適切な画像サイズにする」「次世代フォーマットでの画像配信」といった２点から高速化対策をお伝えします。

適切な画像サイズにする

ワードプレスで一年もブログを運営していれば、メディアには画像が膨大になっているのが自然です。

フリー画像サイトなどから画像をダウンロードしてワードプレスにそのままアップロードしていると、割と大きな画像サイズがそのままブログに貼り付けられることになり、特にモバイルの場合閲覧の際に読み込み時間を要してしまいます。

これについては以下のようなワードプレスプラグインで画像の圧縮を行います。

ここでは便利で小回りな機能も付いたEWWW image optimizerを例にしてみましょう。

このワードプレスプラグインでは、ボタンクリックだけでメディアライブラリにある画像サイズが一括最適化されます。

放置しても最適化が進行しているので、メディアライブラリの画像が多い場合はその間に別のタブを開いて別な作業をしていてもＯＫです。

次世代フォーマットでの画像配信

対策の重要度

2022年現在で、最適な画像の配信方法はほぼWebPになりつつあります。

もし、ワードプレスブログでWebPの導入が済んでいない場合はさっそく取り掛かってみましょう。

これにはいくつかの方法がありますが、誰でもできる方法として前述したワードプレスプラグインEWWW image optimizerでの対策をご紹介します。

step
1WebPに変換にチェックを入れる

まずはEWWW image optimizerの「設定<WebP変換」で次世代の形式に変換します、にチェックを入れます。

次にそのすぐ下にある「WebP delivery method」の設定に書かれているコードをコピーします。

より適切なコードの記述方法は以下の通りです。

step
2.httaccessファイルを開く

まずは契約中のレンタルサーバーで.htaccessを選択し、.httaccessファイルを開いた状態にします。

そしてさきほどのEWWW image optimizerに書かれていたコードをコピー、.httaccessファイルの上部にコードをペーストして保存します。

step
3EWWW image optimizerでWebP化を確認

コードの右下に表示されていた「赤の四角いPNG」の表示が、下のように「緑の四角いWEBP」に変わっていたら正常に反映されている目印となりますので確認されてください。

なお、ご紹介したワードプレスプラグインEWWW image optimizerは、下記のように画像の遅延読み込み機能もあります。これはなかなかパフォーマンスが良かったのでおすすめです。

キャッシュの時間を長くする

ワードプレスブログが異常に遅く重いときに、キャッシュの期間が原因になっている場合も少なくありません。

キャッシュの有効期間を新設したり、今よりも長くすると、ブログに再訪問してきたユーザーの表示速度の高速化対策になります。

契約中のレンタルサーバーで.httaccessを開き、その最上部に以下のような画像（jpg・png・gif）・java Script・CSSといったファイルをキャッシュの期間を長くするためのコードを追加して保存しましょう。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType image/bmp "access plus 21 days"
ExpiresByType image/gif "access plus 21 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType text/js "access plus 10 days"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
</ifModule>

なお、上のコードは画像（jpg・png・gif）・java Script・CSSといったファイルをキャッシュの期間を長くするためのコードの一例となっており、「期間の変更」については下記を参考に各自自己責任で行ってください。

HTMLへの対策

対策の重要度

HTMLが原因でワードプレスブログの表示速度を異常に遅い重い状態になる場合、以下４つが挙げられます。

• htmlの圧縮
• htmlコメント削除
• ヘッダークリーンナップ
• 絵文字削除

HTMLがワードプレスブログの表示速度を以上に遅く重い原因にしているウエイトはそれほど大きくはないですが、簡単にできるものでプラグインによる高速化対策をご紹介しておきます。

 

Autoptimizeでは、以下のように「HTMLコードを最適化」して高速化対策を行えるオプションがあります。

fast velocity minifyでは「HTMLの圧縮・HTMLコメントの除去・ヘッダーのクリーンナップ・絵文字の削除」がボタンクリック操作で高速化対策ができます。

重い遅いブログだったのにモバイルスコアが100に

このワードプレスブログの場合、上のような高速化対策を行ってモバイルのスコアは１００のパフォーマンスになりました。

100になるまで高速化対策をする必要はありませが、85くらいを目指せば合格くらいの気持ちで取り組みされるのがおすすめです。

注意！「モバイルで画像が表示されないケース」がある

モバイルの表示速度が上がって喜んでいたのも束の間…

というケースも無きにしもあらずです。

高速化対策を行ってモバイルで画像が表示されなくなる原因は以下の通り、可能性の高い順に挙げています。

1. 画像の読み込みに関するプラグイン同士の干渉
2. PHPのバージョンが「最新の推奨版」でない
3. ワードプレスのバージョンが古い

２と３は更新ボタンを押すなどワンクリックほどのマウス操作で済むので解説は割愛します。

それぞれインストールしている画像の読み込み系プラグインが異なると思いますので、「１つ１つのプラグインを無効化し、モバイルで画像が正常に表示されているかを確認する」といった作業を行う必要があります。

例えば、以下は私自身の事例です。

高速化の効果を感じられなかった方法

高速化の効果を感じられなかった方法もあります。

不要なリビジョンの削除

ワードプレスでサイトを構築していると、自動的にリビジョンが生成されます。

実はこの自動リビジョンがウエブサイトの高速化を妨げる原因になるといわれているのです。

そこでリビジョン削除プラグインとして知られる「WP-Optimize - Clean, Compress, Cache」を試してみたところ、幣サイトの場合結果的にページスピードインサイトでのスコアは変わりませんでした。

「自動リビジョンを削除する機能」の設定は上の通り。

初心者～中級者の高速化対策としておすすめできないプラグイン

最後にブログ運営初心者～中級者におすすめできないプラグインの例も挙げておきますので参考にされてみてください。

まとめ：ウエブサイトの高速化は、試してみるまで結果はわからない

とどのつまりウエブサイトそれぞれなので、どんな高速化の方法が効果を発揮するかはわかりません。

あるウエブサイトで「この高速化の方法は効果があった」と伝えられていても、ワードプレスブログの使用状況は個々異なるのでその方法が当てはまるかどうかはわかりません。

ワードプレスブログの高速化はレーシングカー同様「速く走りたいなら重たいものを削る」のは鉄則ですが、運用しているうちにいつのまに重い状態になってしまうのはよくあるお話です。

ページスピードインサイトの改善点のアドバイスなどを参考にして定期的に確認・メンテナンスしてみてくださいね(*^-^*)

お問合せ

*は必須項目です *お名前またはニックネーム *メールアドレス (確認用) *お問合せ(文字数制限なし) Powered by FormMailer.

ただし、法令違反・公序良俗に抵触するご質問には一切お応えしません