プラグインなしでWordPressを高速化する7つの方法【数分で速度改善】

読者の悩み

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はプラグインなのでサクッと紹介だけして終わりにします。

ShortPixelは画像を高いレベルで圧縮しつつ、かつ見た目も全然変化がないという高性能な圧縮ができます。

レベルも3段階から選べるので、ガビガビしていたら圧縮レベルを下げればOK

当サイトの画像もほぼすべてShortPixelで圧縮済み。

画像を追加したら自動で圧縮がかけられるので楽でいいですね。

さらにWebP形式での配信ができるので、png画像やjpeg画像よりも軽くできます。

デメリットとして、圧縮できる画像数が毎月100枚まででして、それ以上は有料となります。

maipyon

私は20,000画像分を22ドルくらいで購入。
2,500円くらいで当分持つので安いもんですね。

ちなみに効果は以下のような感じで、モバイルで10点以上も上げることができました。

プラグイン使ってるじゃん！という話ですが、手間とか性能を考えてこれに頼るのもアリです。

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

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

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

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

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

プラグインを使わずWordPressにスライダーを作る方法【コピペでOK】サイトにスライダー・スライドショーを追加する方法について紹介します。WordPressを基準に、スライダーの設定方法や、例として関連記事をスライドさせる方法についても紹介しています。広告を挟む方法も書いているのでバッチリ。

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

こんなドジをしている人はいないかもしれませんが、例えばある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属性(非同期にするためのもの)を付与しています。