- 最近ブログの表示速度が遅いと感じる
- ブログの読み込み速度を簡単に上げる方法があったら知りたいな
このような方に向けて、今回はWordPressで公開しているブログの表示速度を上げるために、実際に導入して効果のあったプラグインやツールについて紹介していきます。
設定方法はそれほど難しくないので、速度を上げたい方はぜひ参考にしてください。
Contents
ブログの表示速度は上げる必要があるの？
ずばり必要です！
Googleはページの表示速度は検索結果に影響すると公表しています。なぜなら表示速度を上げることで、ユーザーにストレスフルな検索体験を提供できるからです。
ページの読み込み速度が遅いことでユーザーにストレスを与えてしまいますし、あまりに読み込みが遅いと即離脱にもつながります。せっかく時間をかけて記事を書いたのに、読み込みが遅くて離脱してしまうのはあまりにもったいないですよね……。
ちなみにブログのスピードをチェックするにはGoogleのPageSpeed Insightsで確認できるので、気になる方はぜひチェックしてみましょう。
当ブログも以前はモバイルのスコアが40と最悪な数値でしたが、ここで紹介するプラグインを導入することで、大きく改善できました。
モバイル
パソコン
ブログの表示速度を上げるために使っているプラグイン2つ
ここではブログの表示速度を上げるために、実際に使っているプラグインを紹介しています。
プラグインを導入するには、WordPressのダッシュボードにある「プラグイン」→「新規追加」→「プラグイン名」で検索してインストールします。
Autoptimize
Autoptimizeはサイトを高速化するためのプラグインです。このプラグインを導入することで、WordPressに実装されているCSSやJavaScriptのコードを圧縮して軽量化・最小化し、ページの速度を改善します。
Autoptimizeを導入したら「有効化」して「設定」画面を開きます。
画面上部の各タブをクリックして設定していきます。
JS、CSS $ HTML
それぞれ以下の項目にチェックをいれます。
JavaScriptオプション
CSS オプション
HTML オプション
その他オプション
画像
「画像の遅延読み込み (Lazy-load) を利用」のみチェックをいれます。
ただし他の画像遅延読み込み用プラグインを使用している場合は、機能の競合によりパフォーマンスが悪化する可能性もありますので、チェックはいれないでください。
EWWW Image Optimizer
EWWW Image Optimizerは画像を劣化せずに圧縮・最適化するためのプラグインです。画像を最適化することで、ブログ全体を軽量化できますので、ブログのスピード改善が期待できます。
EWWW Image Optimizerの主な機能は以下のとおりです。
- 画像をアップロード時に自動で圧縮できる
- アップロードしたすべての画像を一括で圧縮できる
EWWW Image Optimizerを導入したら「有効化」して「設定」画面を開きます。
設定画面の各タブをクリックして設定していきます。
ベーシック
「メタデータを削除」にチェックを入れることで、画像の不要なデータを削除できます。
変換
「コンバージョンリンクを非表示」にチェックを入れることで、画像を自動で変換されるのを防ぎます。
これでEWWW Image Optimizerの基本設定は以上です。
画像を一括で圧縮する
EWWW Image Optimizerで今までアップロードした画像を一括で圧縮するには、ダッシュボードより「メディア」→「一括最適化」をクリックします。
「最適化されていない画像をスキャンする」をクリックすることで、画像を一括で最適化されます。
画像の数が多い場合は変換に時間を要しますので、時間に余裕があるときに実施しましょう。
ちなみにEWWW Image Optimizerは「有効化」しておくことで、画像をアップロード時に自動で圧縮してくれます。そのため画像の一括圧縮はEWWW Image Optimizerを導入したときのみ実施しておけばOKです。
画像を更に軽量化するためには
画像の拡張子・サイズ
画像の拡張子には「png」「jpg」「jpeg」「gif」などがあります。ブログで画像を挿入する場合はページ速度に影響しますので、サイズが大きい「png」「gif」はおすすめできません。
そのため画像は「jpg」「jpeg」形式がオススメです。ブログで使う画像はjpegでも十分きれいですし、素人目にはpng？jpeg？かは判断つかないと思います。
ちなみにMacの場合は、png形式の画像ファイルを簡単にjpegに変換できます。
png→jpegへの変換方法
- 変換したいファイルをまとめて選択してプレビューを開く
- 「メニュー」→「ファイル」→「選択中のイメージを書き出す…」を選択
- 「オプション」よりフォーマットを「jpeg」にして保存
また画像のサイズが大きいと、その分データの容量が大きくなるので注意が必要です。ブログではスペースに限りがあるので、幅700〜800px程度でも十分です。
ImageOptimを使う
プラグイン「EWWW Image Optimizer」を使って画像を圧縮化・軽量化する方法については解説しましたが、私の場合は更に画像を最適化するために、ブログに挿入する前に画像をツールを使って圧縮しています。
画像を圧縮するためのおすすめのツールは「ImageOptim for Mac」です。
使い方は簡単で圧縮する画像をドラッグ&ドロップするだけです。
画面右側の緑のアイコンがチェックマークに変わったら圧縮成功です。
ちなみにこのツールはMacのみ対応ですので、Windowsユーザーの方は別途圧縮ツールを探してみてください。
まとめ
ここではブログの表示速度を上げるためのおすすめのプラグインとその使い方を詳しく解説しました。読み込み速度に大きく影響する画像についても、最適化の方法について解説しました。
速度を改善するためにおすすめのプラグインは以下となります。
ブログの表示速度が気になる方は、この2つのプラグインを導入するだけでも、大きく改善できるので、ぜひ試してみてください。
