運営サイトの表示速度にお悩みですか？
当ブログ（ガラクタブログ）は、WordPressテーマ「JIN」を利用しています。
投稿した記事をチェックするためにスマホで自サイトをよく閲覧するのですが、表示速度が遅いと感じたことはありませんでした。
ところが、Googleサーチコンソールに追加された新機能「速度」を何気なく覗いてみたところ、なんとモバイルURLがすべて低速と判定されていたのです。
なにかの間違いでは…と、PageSpeed Insightsでサイト表示速度を計測。
PCのスコアは95で問題なしでしたが、モバイルのスコアは55。
数値化されたことで、自サイトの表示速度が遅いことを実感しました。
そのままにしておけば、Googleからの評価が下がってしまうかもしれません。
そこで本記事では、僕が「JIN」のサイト表示速度を改善するために行った方法を具体的にお伝えします。
Contents
30分の作業でモバイルのサイト表示速度が55→90に改善
Googleで情報を探しながらの作業でしたが、それでも30分かからずにモバイルスコアを55→90に改善することができました。
作業だけなら15分もかからずにできるかも。
PCサイトも95→99に改善
WordPress 5.3
WordPressテーマ：JIN（子テーマを利用）
サーバー：XSERVER
他のWordPressテーマやサーバーを利用している場合は、手順が異なります。
サイトの表示速度が遅いとGoogleからの評価が下がる？
Googleサーチコンソールのヘルプに、下記の記載がありました。
速度が重要な理由
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加します。
遅いと判断されたページは、Google 検索のランキングが下がる可能性があります。
サイトの表示速度が遅いと訪問者にストレスを与えてしまい、結果として直帰率が上がるということです。
たしかに、クリックしてもなかなか表示がされないサイトだったら、検索結果一覧に戻って別のページを閲覧しますよね。
直帰率が増加すれば、そのサイト（ブログ）はGoogleからの評価も下がります。
評価が下がれば、検索順位も落とされてしまいます。
それに、Googleサーチコンソールに「速度」という項目が新機能で追加されたということは、今まで以上にGoogleはサイトの表示速度を重要視してくると考えられます。
もし、自分で表示が遅いと体感していなかったとしても、Googleサーチコンソールで低速URLと判定されたり、PageSpeed Insightsのスコアが低ければ対応は必須ですね。
PageSpeed Insightsでスコア90以上を目標にしましょう。
Googleの評価も大切ですが、読者のストレスにならないためにも速度は改善すべきです。
ページの読み込み速度が上がった効果なのか、作業をした翌月にガラクタブログは過去最大のPVと収益になりました。2
【特典付き】才ゼロ購入レビュー！稼げないブログ初心者が収益化に成功した秘密とは？
【Googleアドセンス】1週間に1記事の更新で月間5,000円以上を稼ぐ方法
WordPressテーマ「JIN」のモバイル表示速度を改善した方法
基本的には、JINの公式サイトの「JINの高速化方法を全まとめ！表示速度が遅い時の対処法は？」という記事を参考にしています。
ガラクタブログで実施したのは下記のとおり。
- WordPressのデータをバックアップ
- FontAwesomeをOFFにする
- BJ Lazy Load
- EWWW Image Optimizer
- Autoptimize
- アクセラレーターを活用する
JINのサイト表示速度を改善した方法①WordPressのバックアップ
新規プラグインをインストールときや、普段さわらない設定を変更する場合には、必ず事前にデータのバックアップをしてください。
なにかあったときに、取り返しのつかないことになります。
僕はFileZillaというツールでバックアップしていますが、簡単でオススメ。
はにわまんさんの「FTPツール「FileZilla」の使い方とおすすめの設定」という記事が、くわしく書かれていて初心者にもわかりやすかったです。
JINのサイト表示速度を改善した方法②FontAwesomeをOFFにする
JIN2.0からの機能で、FontAwesome5をOFFにできる設定ができるようになりました。
（事前にJINを最新バージョンにアップデートしておいてください）
FontAwesomeというのは、ホームとかメールのようなアイコンを、文字として使えるようになるツールのこと。
無料で利用できるので僕もスマホ画面のメニューに採用していましたが、実はFont Awesomeを読み込むことでサイトの表示速度が遅くなってしまうのです。
JINを利用している方は、WordPressのダッシュボードから「外観」→「カスタマイズ」→「その他設定」とすすめていくと、「Font Awesomeを読み込まない」という項目があります。
ここにチェックを入れることで、サイト表示速度を改善することができます。
注意として、僕のようにFontAwesome5を利用していた場合、チェックを入れると今まで設定していたアイコンが表示されなくなります。
代わりのアイコンの設定を忘れずにしてくださいね！
特別こだわりがなければ、JINのオリジナルアイコンがオススメ。
ダッシュボードに「JINアイコン一覧」をクリックすると、利用可能なアイコンが表示されます。
メニューの設定欄にJINオリジナルアイコンの情報をコピペするだけでOK。
スマホ画面のメニューに指定したアイコンが表示されました。
アイコンを変更するだけで表示速度が向上するなら、すぐ試したいですね。
JINのサイト表示速度を改善した方法③BJ Lazy Load
画像がたくさんあるサイトは読み込むのに時間がかかりますよね。
BJ Lazy Loadは最初に全部の情報を読み込むのではなく、読者の画面スクロールに合わせて必要な部分をちょっとずつ読み込んでいくことでサイト表示速度を向上させるプラグイン。
BJ Lazy Loadは有効化していれば、設定はデフォルトでも問題ありません。
WordPressのダッシュボード→設定→BJ Lazy Loadをクリック。
変更するとしたら、Thresholdくらいです。
Thresholdはページをスクロールするときの遅延レベルの設定。
数値が小さ過ぎる場合、スクロールが早いと画像の読み込みが間に合わないことがあります。
逆に数値が大き過ぎると、表示していない部分の画像まで読み込むため高速化の効果が薄れてしまいます。
推奨は200～400ということなので、現在は300に設定して様子見です。
JINのサイト表示速度を改善した方法④EWWW Image Optimizer
画像は圧縮すると劣化しますが、EWWW Image Opptimizerは画質を落とさず圧縮できる優秀なプラグイン。
EWWW Image Opptimizerはインストールをして有効化するだけで、アップロードした画像を自動的に圧縮してファイルサイズを小さくしてくれます。
ガラクタブログは画像をたくさん使って解説する記事が多いため、ファイルサイズが大きくなり過ぎないように意識しています。
具体的には、アイキャッチ画像は760×427、記事中の画像も基本的には幅480。
だから、画像に関してはこれ以上やることはないと考えていたのですが、甘かったです。
EWWW Image Opptimizerはインストール後のアップロード画像しか圧縮してくれません。
つまり、EWWW Image Opptimizerをインストールする前にアップロードされた画像は圧縮されていないのです。
最初から画像を取り込みし直しかな…と落胆したのですが、EWWW Image Opptimizerはやっぱり優秀。
WordPressダッシュボードのメディアに「一括最適化」というメニューがありました。
EWWW Image Opptimizerをインストール＆有効化していないと表示されません。
すると、圧縮できる画像の枚数が表示されて一括で画像を圧縮できます。
僕の場合は100枚以上の画像が表示されていました。
簡単なのでやってみてください。
JINのサイト表示速度を改善した方法⑤Autoptimize
Autoptimizeは、WordPressのJavaScriptやHTML・CSSなどのプログラミング言語を圧縮してくれるプラグイン。
Autoptimizeがあれば、プログラミング知識がなくてもサイトの表示速度を改善することができます。
実はAutoptimizeもインストール済だったのですがまったく設定をしておらず、本当にインストールしていただけの状態。
せっかくのプラグインが全然機能していなかったのです。
JavaScript オプションの「Java Spriptコードの最適化」と「Aggregate JS-files?」にチェック。
CSS オプションの「CSS コードを最適化」と「Aggregate CSS-files?」にチェック。
HTML オプションの「HTML コードを最適化」にチェック。
その他オプションは全部チェックしてます。
ここまでやっておけば十分。
ソースコードとか言われてもチンプンカンプンの初心者でも、簡単に最適化が可能です。
JINのサイト表示速度を改善した方法⑥Xサーバーの高速メニューの設定
JINの公式サイトにも記載されているのですが、XSERVERにはXアクセラレータ―というサイト表示速度を高速化する機能が備わっています。
XSERVERを利用しているのなら、一度設定がどうなっているかを確認だけでもしておきましょう。
XSERVERのサーバーパネルにログイン。
右端の列に、「高速化」という項目が表示されているはずです。
Xアクセラレータをクリックすると、現在の設定が表示。
「選択する」から設定を変更できます。
もし「OFF」になっているようでしたら、「Xアクセラレータ Ver.1」か「Xアクセラレータ Ver.2」に変更します。
Xアクセラレータ Ver.1とXアクセラレータ Ver.２の違いは、XSERVERの公式サイトでは下記のように説明されています。
シンプルにXアクセラレータ Ver.1の強化版がVer.2という認識で良さそうです。
Xアクセラレータ Ver.２の方がより高速化を期待できそうですね。
僕は何故かXアクセラレータがOFFになっていたので、この機会にXアクセラレータ Ver.２に変更してみました。
Xアクセラレータを設定するときに気になったのが、同じ高速化のカテゴリにある「サーバーキャッシュ設定」と「ブラウザキャッシュ設定」。
どちらもサイト表示速度を向上させる効果があります。
サーバーキャッシュ設定を覗いてみました。
「サーバーキャッシュ設定」も「OFF」になっていたので変更。
OFFがデフォルトなのか、自分が設定のときにうっかりさわってしまったのかは定かではありませんが、これは間違いなくONにすべき。
最後に「ブラウザキャッシュ設定」。
こちらもONにしておくと、同一ファイルへのアクセスのときにキャッシュファイルが使われるため、サイトの表示速度の高速化に役立ちます。
もしOFFになっているようでしたら、切り替えておきましょう。
WP Super Cache（プラグイン）は未導入でもOK
キャッシュ機能でサイトの表示速度を高速化するWP Super Cacheというプラグインがあります。
しかし、このWP Super Cacheはちょっと曲者で、インストールしたらWordPressで不具合が起きたという事例も多く報告されています。
また、JINの公式サイトでも、WP Super Cacheを利用するとデザインの変更が自動的に反映されなくなると言及されています。
キャッシュを削除すれば反映されます。
バックアップをとっているとは言え、初心者が利用するのはリスクが高いと判断して導入を中止。
他の方法を試してもサイト表示速度が改善されない場合には、WP Super Cacheを使うのは有効な手段かもしれません。
しかし、くれぐれもご注意を。
JINのサイト表示を改善した方法まとめ
以上の作業で、当ブログ（ガラクタブログ）のサイト表示速度は55→90へと大幅な改善ができました！
これだけの作業で、サイトの直帰率の改善やGoogleからの評価が上がれば嬉しいですね。
WordPressは、利用しているテーマによって相性の良いプラグインと相性の悪いプラグインがあるため、テーマに合うプラグインかどうかを事前に確認することをおすすめします。
また、事前にバックアップをお忘れなく。
この記事でお伝えしたように、サイトの表示速度の改善は初心者でもできます。
簡単に出来そうなことから、是非やってみてくださいね！
