読者の悩み
- WordPressの表示スピードが遅い
- 速度については気にしてこなかったから、全く改善方法が分からない
- 即改善できる方法があれば教えて!
こんな悩みに答える記事になっています。
本業で、色々なサイトの速度向上のための方法を調べ、提案して速度の改善しています。
ここに書いてある施策を実施したところ、ページ速度のスコアが30台→70台へ上がりました。
この記事では、ページ速度を改善するためにはどのようなことを行えばよいのか、7つに分けて簡単に書いていきます。
この記事を読めば、ページ速度の重要性と自分のサイトのページ速度の確認方法、またページ速度の簡単な改善方法が分かります。
この記事の目次
WordPressの高速化の重要性
検索結果にあなたのサイトが表示されて、クリックしたとします。
そのときに、スピードが遅いと、ユーザはブラウザバックをしてしまいます。
私もそんな体験をすることがあります・・・。
1sや2s程度なら待ってくれるのでしょうが、それよりも時間がかかると直帰率が上昇します。
googleの公式調査では、以下のように発表されています。
読み込みが1秒から3秒になると、直帰率は32%上がる
読み込みが1秒から5秒になると、直帰率は90%上がる
読み込みが1秒から6秒になると、直帰率は106%上がる
読み込みが1秒から10秒になると、直帰率は123%上がる
また、SEOの観点から言えば、ページスピードはきちんと見られていて、速いほど検索上位に入りやすいともいわれています。
あなたのサイトのページ速度を確認する方法
ページ速度を確認したいと思ったら、一番簡単なのがPageSpeed Insightsにアクセスして、そこでURLを入れ込むだけです。
100点満点中のスコアが表示されるのでわかりやすいです。
100点満点を目指す必要は全くありませんが、できるだけ高い点数が望ましいです。サイトにもよりますが、70~80点くらいあれば十分だと考えられます。
モバイル側とPC側でスコアがまるで異なります。
例えば私のサイトでは、PC側では「良い」なのに、モバイル側では「悪い」でした。
改善方法もいくつか出てきますのでサイトスピードが遅いのは何が原因かすぐにわかるので楽です。
Sonarを使って分かりやすくページ速度を測る
次に紹介する方法は、Chromeの拡張機能のSonarを入れる方法です。
機能をONにした状態でページを閲覧すると、以下のような表示が出ます。
このサイトのTOPページです。
読み込みに2.3sほどかかっています。
また、中央下の割合から、画像のデータが大きい(読み込みの割合が大きい)ということがわかります。
画像サイズをもう少し小さくすべきということですね。
プラグインなしでWordPressを高速化するための改善方法
ここから、ページ速度の改善方法を挙げていきます。
画像を軽いものに差し替える
先ほど「画像の読み込み割合が大きい」と述べましたが、サイトではちょっとした画像がかなりのデータを必要とします。
ちなみに改善前では「画像は横幅700px以下に統一」のみ行っていましたが、どうやら不十分なようです。
ですので、画像をもっと軽いものに差し替える・・・具体的には、png形式ではなくjpeg形式を使用したほうがデータは軽いです。
png形式とjpeg形式の違い
- 簡単にいうとpngは透明色を用いた画像や可逆圧縮(圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法)をしたい画像に適しています。
- jpeg形式は、出力のたびに画像が劣化しますが、サイズが軽いです。
- そのため編集はpng形式で、最後の出力だけjpeg形式でするという手法もあります。
画像の圧縮もしましょう!
TinyPNGというサイトでは、png形式かjpeg形式の画像を圧縮することができます。
圧縮率は、このサイトがダントツで高いです。みんなこれを使っていますね。
圧縮の前後で比較してみましょう!
例えば、下の画像はjpeg形式です。
で、次のが圧縮した画像です。
138KB→28KBの圧縮です。見た目はほぼ変わらずです。
※2021/12/10追記:最近はTinyPNGの画像がガビガビしているのが気になったので、より性能の高いShortPixelを使用して圧縮+WebP画像で配信しています。
maipyon
ShortPixelは画像を高いレベルで圧縮しつつ、かつ見た目も全然変化がないという高性能な圧縮ができます。
レベルも3段階から選べるので、ガビガビしていたら圧縮レベルを下げればOK
当サイトの画像もほぼすべてShortPixelで圧縮済み。
画像を追加したら自動で圧縮がかけられるので楽でいいですね。
さらにWebP形式での配信ができるので、png画像やjpeg画像よりも軽くできます。
デメリットとして、圧縮できる画像数が毎月100枚まででして、それ以上は有料となります。
maipyon
2,500円くらいで当分持つので安いもんですね。
ちなみに効果は以下のような感じで、モバイルで10点以上も上げることができました。
プラグイン使ってるじゃん!という話ですが、手間とか性能を考えてこれに頼るのもアリです。
使っていないjavascriptの読み込みをしない
デザインを細かくいじっている人にしか関係しないと思います。
デザインを変更するのに、CDN経由などで読み込ませたものがある→デザインを元に戻した→読み込ませるためのコードは残したままだった
ということが起きていれば、修正すべきです。
私の場合、以前書いたコード(以下の記事のもの)が一部残っていまして、それがちょっとだけページ速度を遅くしていました。

この記事のコードの残骸が残っていました。デザインを変更する際には注意です。
こんなドジをしている人はいないかもしれませんが、例えばある1記事だけでしか使っていないJavaScriptやjQueryのコードがあるとします。
それをヘッダーで読み込んでいると、そのコードを必要としないページにとってはページ速度を遅くするだけの存在になります。
そのため、記事内に直接コードを書く等の対応をしましょう。
JavaScriptを非同期にする|レンダリングを妨げるリソースの除外
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」が出てきたら、たぶん「何これ?」となると思います。
どういう意味かといいますと、初期状態だと「HTML読み込み」→「JavaScriptダウンロード」→「JavaScript実行」→「HTML読み込み(の続き)」となっています。
JavaScriptのダウンロードと実行を終えないと、続きができない状態(妨げている)ということです。
これを、非同期にすることで、「Javascriptのダウンロード」と「HTML読み込み」を同時に行うことで、Javascriptのダウンロード時間分スピードを速めます。
やり方としては、以下のコードを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属性(非同期にするためのもの)を付与しています。
PHPのバージョンを見直す
WordPressはPHPというプログラミング言語で動いています。
PHPのバージョンはサーバーによって設定されていまして、バージョンによって処理速度が違います。
PHP7は、PHP5に比べ2倍以上の実行速度を誇っているので、バージョンアップすれば高速化できる。
という感じで、数年ブログをやっている人は、PHPのバージョンが最新ではなくなっているはず。
各レンタルサーバーでバージョン確認方法・PHPのバージョンアップデート方法は異なりますが、ブログやってきて3年くらい経つな・・・という人は見直す価値ありですね。
サーバーを変更する
やはり、高額なサーバーの方がスピードも速いです。
アクセスが多く集まるようになるにつれてどんどん遅くなってきますし、アクセス数次第ではサーバー自体を変更したほうがいいです。
アクセス数の目安もサーバーで書かれていますので、PVが何十万になってきたり、なんか遅い・・・。と感じるのであればサーバー側の問題かもしれないので疑いましょう。
私の場合、ロリポップからConoHa WINGにサーバー移転し、爆速になりました。
サーバー移転であっても、移転しやすいように専用のページがありますので、難しく考えなくても結構簡単に終わりました。
その間ブログが表示されないなどの不具合もなかったので、大きな不安要素はないと思います。
ロリポップは、真っ白な画面から、表示されるのに0.5秒ほどかかり、合計1.5秒で読み込み完了という感じ。
一方ConoHaWingは、真っ白な画面から、表示されるのに0.1秒ほど。合計1秒で読み込み完了という感じ。
サーバー移転方法について、『ConoHaWINGのかんたん移行!ロリポップからの移行方法を解説【爆速】』でまとめていますので、参考にしてみてください。
なお、その他のサーバーからの移転も同じことをするだけなので参考にできます。

車に積んだ荷物を減らして進みやすくしても、限界があります。
やはり大元のエンジンを変更すると一番効果が大きい。
サーバー移転はそれと同じですね。
サーバー移転で速度を一気に上昇させることができるので、現在安めのサーバーを使っているのであれば、移転したら絶大な効果があることは間違いなしです。
有料テーマに乗り換える
現在無料テーマを使っているなら、有料テーマに乗り換えるだけでスピードが急に速くなるということもあります。
私の場合、この「有料テーマに乗り換える」および「サーバーの変更」以外を実施してスコアは60台でした。
有料テーマのSANGOに乗り換えたところ、スコアはモバイルで70台に。(PCは90超え)
有料テーマは様々な部分で最適化されており、特に何もしていないけどスコアが上がるという人が大多数のようです。
なお、有料テーマのおすすめについては『【PV爆上げしました】WordPressの有料テーマおすすめ5つを比較』にて紹介しています。

有料テーマでは、プラグインを必要としていない部分が多々あります。
例えばSANGOでは、必要不可欠と言われている「Yoast SEO」または「All in one SEO pack」が必要ありません。
次に書いている「プラグインを使わない」との相乗効果もあり、一気に軽くすることができます。
プラグインを使わない
プラグインは色々読み込んでくるので、ものにもよりますが重くなります。
特に、何かを表示させるためのプラグインはかなり重くなる原因に。
プラグインを使わずともできることは多くあります。
人気記事一覧の表示もそうですし、目次もプラグインいらずでできます。
例えば私の場合、プログラムのコードを綺麗に出力させるためのCrayonというプラグインをやめて、highlight.jsに切り替えることでスピードのスコアは20ほど上がりました。

もしCrayonを使っているという方は必ず切り替えたほうがいいレベルですよね・・・。
必要最低限のプラグインってどれ?という点や、実はこのプラグインは不必要という観点でも記事を書いていますので参考にしてみてください。

WordPressの高速化方法は7つ
7つ、ページ速度改善方法について書いていきました。
特に効果があったもの順にまとめます。
特におすすめなものには★を付けています。
ページ速度改善方法
- ★サーバー変更(体感で分かるくらい変わった):サーバー変更方法はこちら
- ★有料テーマへの乗り換え(10~20スコアアップ):おすすめ有料テーマはこちら
- プラグインを使わない(人によりけり)
- 画像を軽いものに差し替える(5~10ほどスコアアップ)
- 使っていないJavaScriptを読み込まない(5ほどスコアアップ)
- PHPのバージョンを見直す(人によりけり)
- JavaScriptを非同期に(2ほどスコアアップ)
せっかく検索してあなたのサイトに辿りつきそうだというのに、ページの読み込み時にブラウザバックをされてしまうと、機会損失以外の何物でもありません。
ここに書いた方法を試して、少しでもユーザに優しいページを目指しましょう!