WordPress 記事を書くにあたって気になるのが、記事内で使用している画像の容量です。
Webページの容量・サイズというのは90%以上を画像などのメディアファイルが占めており、いかに画像を最適化して軽くするかどうかが、ページ読み込み速度の改善に繋がります。
そこで役立つのが自動で画像容量を圧縮できるプラグイン「EWWW Image Optimizer」です。
WordPress サイトのページ表示速度の最適化・高速化を行っている方のほとんどが使用しているプラグインであり、その効果は絶大です。
どれくらい容量が小さくなる?
試しにWordPressにアップロードしている2枚の画像をEWWW Image Optimizerを使って圧縮してみましょう。
どちらも幅1200px・高さ675pxでそこそこ大きい画像です。
圧縮した結果がこちらです。
最適化前 | 最適化後 | |
---|---|---|
1枚目 | 834.7 KB | 605.5 KB |
2枚目 | 752.6 KB | 601.2 KB |
有料版だとさらにサイズが小さくなり、下記のようになります。
最適化前 | 最適化後(無料) | 最適化後(有料) | |
---|---|---|---|
1枚目 | 834.7 KB | 605.5 KB | 323.3 KB |
2枚目 | 752.6 KB | 601.2 KB | 311.0 KB |
とにかく容量を小さくしたい方は有料版を検討してもいいですが、初めのうちは無料版でどれくらい自分のサイトの画像が最適化されるのか様子をみるのが良いでしょう。
EWWW Image Optimizerのインストール
EWWW Image Optimizerは、プラグイン新規追加画面からインストールできます。
よく似た名前の「EWWW Image Optimizer Cloud」がありますが、こちらは別物です。
機能面やサーバー負荷に関しては圧倒的に 「EWWW Image Optimizer Cloud」 が優れているのですが、初期設定がやや面倒なので今回は「EWWW Image Optimizer」を使用します。
インストールしたら有効化しましょう。
有効化すると、「プラグインの使われ方調査をと…」といったメッセージが表示され、許可すると無料クレジット500枚もらえると書いていますが、これはどちらを選んでも構いません。
EWWW Image Optimizerは無料版であれば何枚でも無制限に画像を圧縮することが可能ですので、500枚の無料クレジット使い切ったらすぐ購入しないといけないのかというとそうではありません。
これでEWWW Image Optimizerの準備完了です。
EWWW Image Optimizerの使い方
画像が圧縮されるタイミング
EWWW Image Optimizerを有効化している状態でアップロードされた画像を自動的な圧縮してくれます。この圧縮処理は完全自動ですので、わざわざ圧縮開始ボタンをクリックするといった作業は必要ありません。
画像の圧縮状況はメディアライブラリで確認可能です。
既にアップロード済みの画像については、別で一括最適化の処理を行うことでまとめて圧縮できます。
アップロード済みの画像を一括で最適化する
アップロード済み画像は自動で最適化されません。
別で最適化処理を行う必要があります。
アップロード済みの画像を一括で最適化する場合は
→ から行えます。ページを開いたら
をクリックします。EWWW Image Optimizerで最適化していない画像が見つかった場合、最適化できる枚数とボタンが表示されるのでボタンをクリックして最適化を行います。
最適化が始まるとこのような画面に移りますが、最適化を行っている最中はこの画面を閉じないでください。画面を閉じると一括最適化が停止します。
最適化された画像はこのようにログとプログレスバーで進捗が表示されます。
EWWW Image Optimizer導入以前の画像は、この方法で一括最適化するようにしましょう。
EWWW Image Optimizerの最適な設定
デフォルトでは完璧に圧縮してくれるというわけではありません。
圧縮率が極めて高いWebP形式への変換が初期設定では無効であるため、アップロード画像のWebP差分生成を有効化すれば圧縮率が20~30%上がります。もちろん無料です。
やり方は簡単。
→ を選択します。様々な設定項目が表示されますが、
タブに切り替えます。にチェックを入れます。
項目の説明にJPG から WebP への変換は非可逆ですが...
とありますが、ほとんど関係ない話ですので無視して構いません。
変更したら一旦変更を保存を押します
保存した後、設定画面の
の下にある するをクリックします。リライトルールの挿入を忘れると、せっかく容量が最適化されたWebP画像を生成してもWebページで読み込まれません。
「挿入成功」と表示され、右端の「赤いPNG」が「緑のWebP」に変われば挿入成功です。
キャッシュの設定によっては切り替わらないことがあるので、その場合はCtrl+F5キーで再読込してください。
これでEWWW Image Optimizerを使った最大限の最適化ができるようになりました。
画像が少ないページでも、アイキャッチ画像をしっかり設定していて、なおかつサイドバーなどに新着記事や関連記事を表示していると1ページ内の画像総数は思ったよりも多かったりします。
EWWW Image Optimizerで画像容量圧縮するだけでページ容量が1000KB以上小さくなることもよくある話で、SEO上の効果もわずかに期待できます。
やるだけ得なので、WordPressサイトを運営する際は必ず入れておきましょう。