WordPressでブログを運営していると、画像が増えてページの表示が遅くなることがあります。
私も新しく作ったブログで、ヘッダーは表示されるのに、記事の画像がなかなか表示されないことが気になっていました。
そこで今回、画像を最適化できるプラグイン「EWWW Image Optimizer」を導入してみました。
以前から別のブログでも使っていましたが、久しぶりに設定してみると画面が変わっていて、WebPの設定も以前より簡単になっていました。
今回は、実際に行った設定方法をご紹介します。
EWWW Image Optimizerとは？
EWWW Image Optimizerは、WordPressにアップロードした画像を最適化できるプラグインです。
画像のファイルサイズを小さくすることで、ページの読み込みを軽くする効果が期待できます。
また、画像をWebP形式に変換する機能もあります。
WebPは、JPEGやPNGよりもファイルサイズを小さくできる場合がある画像形式です。
EWWW Image Optimizerをインストールする
WordPressの管理画面から、次の順番で操作します。
- 「プラグイン」→「新規プラグインを追加」を開く
- 検索欄に「EWWW Image Optimizer」と入力する
- 「今すぐインストール」をクリックする
- 「有効化」をクリックする
有効化したら、設定画面を開きます。
初期設定を行う
初期設定では、サイトを高速化する目的を選択しました。
今回は無料モードを選んで進めています。
設定画面では、画像のメタデータ削除や遅延読み込み、WebP変換などの項目が表示されます。
私のブログではCocoonを使用しているため、遅延読み込みは重複しないように設定しました。
WebP変換を有効にする
WebP変換にチェックを入れて、設定を保存します。
その後、EWWW Image Optimizerの「変換」タブでWebPの配信設定を確認しました。
以前はサーバー側の設定ファイルを編集したこともありましたが、今回の画面には「リライトルールを挿入する」というボタンがありました。
このボタンをクリックすると、私の環境では「挿入成功」と表示されました。
さらに、確認用の表示が赤い「PNG」から緑色の「WEBP」に変わりました。
※サーバー環境によって設定方法や表示が異なる場合があります。設定ファイルを手動で変更する場合は、事前にバックアップを取ってください。
画像のリサイズ設定も確認
「リサイズ」タブでは、画像を一定の大きさに縮小する設定もできます。
私の場合、ブログによって画像の使い方が違うため、設定を分けることにしました。
Excelブログでは画像の軽量化を重視し、己書ブログでは作品写真の画質や元画像を残すことを優先しています。
特に作品写真など、元の画像を残しておきたい場合は、リサイズやオリジナル保存の設定を確認してから最適化するのがおすすめです。
詳しい設定項目が見つからない場合は、オレンジ色の『ルディクロスモード』ボタンをクリックすると、すべての設定項目を表示できます。無料モードのまま利用できます。
すでにアップロードした画像を一括最適化する
EWWW Image Optimizerを導入する前にアップロードした画像も、一括で最適化できます。
- WordPressの「メディア」→「一括最適化」を開く
- 最適化対象の画像を確認する
- 「最適化を開始」をクリックする
- 処理が終わるまで待つ
私のExcelブログでは、最適化対象として1,030点の画像ファイルが表示されました。
同じ画像が何枚もあるように見えましたが、WordPressでは1枚の画像から複数のサイズの画像が作られるため、それぞれが最適化対象になることがあります。
一括最適化が終わってからブログを確認すると、以前より少し表示が速くなったように感じました。
設定後はブログの表示を確認する
最適化後は、実際に記事を開いて画像が正しく表示されるか確認しましょう。
私の場合、アイキャッチ画像が記事ページに表示されないことがありましたが、アイキャッチを設定し直すと正常に表示されました。
原因がEWWW Image Optimizerだったかどうかは分かりませんが、設定後に確認しておくと安心です。
また、画像の最適化だけですべての表示速度の問題が解決するわけではありません。広告やテーマ、ほかのプラグインなども表示速度に影響する場合があります。
まとめ
EWWW Image Optimizerを使うと、WordPressにアップロードした画像の最適化やWebP変換ができます。
今回の設定では、以前よりもWebPの配信設定が簡単にできたことが印象的でした。
画像が多いブログや、表示速度が気になっているブログでは、一度確認してみるとよいと思います。
ただし、画像を縮小する設定やWebPの配信方法は、ブログの用途やサーバー環境に合わせて選ぶことが大切です。
EWWW Image Optimizerの設定を動画でも紹介しています
以前、Googleアドセンスの審査に向けて画像を最適化したときの体験も記事にしています。
EWWW Image Optimizerの設定手順を動画でも紹介していますので、画面を見ながら操作したい方はこちらも参考にしてみてください。
ただし、動画を作成した当時と現在では設定画面が異なります。
現在は「リライトルールを挿入する」ボタンからWebPの配信設定ができるようになり、私の環境では以前よりも簡単に設定できました。
WordPressをもっと学びたい方へ
WordPressの設定やブログ運営について、基本から学びたい方には入門書もおすすめです。
プラグインの設定だけでなく、WordPress全体の仕組みを知っておくと、ブログの管理にも役立ちます。
コメント