本日はこんなお悩みを解決します。
2020年にGoogleが発表した「コアウェブバイタル」。今後、Googleでの検索順位を決定するための評価基準になっているものです。
この中で、サイトの読み込み速度についても触れられており、今後はブログ内で使用する画像は「軽いが正義」となる傾向にあります。
そこで、「画質が綺麗なくせに表示速度が速い」とウワサの次世代型の画像フォーマット「WebP」が注目されているというわけです。
本記事では「そろそろWebP化しなきゃ」と思っている方にWordPressプラグイン「EWWW Image Optimizer」を使った方法を解説します。
✔本記事を書いた人
ucozi(@ucozi_ikeda)
WebP(ウェッピー)とは?
WebP(ウェッピー)とは「次世代画像フォーマット」と呼ばれている画像形式。今まで主流だったJPEGやPNGよりもファイルサイズを小さくできるとして注目されています。こちらは、Googleが開発しました。
WebP 最大の特徴は、「画質綺麗なのに軽い」ということ。Google によると、 PNG に比べ26%軽く、 JPG より25〜34%軽くなるとのことです。Web サイトを軽くする最も効果的な方法は画像の軽量化ですから、この数字インパクトは相当です。
Googleの「PageSpeed Insights」を使用したことがあるなら知っている人も多いでしょうが、WebP画像を利用していないと「次世代フォーマットでの画像の配信」を利用するよう促がされると思います。
つまり、WebP化しておかないと、今後はGoogleの定める評価基準に満たないことになるので、SEO的にもよろしくないということ。このWebP形式に簡単に変更できるのが、プラグイン「EWWW Image Optimizer」です。
EWWW Image Optimizer とは?
「EWWW Image Optimizer」は、画像を自動で圧縮してくれる便利なWordPressプラグインです。
特徴をまとめると以下のとおり
- 画像を圧縮してファイルサイズを縮小する
- サイト内が軽くなり表示速度が上がる
- 読み込みが速くなり不要な離脱を減らす
ちなみに、WebPの設定には「.htaccess」の設定も必要となります。設定レベルとしては応用編になるので、初心者の方はWebP設定しなくてもOK。基本設定だけでも十分に画像の圧縮効果を得られます。
EWWW Image Optimizer のインストール
まだ、「EWWW Image Optimizer」をインストールしてない方はインストールから始めましょう。
手順は以下のとおり。
step
1プラグインに移動
WordPressにログインして、左メニューから「プラグイン」>「新規追加」をクリック。
step
2「EWWW Image Optimizer」を絞り込み
右上の検索窓に「EWWW Image Optimizer」と入力して絞り込みます。
step
3インストールを実行
「今すぐインストール」をクリック。
step
4有効化を実行
インストールが完了したら「有効化」をクリックします。
左メニューの「設定」内に、新たに「EWWW Image Optimizer」が加わっています。
こちらをクリックして設定画面を開きます。
EWWW Image Optimizer の設定
設定画面を開いたら、下の方に今回の目的である「WebP変換」の項目があるのでチェックします。
チェックをすると、自動で JPEG や PNG の画像から WebP 画像を生成してくれます。
ただし、チェックをしたただけでは WebP 画像の配信は行われません。もうひと手間として、サーバー側の設定が必要です
サーバー側の設定前では、赤色で「PNG」と表示されています。
「.htaccess」を設定
「WebP変換」にチェックを入れ、いったん「保存」をクリックすると、コードが表示されるようになります。
このコードを「サーバー」の「.htaccess」に追記します。
設定方法は使用しているサーバーによって異なるので、ご自身のサーバーの「Q&A」などで調べましょう。
ちなみに、本ブログで使用している「mixhost(ミックスホスト)」については、こちらで詳しく解説されています。
≫ 参考:mixhostヘルプページ「.htaccessの利用について」
正常に設定が完了すると、先ほどの設定画面の赤色表示の「PNG」が緑色の「WebP」に変っているはずです。
一括最適化でWebP画像を生成
既にアップ済みの画像をWebP画像に変換するには、もうひと手間必要です。
step
1一括最適化をクリック
WordPressに戻り、左メニューから「メディア」>「一括最適化」をクリック。
step
2画像をスキャン
「再最適化を強制」と「WebPのみ」に チェックを入れて「最適化されていない画像をスキャンする」を実行します。
WebP変換されていない画像が抽出されるので「画像の最適化」をクリックします。
WebPで配信されているかを確認する
確認方法は簡単。ブログ内の画像を「右クリック」して「名前を付けて画像を保存」を選択。
URLの末尾が「.webp」になっていればOKです。
※WebP画像になっていない場合はキャッシュが残っている可能性があるのでクリアしてから、再度チャレンジしてみてください。
まとめ:プラグインを使えばカンタンです
WordPressで記事を投稿を続けていくと、いずれ問題として浮かび上がってくるのが画像データの問題。
使用している画像が多くなるほどサイト読み込みに時間がかかり、表示速度を低下させてしまいます。
サイトの表示速度が落ちるとGoogleの評価が下がることはもちろん、ユーザビリティとしても低いので、読者の離脱につながります。
プラグイン「EWWW Image Optimizer」を使えばそれほど難しくないので、このタイミングでWebP化に切り替えてしまいましょう。
本日は以上です。
本記事がどなたかのお役に立てたら嬉しいです。
最後までお読みいただき、ありがとうございました。