大阪のWeb制作会社です。
ホームページ制作の無料相談はこちら

技術メモ
WordPressで画像圧縮・遅延読み込み・WebPなら、プラグインEWWW Image Optimizer!

本日は、珍しくWordPressプラグインの話をします!
最近では、メッッっっきりWordPressのプラグインをいれる機会が減ってきたものの、これは外せない!というのも必ずあるわけです。そして、今回ご紹介させていただくのが、「EWWW Image Optimizer」というものです。
このプラグインって有名ですが、僕の方がWordPressを学び始めた頃は、画像圧縮だけの機能だけだった記憶があったのですが、最近、使うとかなり多機能になってて、画像系のWebサイトを高速化するための機能を簡単に実装できる優れものです!

なぜ、画像を圧縮、遅延読み込み、WebP化する必要があるのか?

端的にいうと、Webサイトの表示速度を上げるためです。「なんだこのサイト、全然表示されへんやん」。そんな経験をあなたもしたことがないでしょうか?特に、昨今ではスマホでのWebサイト閲覧が増えていますが、そのWebサイトの表示速度は、パソコンでの表示に比べて遅い傾向があります。(インターネット環境が脆弱であることと、スマホデバイスのスペック等に起因します。)
有名は話ですが、

・表示速度が1秒から3秒に落ちると、直帰率は32%上昇
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇
Find out how you stack up to new industry benchmarks for mobile page speedより引用

またGoogleは、ページ表示速度がSEOに影響することを公表しています。そして、Googleは2018年7月に「モバイル検索の検索順位要素としてページ表示速度を使用する」という内容のSpeed Updateを導入しました。ページ表示速度はランキングの要素でもあり、ページ速度の向上は滞在時間や被リンク獲得に影響するなど、非常に重要なランキング要素のひとつです。

以上のように、現代のWebサイトは、スマホでも見られる想定で作ることがほとんどであり、スマホでの表示スピードの改善は必須の事項といえます。(少なくと表示の際に、ユーザーにストレスを与えないというのは非常に重要です。)そして、今回ご紹介させていただく、「画像圧縮・遅延読み込み・WebP化」というのは、Webサイトの速度に大きく影響する容量の重い「画像・動画」を改善するのに素晴らしい効果を発揮します。

なぜ、プラグインは少ない方が良いのか?

WordPressのプラグインは、簡単にWebサイトをパワーアップできる非常に便利なものです。Webの知識がなくても難しい機能を簡単に実装できます。しかし、注意が必要なのはメリットばかりではありません。プラグイン導入のデメリットは以下の3つです。

プラグインが多いと、Webサイトの表示速度が下がる可能性がある

導入するプラグインが多ければ多いほど、良いというものではありません。お互いのプラグインがバッティングし、Webサイトの遅延に影響する可能性があります。また、プラグインによっては、データベースに取得データを蓄積し続けるようなものもあるようで、そういったプラグインを挿入すると、表示スピードに致命的なダメージを負わせることになります。

プラグインのメンテナンス性が落ちる

WordPressはというのはアップデートを繰り返し続け、今でも進化を続けています。そして、それに合わせてWordPressのプラグインもアップデートされ続けています。ただし、プラグインによってはそのアップデートに追いついていないケースがあったり、アップデートを止めてしまっているものも存在します。(そういうプラグインは導入しないようにしましよう。)プラグインの導入数が多くなればなるほど、プラグインのメンテナンスがどんどん大変になっていきます。(このプラグインはアップデートをし続けているのか?また、アップデートが止まったのであれば、代替のプラグインを探したり、なければ自分で実装しないといけないケースが出てきます。)

プラグインのセキュリティ問題がある

しばしば、WordPressはセキュリティ面において欠陥があるようなことがいわれます。もちろん、パスワードでログインするというCMSの機能上、そういう側面があることは否定できません。(WordPressの世界的シェアが1位で、攻撃しやすいからということもあります)。WordPressの一部である「プラグイン」にもセキュリティに気をつけなければいけません。プラグインを介して、サイトに侵入するものがあったり、プラグインがそもそもマルウェアであったりするケースがあるようです。

以上の点でデメリットにもなりうるプラグインですが、今回紹介するプラグインは、セキュリティ面でも安全性があり、1つで3役の機能がある導入をオススメできる1つです。

WordPressで画像圧縮・遅延読み込み・WebPなら、プラグインEWWW Image Optimizer!

「EWWW Image Optimizer」で画像圧縮する

画像圧縮とは?

画像圧縮とは、画像の内蔵されている余分なデータを削除して、画像の容量を軽くすることです。画像の容量を下げることで、画像がWebサイトに表示されるスピードが早くなります。

圧縮する方法はたくさんあります。画像の規格によってはも方法が異なりますが、下記サイトが色々まとめってて良いかもしれません。

上記のように画像を圧縮したものを、今回紹介するWordPressプラグイン「EWWW Image Optimizer」でさらに圧縮して、Webサイトのスピードアップを望めます。

「EWWW Image Optimizer」での画像圧縮手順

EWWW Image Optimizerでの画像圧縮手順
プラグインをインストールすると、自動的にメディアのサブメニューに「一括最適化」が表示されるようになる。
EWWW Image Optimizerでの画像圧縮手順
青いボタンをクリックして、最適化完了を待つだけ。

簡単ですね。WordPressのメディアに入っている画像の多さにによっては、圧縮にかなり時間がかかります。また、今後の圧縮については、メディアに画像をアップロードした時に自動的に圧縮されますので、時間がかかるのはプラグインを導入してからの一度だけなので、かなりお手軽に圧縮作業が可能になります。

「EWWW Image Optimizer」遅延読み込みを実装する

遅延読み込みとは?

通常、Webサイトが表示される場合、そのWebサイトのページにある画像・動画・テキストなどのコンテンツは全て読み込まれ、その後にブラウザに表示されています。しかし、それではWebページを表示するまでにたくさんの時間がかかってしまいます。(画像・動画等が多いページだとなおさら、Webサイトの表示スピードは遅くなります。)
画像の遅延読み込みとは、画面をスクロールして画像の表示エリアに入るまで、非表示またはダミー画像を表示しておく機能のことです。遅延読み込みを実装することで、Webサイトの表示スピードを上げる効果があります。

このブログでもよく紹介するGoogleが提供しているPageSpeed Insights(ページスピードインサイツ)の結果によく出てくる「オフスクリーン画像の遅延読み込み」という項目は、この「遅延読み込み」を指します。

「EWWW Image Optimizer」での遅延読み込み手順

EWWW Image Optimizerでの遅延読み込み手順
設定のサブメニューからEWWW Image Optimizerをクリック
EWWW Image Optimizerでの遅延読み込み手順
イージーモードのタブをクリックする
EWWW Image Optimizerでの遅延読み込み手順
①遅延読み込みにチェックをいれる、②「変更を保存」ボタンをクリック

これも一ヶ所にチェックをつけるだけで、画像遅延読み込みが有効化されます。1つ注意点としては、「EWWW Image Optimizer」プラグイン以外を使って、画像遅延読み込みをしている場合は、そのプラグインを外しておきましょう。画像遅延読み込みの機能がバッティングし、作用しない可能性があるからです。

「EWWW Image Optimizer」で画像をWebP化する

WebPとは?

Googleが開発を進めている画像の規格のことで、画像のWebサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格です。ただし、Googleの競合各社の思惑もあり、ブラウザでの採用が進んでいないため、Webサイトでの採用は進んでいません。(Internet Explore・Safari等)

WebPのブラウザ対応状況
WebPのブラウザ対応状況(2020年5月3日現在)

リアルタイムでのブラウザの対応状況をお尻になりたい方は、下記リンク先に飛んでご確認ください。

「EWWW Image Optimizer」でのWebP化する手順

EWWW Image OptimizerでのWebP化手順
設定のサブメニューからEWWW Image Optimizerをクリック
EWWW Image OptimizerでのWebP化手順
続いて、WebPタブをクリックする
EWWW Image OptimizerでのWebP化手順
JPG、PNGからWebPにチェックをいれ、変更を保存する
EWWW Image OptimizerでのWebP化手順
①赤枠の部分が出現するので、「リライトルール」を挿入するボタンをクリックする。 ②その後、緑のWebPと表示される

右下の赤い「PNG」と表示されているところが、緑のWEBPと表示されていればWebP化は完了です。手順通りにWebP化しても、緑の表示にならない場合は、既存の遅延読み込みプラグイン等を一度解除してみてください。(Native Lazyloatedが原因でWebP化できないことがありました。)

この設定で、WebPに対応したブラウザでは、WebP規格の画像が表示されます。(対応していないブラウザでは、引き続き圧縮された画像が設定されるようになります。)非常に難しい処理を、「EWWW Image Optimizer」の一連の処理で実装可能にしてくれます。

まとめ

ということで、今回はWordPressのプラグインである「EWWW Image Optimizer」を使って、画像圧縮・遅延読み込み・WebPの3つの機能の使用・実装をしてみました。個別で設定・処理する必要はありますが、全て手順通りにすれば、難しくないはずです。もちろん、全て設定する必要性はなく、自分が必要な機能のみ実装すれば問題ありません。WordPressのプラグインでここまで機能的に活躍してくれる優れものはなかなかありませんので、この機会に導入してみてはいかがでしょうか?