カテゴリ一覧から記事を探す

WordPressを高速化しよう【数分でスコアを上げる効果的な7つの方法】

WordPressを高速化する方法

WordPressでページ速度を改善するというのは盲点になりがちな改善点です。

ページ速度を改善するためにはどのようなことを行えばよいのか、7つに分けて簡単に書いていきたいとおもいます。

この記事を読めば、ページ速度の重要性と自分のサイトのページ速度の確認方法、またページ速度の簡単な改善方法が分かります。

私の場合だと、ページ速度のスコアが30台→70台へ上がりました。

1.ページ速度の重要性

検索結果にあなたのサイトが表示されて、クリックしたとします。
そのときに、スピードが遅いと、ユーザはブラウザバックをしてしまいます。

私もそんな体験をすることがあります・・・。

1sや2s程度なら待ってくれるのでしょうが、それよりも時間がかかると直帰率が上昇します。

googleの公式調査では、以下のように発表されています。

読み込みが1秒から3秒なると、直帰率は32%上がる
読み込みが1秒から5秒なると、直帰率は90%上がる
読み込みが1秒から6秒なると、直帰率は106%上がる
読み込みが1秒から10秒なると、直帰率は123%上がる

また、SEOの観点から言えば、ページスピードはきちんと見られていて、速いほど検索上位に入りやすいともいわれています。

2.あなたのサイトのページ速度を確認する方法

ページ速度を確認したいと思ったら、一番簡単なのがPageSpeed Insightsにアクセスして、そこでURLを入れ込むだけです。

100点満点中のスコアが表示されるのでわかりやすいです。

100点満点を目指す必要は全くありませんが、できるだけ高い点数が望ましいです。サイトにもよりますが、70~80点くらいあれば十分だと考えられます。

モバイル側とPC側でスコアがまるで異なります。
PC側では良いなのに、モバイル側では悪いでした。

改善方法もいくつか出てきますのでサイトスピードが遅いのは何が原因かすぐにわかるので楽です。

Sonarを使って分かりやすくページ速度を測る

次に紹介する方法は、Chromeの拡張機能のSonarを入れる方法です。

機能をONにした状態でページを閲覧すると、以下のような表示が出ます。

sonarを使用しページ速度を見ている状態

このサイトのTOPページです。

読み込みに2.3sほどかかっています。
また、中央下の割合から、画像のデータが大きい(読み込みの割合が大きい)ということがわかります。

画像サイズをもう少し小さくすべきということですね。

3.ページ速度の改善方法

ここから、ページ速度の改善方法を挙げていきます。

画像を軽いものに差し替える

先ほど「画像の読み込み割合が大きい」と述べましたが、サイトではちょっとした画像がかなりのデータを必要とします。

ちなみに改善前では「画像は横幅700px以下に統一」のみ行っていましたが、どうやら不十分なようです。

ですので、画像をもっと軽いものに差し替える・・・具体的には、png形式ではなくjpeg形式を使用したほうがデータは軽いです。

png形式とjpeg形式の違い

  1. 簡単にいうとpngは透明色を用いた画像や可逆圧縮(圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法)をしたい画像に適しています。
  2. jpeg形式は、出力のたびに画像が劣化しますが、サイズが軽いです。
  3. そのため編集はpng形式で、最後の出力だけjpeg形式でするという手法もあります。

画像の圧縮もしましょう!

TinyPNGというサイトでは、png形式かjpeg形式の画像を圧縮することができます。
圧縮率は、このサイトがダントツで高いです。みんなこれを使っていますね。

圧縮の前後で比較してみましょう!
例えば、下の画像はjpeg形式です。
WordPressを高速化ー圧縮なし

で、次のが圧縮した画像です。

WordPressを高速化する方法

138KB→28KBの圧縮です。見た目はほぼ変わらずです。

旅行での写真をもっときれいに掲載したいという場面でない限り、jpeg形式の画像を圧縮すればOKです。

png形式の画像を圧縮すればもっときれいな画像になるのですが、やはり圧縮したjpeg画像よりも画像サイズが大きくなってしまいます。

使っていないjavascriptの読み込みをしない

デザインを細かくいじっている人にしか関係しないと思います。

デザインを変更するのに、CDN経由などで読み込ませたものがある→デザインを元に戻した→読み込ませるためのコードは残したままだった

ということが起きていれば、修正すべきです。

私の場合、以前書いたコードが一部残っていまして、それがちょっとだけページ速度を遅くしていました。

この記事のコードの残骸が残っていました。デザインを変更する際には注意です。

こんなドジをしている人はいないかもしれませんが、例えばある1記事だけでしか使っていないJavaScriptやjQueryのコードがあるとします。

それをヘッダーで読み込んでいると、そのコードを必要としないページにとってはページ速度を遅くするだけの存在になります。

そのため、記事内に直接コードを書く等の対応をしましょう。

JavaScriptを非同期にする|レンダリングを妨げるリソースの除外

PageSpeed Insightsで「レンダリングを妨げるリソースの除外」が出てきたら、この欄を見れば改善できるかと思います。

どういう意味かといいますと、初期状態だと「HTML読み込み」→「JavaScriptダウンロード」→「JavaScript実行」→「HTML読み込み(の続き)」となっています。

JavaScriptのダウンロードと実行を終えないと、続きができない状態(妨げている)ということです。

これを、非同期にすることで、「Javascriptのダウンロード」と「HTML読み込み」を同時に行うことで、Javascriptのダウンロード時間分スピードを速めます。

編集する箇所
外観
テーマエディター
functions.php

やり方としては、以下のコードをfunctions.phpの最後に貼り付けるだけです。

functions.php
//非同期設定
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
//非同期設定ここまで

簡単にいうと、async属性を付与すれば非同期になるので、非同期にすべきではないJavaScript以外を指定(4・5行目で指定)してから、async属性(非同期にするためのもの)を付与しています。

画像の遅延読み込み

初期状態だと「画像を全部読み込む」→「全部表示!」という流れでページを出しています。

それを、「画像を見えてる部分&見えそうな部分だけ読み込み」→「ページスクロールに合わせて順次読み込み&表示」という流れにすることで、画像の読み込みを減らし、最初の表示スピードを速くします。

一番簡単なのはプラグインに頼る方法です。

BJ Lazy Loadというプラグインで、有効化するだけで終わりです。

画像を後回しで読み込んでいくので、ユーザから見るとサイトへアクセスできる体感速度が上がります。

サーバーを変更する

やはり、高額なサーバーの方がスピードも速いです。

アクセスが多く集まるようになるにつれてどんどん遅くなってきますし、アクセス数次第ではサーバー自体を変更したほうがいいです。

アクセス数の目安もサーバーで書かれていますので、PVが何十万になってきたり、なんか遅い・・・。と感じるのであればサーバー側の問題かもしれないので疑いましょう。

例えばロリポップだと、月間30万PVほどが限界のようですね。

サーバーに関してはエックスサーバーなどであれば問題ないでしょう。

有料テーマに乗り換える

現在無料テーマを使っているなら、有料テーマに乗り換えるだけでスピードが急に速くなるということもあります。

私の場合、この「有料テーマに乗り換える」および「サーバーの変更」以外を実施してスコアは60台でした。

有料テーマのSANGOに乗り換えたところ、スコアはモバイルで70台に。(PCは90超え)

乗り換えたときの記事。乗り換え方も書いています。

有料テーマは様々な部分で最適化されており、特に何もしていないけどスコアが上がるという人が大多数のようです。

有料テーマでは、プラグインを必要としていない部分が多々あります。
例えばSANGOでは、必要不可欠と言われている「Yoast SEO」または「All in one SEO pack」が必要ありません。

次に書いている「プラグインを使わない」との相乗効果もあり、一気に軽くすることができます。

プラグインを使わない

プラグインは色々読み込んでくるので、ものにもよりますが重くなります。

特に、何かを表示させるためのプラグインはかなり重くなる原因に。

プラグインを使わずともできることは多くあります。
人気記事一覧の表示もそうですし、目次もプラグインいらずでできます。

特にプログラムのコードを綺麗に出力させるためのCrayonというプラグインをやめて、highlight.jsに切り替えることでスピードのスコアは20ほど上がりました。

もしCrayonを使っているという方は必ず切り替えたほうがいいレベル。

必要最低限のプラグインってどれ?という点・実はこのプラグインは不必要という観点でも記事を書いています。

4.まとめ

7つ、ページ速度改善方法について書いていきました。

特に効果があったもの順にまとめます。

ページ速度改善方法

  1. 有料テーマへの乗り換え(10~20アップ)
  2. プラグインを使わない(人によりけり)
  3. 画像を軽いものに差し替える(5ほどアップ)
  4. サーバー変更(人によりけり)
  5. 使っていないJavaScriptを読み込まない(5ほどアップ)
  6. 画像の遅延読み込み(3ほどアップ)
  7. JavaScriptを非同期に(2ほどアップ)

せっかく検索してあなたのサイトに辿りつきそうだというのに、ページの読み込み時にブラウザバックをされてしまうと、機会損失以外の何物でもありません。

ここに書いた方法を試して、少しでもユーザに優しいページを目指しましょう!

特にスピードに関係するプラグインは9つでいいです。