- 自サイトがなんだか重い気がする。。。
- 自サイトの表示速度を改善したい。
そんな疑問が解決できる記事を書きました。
本記事の内容
- サイト速度改善に役立つ3つのプラグインの紹介
- サイト速度改善に関する豆知識
執筆者情報
僕が運営する当サイトは、これから紹介するプラグインの導入やその他施策により、PageSpeedInsightsで34点→67点の表示速度スコア改善に成功しています。
さっそく解説していきます。
＼当ブログで使用中のテーマ／
サイト速度改善に役立つプラグイン3選
はじめに結論。
サイト速度改善に役立つお手軽プラグインはこの3つ。
| プラグイン | 目的 | |
| 1 | Compress JPEG & PNG images | 画像圧縮 |
| 2 | Autoptimize | ・コード圧縮 ・画像読み込み遅延 |
| 3 | WP Fastest Cache | キャッシュ活用 |
順に解説していきます。
導入する前に自サイトの表示速度を確認しておこう！
3つのプラグインを導入する前に、PageSpeedInsightsで現在の自サイトの表示速度を確認しておきましょう。
使い方が分からなければ、こちらの記事を参考ください。
（1分でできます）
①Compress JPEG & PNG imagesプラグイン
以下について順に解説します。
- Compress JPEG & PNG imagesってどんなプラグイン？
- Compress JPEG & PNG imagesの導入方法
- 画像の最適化ベストプラクティス
Compress JPEG & PNG imagesってどんなプラグイン？
Compress JPEG & PNG imagesは、画像の最適化に必須の画像圧縮を行ってくれるプラグインになります。
なぜなら、画像のファイルサイズは、Webサイトを構成するHTMLやCSSコードに比べて明らかに大きいから。
このプラグインを導入すれば、WordPressに画像をアップロードするときに自動で圧縮してくれます。
EWWW Image Optimizerではだめなの？
よく比較されるのですが、画像圧縮プラグインの有名どころとして、EWWW Image Optimizerプラグインというものもあります。
こちらを採用しても全然かまいませんよ。
細かい話は抜きにして簡単にまとめると、下表のとおり。
※両者無料版の場合です。
| EWWW Image Optimizer | Compress JPEG & PNG images | |
| 圧縮方針 | 画像劣化を最小限に抑えて圧縮 | 圧縮最優先 |
| 圧縮率 | Compress JPEG～に比べると、低い | 高い |
| サーバーへの負荷 | 高い ※ページの表示速度に影響が出る可能性がある |
低い |
| 無料版でできること | 何枚でも圧縮可能 | 500枚/月まで |
| おすすめな人 | ・画像の枚数が多い ・画像（写真）を最大限売りにしたサイト |
・画像の枚数がそこまで多くない ・ページの表示速度を損ないたくない |
それらの画像すべてに圧縮の設定をしていると、月100枚くらいとなるので注意。
なぜかと聞かれれば、以下の理由です。
- 圧縮最優先のため、EWWW～より画像劣化があると言っても、見た目上は分からないレベルだから
- サーバーの負荷が低く、ページ速度を損なわないから
- 月100枚程度で今のところ問題ないから
導入方法
こちらのサイトでていねいに解説されているので参考ください。
>>【画像圧縮】Compress JPEG & PNG images プラグインの設定と使い方
画像の最適化は「リサイズ」してから、「圧縮」がベストプラクティス！
画像の最適化は以下の手順で行うのがベストプラクティスです。
- 画像のリサイズ
（Bulk Resize Photosを使用。JPG化も合わせて行う。） - 画像の圧縮
（WordPressに画像アップロードすれば、Compress JPEG & PNG imagesプラグインが自動で圧縮してくれる）
ついでにファイル形式をPNG➡JPG化も行ってくれます。
あなたのサイト記事の表示幅に合わせて画像サイズをリサイズしてみてください。
その他画像は80KB以内くらいを目安にしてみてください。
豆知識：JPGとPNGについて
画像の拡張子でよく見かけるJPGとPNGの違いについて、ご存知ない方は以下を参照ください。
それぞれに適したもののほうがファイルサイズも軽くなります。
②Autoptimizeプラグイン
以下について順に解説します。
- Autoptimizeってどんなプラグイン？
- Autoptimizeの導入方法
Autoptimizeってどんなプラグイン？
こんなプラグインです。
- CSSやJavaScriptコードを圧縮してくれる
- 画像を遅延読み込みしてくれる
コードの圧縮とは？
コードの圧縮とは、改行やスペースやコメントなど、無駄な記述を省いてファイルサイズを小さくすること。
必要なコードは消されないので安心してくださいね。
画像の遅延読み込みとは？
ページを開いたとき、画面外の画像ってどうせ見えないですよね？
Autoptimizeの導入により、画面外の画像はあとで読み込むように設定できます。
もちろん、最初にすべての画像を読み込むより、表示速度も向上します。
導入方法
こちらでていねいに解説していますので参考ください。
実際に自サイトのページを読み込んでみて画面を確認してみてください。
※特にスマホ画面で確認されることをおすすめします。
③WP Fastest Cacheプラグイン
以下について順に解説します。
- WP Fastest Cacheってどんなプラグイン？
- WP Fastest Cacheの導入方法
- WP Fastest Cache導入の注意点
WP Fastest Cacheってどんなプラグイン？
WP Fastest Cacheプラグインは、キャッシュの活用を図るプラグイン。
これを活用することで、表示速度を改善できます。
導入方法
こちらのサイトでていねいに解説されているので参考ください。
>>WP Fastest Cacheの使い方・設定方法【キャッシュ改善のおすすめプラグイン】
注意点：カスタマイズしたら、キャッシュクリアをお忘れなく
WP Fastest Cacheを導入すると、テーマのカスタマイズなどを行った際に、画面に反映されないことがよくあります。
それは、カスタマイズ前のキャッシュが残ってしまうためです。
面倒ですが、カスタマイズを行った際はキャッシュをクリアするようにしましょう。
▼キャッシュのクリアはWordPressのホーム画面からできます。
サイト速度改善に役立つお手軽プラグイン3選 まとめ
いかがでしょうか。
すべて導入できましたら、再度PageSpeedInsightsにて表示速度を計測してみてください。
少し改善されていることと思います。
プラグインを入れすぎると読み込みに時間がかかり、重くなりがちです。
なのでプラグインは厳選すべきではあります。
とはいえ、今回紹介したプラグイン3種はあまり時間をかけずに表示速度の改善が図れるので、サクッと解決したい人には超おすすめです。
サイト速度改善に役立つプラグインならこの3つ
- Compress JPEG & PNG imagesプラグイン
圧縮してくれます。 - Autoptimizeプラグイン
コードや画像の最適化をしてくれます。 - WP Fastest Cacheプラグイン
キャッシュを活用することで速く読み込めるようになります。
この記事が少しでもお役に立ちますと幸いです。
