本日は、珍しく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の世界的シェアが１位で、攻撃しやすいからということもあります）。WordPressの一部である「プラグイン」にもセキュリティに気をつけなければいけません。プラグインを介して、サイトに侵入するものがあったり、プラグインがそもそもマルウェアであったりするケースがあるようです。
以上の点でデメリットにもなりうるプラグインですが、今回紹介するプラグインは、セキュリティ面でも安全性があり、１つで３役の機能がある導入をオススメできる１つです。
「EWWW Image Optimizer」で画像圧縮する
画像圧縮とは？
画像圧縮とは、画像の内蔵されている余分なデータを削除して、画像の容量を軽くすることです。画像の容量を下げることで、画像がWebサイトに表示されるスピードが早くなります。
圧縮する方法はたくさんあります。画像の規格によってはも方法が異なりますが、下記サイトが色々まとめってて良いかもしれません。
上記のように画像を圧縮したものを、今回紹介するWordPressプラグイン「EWWW Image Optimizer」でさらに圧縮して、Webサイトのスピードアップを望めます。
「EWWW Image Optimizer」での画像圧縮手順
簡単ですね。WordPressのメディアに入っている画像の多さにによっては、圧縮にかなり時間がかかります。また、今後の圧縮については、メディアに画像をアップロードした時に自動的に圧縮されますので、時間がかかるのはプラグインを導入してからの一度だけなので、かなりお手軽に圧縮作業が可能になります。
「EWWW Image Optimizer」遅延読み込みを実装する
遅延読み込みとは？
通常、Webサイトが表示される場合、そのWebサイトのページにある画像・動画・テキストなどのコンテンツは全て読み込まれ、その後にブラウザに表示されています。しかし、それではWebページを表示するまでにたくさんの時間がかかってしまいます。（画像・動画等が多いページだとなおさら、Webサイトの表示スピードは遅くなります。）
画像の遅延読み込みとは、画面をスクロールして画像の表示エリアに入るまで、非表示またはダミー画像を表示しておく機能のことです。遅延読み込みを実装することで、Webサイトの表示スピードを上げる効果があります。
このブログでもよく紹介するGoogleが提供しているPageSpeed Insights（ページスピードインサイツ）の結果によく出てくる「オフスクリーン画像の遅延読み込み」という項目は、この「遅延読み込み」を指します。
「EWWW Image Optimizer」での遅延読み込み手順
これも一ヶ所にチェックをつけるだけで、画像遅延読み込みが有効化されます。１つ注意点としては、「EWWW Image Optimizer」プラグイン以外を使って、画像遅延読み込みをしている場合は、そのプラグインを外しておきましょう。画像遅延読み込みの機能がバッティングし、作用しない可能性があるからです。
「EWWW Image Optimizer」で画像をWebP化する
WebPとは？
Googleが開発を進めている画像の規格のことで、画像のWebサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格です。ただし、Googleの競合各社の思惑もあり、ブラウザでの採用が進んでいないため、Webサイトでの採用は進んでいません。（Internet Explore・Safari等）
リアルタイムでのブラウザの対応状況をお尻になりたい方は、下記リンク先に飛んでご確認ください。
「EWWW Image Optimizer」でのWebP化する手順
右下の赤い「PNG」と表示されているところが、緑のWEBPと表示されていればWebP化は完了です。手順通りにWebP化しても、緑の表示にならない場合は、既存の遅延読み込みプラグイン等を一度解除してみてください。（Native Lazyloatedが原因でWebP化できないことがありました。）
この設定で、WebPに対応したブラウザでは、WebP規格の画像が表示されます。（対応していないブラウザでは、引き続き圧縮された画像が設定されるようになります。）非常に難しい処理を、「EWWW Image Optimizer」の一連の処理で実装可能にしてくれます。
まとめ
ということで、今回はWordPressのプラグインである「EWWW Image Optimizer」を使って、画像圧縮・遅延読み込み・WebPの３つの機能の使用・実装をしてみました。個別で設定・処理する必要はありますが、全て手順通りにすれば、難しくないはずです。もちろん、全て設定する必要性はなく、自分が必要な機能のみ実装すれば問題ありません。WordPressのプラグインでここまで機能的に活躍してくれる優れものはなかなかありませんので、この機会に導入してみてはいかがでしょうか？
