【初心者ブログ向け】WordPressで高速化する方法

  • URLをコピーしました!

自分のWordPressサイト・ブログの表示速度が遅いと感じたことはありませんか?
サイトの表示速度の遅延はユーザーのページ離脱の原因になってしまうだけでなく、近年ではSEOでも不利になってしまうとされています。

本記事では、WordPressサイトを高速化できる簡単な施策から順に紹介していきますので、初心者も安心して読んでみてください。

目次

サーバーのキャッシュを有効にする

契約しているサーバーのキャッシュを有効にすることで、WordPressサイトを高速化することができます。
キャッシュとは、Webサイトで閲覧したデータを一時的に保存しておく機能のことです。

キャッシュを有効にすることで、アクセスがあった際に1からデータ読み込んで表示する手間を省くことができ、表示速度を向上させることができます。

サーバーのキャッシュを有効にする方法は各サーバー会社のホームページから行うことができます。
ここではエックスサーバーを例にキャッシュの有効化について以下に解説していきます。

サーバーキャッシュの有効化手順

1. まずはサーバーパネルにログインし、【サーバーキャッシュ設定】をクリックします。

2. 次に、キャッシュを有効化したいドメイン名の【選択する】をクリックします。


3. 【ONにする】を選択し(①)、【確認画面へ進む】をクリックします。(②)

これでサーバーキャッシュの有効化が完了です。

WordPressのキャッシュ化プラグインを導入する

WordPressのキャッシュ化プラグインを導入することで、簡単にWordPressサイトの高速化を図ることができます。
先ほどはサーバー側のキャッシュ化でしたが、今回はブラウザ側でのキャッシュも有効にします。

ここでは「WP Super Cache」というWordPressのキャッシュ化プラグインの導入について以下に解説してきます。

WP Super Cacheのインストール方法

1. WordPressの管理画面から【新規追加】をクリックします。

2. キーワードに「WP Super Cache」と入力し(①)、【今すぐインストール】をクリックします。(②) 

3. 【有効化】クリックします。

4. 管理画面の【設定】から【WP Super Cache】をクリックします。

5. 【キャッシュ利用(推奨)】にチェックを入れます。(①)
【ステータスを更新】をクリックします。(②)

これでキャッシュの設定は完了になります。

画像の遅延読み込み機能がWordPress5.5から通常機能に

画像の遅延読み込みとは、ページの表示される部分の画像のみを優先的に読み込んで、その他の画像部分の読み込みを遅延させることにより、ページの表示速度を向上させる機能のことです。

これまでは、画像の遅延読み込みを行うプラグインを自分で導入しなければなりませんでしたが、この機能がWordPress5.5から通常機能としてアップデートされました。

日本語
WordPress 5.5「エクスタイン」 以下は、Matt Mullenweg が書いた WordPress.org 公式ブログの記事「WordPres…
https://ja.wordpress.org/2020/08/11/eckstine/から参照

HTML、Javascript、CSSの圧縮プラグインを導入する

HTML、Javascript、CSSのコードを圧縮することによって、WordPressの高速化を図ることができます。
そもそも「圧縮する」とは、どういう意味かというと、通常コードは以下のように記述されています。

const button = document.querySelector('button');
button.addEventListener('click', handleClick);

function handleClick() {
  const element = document.querySelector('.target');
  if (element.classList.contains('state-show') === false) {
    element.classList.add('state-show');
  } else {
    element.classList.remove('state-show');
  }
}

上記のコードは改行されていたり、インデントと呼ばれる空白を文章の行頭に入れることにより、コードを見やすくしています。
この改行やインデントにより、ファイルサイズが膨張しているため、これらを以下のように無くすことでファイルサイズを圧縮させ、ページの表示速度を向上させることができます。

const button = document.querySelector('button');button.addEventListener('click', handleClick);
function handleClick() {const element = document.querySelector('.target');if(element.classList.contains('state-show') === false) {element.classList.add('state-show'); } else {element.classList.remove('state-show');}}


 しかし、この作業を手動で行っていくのは、非常に骨が折れるため、ここでは自動的に行ってくれるWordPressのプラグイン「Autoptimize」を紹介していきます。

Autoptimizeのインストール方法

1. WordPressの管理画面から【新規追加】をクリックします。

2. キーワードに「Autoptimize」と入力し、【今すぐインストール】をクリックします。

3. 【有効化】をクリックします。

4. 管理画面の【設定】から【Autoptimize】をクリックします。

5. 【JavaScript オプション】の【javascriptコードの最適化】にチェックを入れます。

6. 【CSS オプション】の【CSSコードを最適化】にチェックをいれます。

7. 【HTML オプション】の【HTMLコードを最適化】にチェックを入れます。

8. ページ下部に移動し、【変更を保存】をクリックします。

これで設定完了となります。

画像を適切なサイズにリサイズする

Webサイトで使用する画像は、適切なサイズにリサイズしなければ、速度遅延の原因となってしまいます。
例えば、基本的なPC画面の横幅は960px〜1080pxとなっています。
そのため、これよりも大きなサイズで画像を使用することは、その分画像の容量が大きくなってしまうため、画像読み込みスピード遅延の原因になってしまいます。

また、スマートフォンではPC画面よりもさらに小さく画像が表示されるため、スマートフォンでの高速化も図るためには、画像サイズのレスポンシブ対応も考えなければなりません。

その作業を画像1枚1枚行っていくのは非常に大変であるため、ここでは、自動的に適切な画像サイズに圧縮してくれるWordPressのプラグイン「EWWW Image Optimizer」の導入方法について以下に解説していきます。

EWWW Image Optimizerのインストール方法

1. WordPressの管理画面から【新規追加】をクリックします。

2. キーワードの「EWWW Image Optimizer」と入力し、【今すぐインストール】をクリックします。

3. 【有効化】をクリックします。

4. 管理画面の【設定】から【EWWW Image Optimizer】をクリックします。

5. 【サイトを高速化】と【保存スペースを節約】にチェックをします。(①)
【今は無料モードのままにする】にチェックを入れます(②)
【次】をクリックします。(③)

6. 【メタデータを削除】にチェックを入れます。(①)

このメタデータとは、写真に付随している撮影場所やカメラ情報などのことを言います。これらの情報を写真に含めたくない場合はこの項目にチェックを入れましょう。

【JPG品質レベル】の欄に任意の数字を入れます。(②)

品質レベルとは、わかりやすくいうと写真の画質レベルのことです。
このレベルを落とすことで容量を低く押さえることができます。
おすすめは85です。
その理由としては、85までの画質低下であれば、人間の目でみてほとんどその違いに気づかないためです。
また85に設定することで30%前後の容量低下を行うことができます。

【遅延読み込み】にチェックを入れます。(③)

遅延読み込みとは、Webサイトの表示される画像を一度に読み込まずに、表示される部分を優先的に読み込ませることによってアクセススピードの高速化を図る技術です。

【WebP変換】にチェックを入れます。(④)

WebPとは、画質を保ったまま、JPEGやPNGよりも容量を軽量化できる画像形式の1つです。
WebP変換を行うことで、Webサイトの高速化を図ることができます。

画像の幅と高さの上限を決める(➄)

ここでは、表示される画像の最大幅を指定していきます。
横幅は一般的なPCの横幅が1024pxですが、10px単位でしか設定できないため、1030pxとしておきます。
また高さについては、横幅を指定すれば、自動的にサイズを決定してくれるため「0」と指定しておきます。

【埋め込みヘルプ】、【匿名の報告】は必要な人のみチェックを入れます。(⑥)

【設定を保存】をクリック(⑦)

7. 【完了】をクリックします。

これで設定完了になります。

PHPのバージョンを常に最新のものにアップデートする

PHPのバージョンを最新のものにするメリットは、WordPressの公式サイトに以下のように紹介されています。

Web サイトがより速くなります。PHP の最新バージョンは以前のバージョンよりも効率的に動作します。最新の対応バージョン (現在は7.4) にアップグレードすると、以前のバージョンに比べてパフォーマンスが最大で3倍〜4倍向上します。

https://ja.wordpress.org/support/update-php/から引用

最近契約したサーバーであれば、最新のバージョンになっているかもしれませんが、契約してから時間が立っている場合は一度見直してみると良いでしょう。

PHPのバージョンのアップデートは、各レンタルサーバー会社によって手順は異なりますが、ここではXservse(エックスサーバー)を例に解説していきます。

PHPのバージョンアップデート手順(エックスサーバーの場合)

1. まずはサーバーパネルにログインし、【PHP Ver.切替】をクリックします。

2. PHPのバージョンアップをしたいドメイン名を選択します。

3. 任意のバージョンを選択し(①)、【変更】をクリックします。(②)

4. 変更完了

最後にPHPのバージョンを更新する場合は、使用しているプラグイン等に不具合が生じる可能性もあるため、バックアップを取った上で行うようにしましょう。

サーバーを高速なものにする

サーバー速度は、選ぶレンタルサーバー業者によって変わってきます。
以下に各レンタルサーバー業者の速度一覧を紹介します。

ランキングレンタルサーバー会社表示速度
1位ConoHa WING(コノハウィング)0.729秒
2位Xserver(エックスサーバー)0.783秒
3位シン・レンタルサーバー0.790秒
4位mixhost(ミックスホスト)0.796秒
5位お名前.comレンタルサーバー0.879秒
https://mvno-osusume.com/server-speed/から引用

表を見ると、1位と5位の差は約1秒ほどあることがわかります。
たかが1秒と思う方もいるかもしれませんが、ユーザーにとって1秒というストレスは大きいものです。

サーバー自体の速度は自分では修正ができない部分になりますので、最初によく検討してから選ぶことをおすすめします。

不要なプラグインは削除する

WordPressのプラグインは便利ですが、不必要にプラグインを残しておくとサイト遅延の原因となってしまいます。ブログ運営で必要なもの以外は削除するようにしましょう。
以下にプラグインの削除の仕方について解説します。

プラグインの削除手順

1. まず、WordPressの管理画面から【プラグイン】をクリックします。


2. 導入しているプラグインの一覧が表示されますので、削除するプラグインの【削除】をクリックします。

3. ポップアップで削除の確認が表示されますので、【OK】を選択すれば削除完了です。

まとめ

以上WordPressの高速化について解説してきましたが、これらすべてを行うことができれば、WordPressでブログサイトを運営する上で、ユーザーにストレスなくアクセスしてもらうことが可能です。
また表示速度を改善することにより、ユーザーのサイト内回遊率も上がり、SEO効果が期待できるためWordPressでブログの運営をしている方は、確実に実施しておきましょう。

よかったらシェアしてね!
  • URLをコピーしました!
目次