【初心者でも簡単！】ブログの表示速度を上げる為の改善策まとめ

先日僕のブログの表示スピードがメチャクチャ遅い事が判明しました。

テーマを無料テーマ『cocoon（コクーン）』から超高速テーマと言われている有料テーマ『THE THOR（ザトール）』に変更し、『Page Speed Insights』を使って表示スピードを計測したところ、”驚き”の結果に！

なんと、メチャクチャ遅くなってしまいました…
(※注意　『THE THOR』が悪いわけではなく、僕が使いこなせていないだけです。）

一体どうなっているんだ…

『THE THOR』のサイト作成においての自由度の高さ・デザイン性の高さは素晴らしく、とても気に入ったテーマ~~（高い金を出して買ったテーマ）~~だったので、『cocoon』戻すのも憚られ、ページスピード改善に向けて動く事を決意しました。

しかし、『Page Speed Insights』の改善策を読んでも、他の方の改善策を読んでも、いつまで経っても素人気分の僕はチンプンカンプン。何を言っているのかサッパリ分かりませんでした。

その中で、~~（こんなバカな）~~僕でも理解し実践できた対策をご紹介したいと思います。メチャクチャ素人向けだと思います。

CONTENTS

1 対策前後のブログの表示スピード
- 1.1 改善前
- 1.2 改善後
2 ブログ表示スピード高速化の為に行った対策
3 まとめ

対策前後のブログの表示スピード

最初にどれだけ対策前後でどれだけ改善出来たのかをお見せしておきます。

改善前

パソコン

モバイル

『cocoon』を使用していた時は、パソコンで90 over、モバイルで80 over程度だったと思います。

泣きたくなるくらい遅くなっています。

きっと『cocoon』のシンプルな作り、高速化設定のお陰でスピードを維持出来ていたのだと思います。『THE THOR』に変更した結果、デザイン性の高さと自由度の高さに興奮し、調子に乗って装飾をし過ぎて重くなってしまったのが原因かもしれません。

また何より、超高速テーマである『THE THOR』の機能を僕が使いこなせていない事が問題でしょう。

改善後

パソコン

モバイル

対策を行った結果、なんとかここまで回復させる事が出来ました。

パソコンに関しては、とりあえず一安心。問題なさそうです。

モバイルに関しては、まだまだ改善の余地（早急に対策を練るべき？）はありますが、とりあえず今の僕が出来ることはこれが限界です。

時間を見つけてまた取り組みたいと思っています。

ブログ表示スピード高速化の為に行った対策

僕が行った対策は、

・画像の圧縮

・高速化の為のプラグイン導入

・スピードに影響を与えるプラグインの停止

・過大なDOMサイズの回避（ウィジェットを簡素化）

・サーバー応答時間の短縮（TTFB）

の5項目です。

一つずつ見ていきましょう。

画像の圧縮（適正なサイズの画像）

今まで画像サイズをそこまで気にしたことがなかったです。その為、サイズの大きい画像を考えなしに貼り続けた結果、ブログを重たくしてしまっていました。

圧縮ツールを調べると、アップロード前に画像を圧縮出来るツールは多数存在していましたが、僕の場合、既にアップしてしまっていたので、アップロード済みの画像を一括で圧縮できるものを探しました。

そこで見つけたのが、

・EWWW Image Optimizer

・Compress JPEG & PNG images

の2つのプラグインです。

ブログ運営をしている人であれば、お馴染みのプラグインだと思いますが、僕は知りませんでした。(笑)

まず、『EWWW Image Optimizer』を使って、2000枚近くあった画像（メディアライブラリ内も含む）を一気に圧縮しました。

使い方は簡単です。

インストール後、メディアの中に一括最適化が表示されるようになります。

『最適化されていない画像をスキャンする』をクリックすれば完了です。

一括最適化が怖い場合は、一枚一枚選んで最適化する事も可能です。

また、EWWW Image Optimizerは一度設定しておくと今後自動的に最適化してくれるので非常に便利です。

それでも、まだ重たいままだったので、更に『Compress JPEG & PNG images』を使って圧縮しました。

（※注意　EWWW Image Optimizerを停止ししてからでないと使用出来ません）

こちらも使い方は簡単で、有効化後にメディアから『Bulk Optimization』に入り、『Start Bulk Optimization』をクリックすれぼOKです。ただCompress JPEG & PNG imagesは月に500枚までしか圧縮できません。

それ以上行いたい場合は有料になります。

9,500枚までは画像1枚につき0.009ドル、10,000枚までは1枚あたり0.002ドル掛かります。

僕は枚数を完全にoverしていたので、思い切って有料でやってみました！

といってもおよそ2000枚程度を圧縮し、掛かった費用は13.73ドル（日本円に換算すると現在のレートでおよそ1,500円）なので、全然気になりません。

有料版登録にはクレジットカードが必要です。

高速化の為のプラグイン導入

僕が高速化の為に追加したプラグインは『lazy lord』です。日本語では『遅延読み込み』と呼ばれています。

このプラグインは、ページを開いた時点では画像を表示させず、スクロールし画面に到達した時点で表示する機能です。必要のない時には表示させない省エネモードみたいなものです。

表示の際に一気にページ内の画像を読み込まないので、ページ速度が速くなります。

使用を止めたプラグイン

逆に使用を止めたプラグインもあります。

プラグインはとても便利ですが、逆にサイトを重たくしてしまう場合があります。

そして僕の場合（THE THORを使っている場合）、相性の悪いプラグインが見つかり、その使用も止めました。

僕がまず止めたプラグインは『Jetpack by WordPress.com』です。有名なプラグインで多くの方が使用していると思います。

僕も、ウィジェットでの使用やword pressと連携させて重宝していたので、少々躊躇いましたが、スピードを優先させました。

また『THE THOR』は、そもそも高速表示機能が備わっているのでキャッシュ系のプラグインは必要ないとの事。それらも思い切って全て停止しました。

止めた後、更にスピードが下がるという事もなかったので、確かに『THE THOR』にはキャッシュ系は必要なかったようです。

『THE THOR』でなくても、プラグインが逆に重くしてしまっている可能性や、テーマの機能と干渉し合い不具合を起こす場合もあるので、一つ一つ止めて、検証してみるのも良いと思います。

過大なDOMサイズの回避（ウィジェットを簡素化）

ブラウザエンジニアは、ページに含まれる DOM のノード数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。
引用：『Page Speed Insights』

何を言ってるのかサッパリわかりませんでしたが、つまりは、youtube等の動画やSNSなどのタイムラインなどを入れ過ぎるとノード数が一気に上がってしまうそうです。

僕のサイトでは、ウィジェットエリアにTwitter・Instagram・YouTube全て搭載していました。

まさに『これの事か！』と思い、全て削除し、簡素化する事にしました。

全て外す事によって、ノード数が一気に下がりました。

まだ、投稿ページにもかなりyoutubeの動画やSNSタイムラインが残っているので、今後減らしていこうと思っています。

ご自身のサイトを今一度見直し、過剰な装飾がないか確認してみて下さい。