EWWW Image Optimizerの設定・使い方｜サイトスピードを改善する最強プラグイン

結論、サイトスピードは、SEO（検索エンジン最適化）において非常に大切です。

なぜなら、サイトスピードは、ユーザビリティと密接な関係があるからです。

たとえば、あるサイトにアクセスしても、ダウンロードするのに時間がかかったら、「なげーよ!!!」とイライラしますよね？

このように、サイトスピードが長いと、それだけユーザーにストレスを与えてしまうことになるので、検索エンジンは、そのサイトの記事のランキングを下げようとするのです。

では、どうすれば、サイトスピードを上げることができるのでしょうか？

結論、サイト内の画像フォーマットをWebP（ウェッピー）に変換しましょう！

というわけで本日は、

というテーマでブログを執筆していこうと思います。

オータニが使うおすすめテーマ

WebP（ウェッピー）とは

世の中には、JPEGやPNG、GIFなど様々な画像フォーマットが存在しますが、WebP（ウェッピー）は、非常に軽量化された画像フォーマットになります。

つまり、サイトスピードを上げることに貢献してくれる画像フォーマットなのです。

WebP（ウェッピー）は最強！

WebP（ウェッピー）に変換することで、JPEGだと24~35%、PNGだと26%も容量を小さくすることができます。

参照：https://developers.google.com/speed/webp/

つまり、WebP（ウェッピー）に変換することで、ダウンロードにかかる時間を省くことができるので、ユーザビリティが向上するというわけです。

WebP（ウェッピー）とブラウザの関係

WebP（ウェッピー）は、JPEGやPNGなどと比べると、比較的新しいフォーマットであったため、対応しているブラウザがあまり多くありませんでした。

※ブラウザ＝Chrom、Safari、Firefoxなど

つまり、ユーザーがWebP（ウェッピー）に対応していないブラウザでサイトを閲覧した場合、画像を見ることができなかったのです。

しかし、データによると、昨今ではWebP（ウェッピー）に対応したブラウザがどんどん増えているようです。

（世界のブラウザの78%がWebPに対応しているらしい）

WebP（ウェッピー）とSafari

実は、今までSafari（iPhoneのデフォルトブラウザ）は、WebP（ウェッピー）に対応していないという状況でした。

しかし、2020年にSafariが、WebP（ウェッピー）をサポートしたことにより、多くのサイト運営者がWebP（ウェッピー）に変換するようになったのです。

つまり、今までサイト運営者は、JPEGやPNGではなく、WebP（ウェッピー）を使いたかったけど、Safariが対応していないために、使えなかったんですよね。

サイトスピードを調べる

しかし、どうやってサイトスピードを調べればいいのでしょうか？

結論：PageSpeed Insightsを使う

使い方は非常に簡単です。

まずは、検索窓にサイトのURLを入力しましょう。

すると、サイトスピードが0~100で表示されます。

改善できる項目

サイトスピードを表示してから、画面を下にスクロールすると、「改善できる項目」という項目が表示されます。

その中の、「次世代フォーマットでの画像を配信」という項目があるのですが、これはサイトに添付してある画像の容量が大きいために表示される項目です。

なので、サイト内のJPEG、PNG画像をWebP（ウェッピー）に変換して、すぐに改善しましょう。

EWWW Image Optimizerとは

EWWW Image Optimizerのメリット

EWWW Image Optimizerには、下記の２つのメリットがあります。

サイト内の画像を一括でWebP（ウェッピー）にしてくれたり、追加した画像を自動でWebP（ウェッピー）に変換してくれる機能も搭載されてあります。

EWWW Image Optimizerをインストールする

インストール方法は、かなり簡単です。

この記事を読んでいる人は、WordPress初心者ではないハズなので、簡単に下に記しておきますね。

EWWW Image Optimizerの設定

では、インストールし終わったら、初期設定していきましょう。

設定画面へは、下記の手順でいきます。

すると、上記のような画面に移ります。

設定項目

結論、設定する項目は２つだけです。

基本

「メタデータを削除」という項目にチェックを入れておきましょう。

ここにチェックが入っていると、画像に含まれるメタデータ（日時、ファイルタイプ、ファイルサイズなど）を削ぎ落として、容量を小さくしてくれます。

サイトで画像を使う際は、メタデータは必要ありませんので、ここにはチェックを入れておきましょう。

変換

変換リンクを非表示という項目にチェックを入れておきましょう。

ここにチェックが入っていないと、サイト管理者（あなた）以外のユーザーが、「JPEG→PNG」や「PNG→JPEG」と変換するためのリンクを閲覧できてしまいます。

なので、ここはチェックを入れておくことをオススメします。

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方は下記の２つです。

使い方１：追加する画像の圧縮

これについては基本的に何もする必要はありません。

と言うのも、画像をサイトに追加する時に、自動的に画像を圧縮してくれるからです。

なので、EWWW Image Optimizerを有効にしていれば問題ありません。

使い方２：サイト内の画像を一括圧縮

サイト内の画像の一括圧縮は下記の手順で行います。

すると、最適化されていない画像をスキャンするというボタンが出現しますので、それをクリックします。

すると、画面が切り替わって〇〇点の画像を最適化というボタンが出現しますので、それをクリックすれば、サイト内に存在する全ての画像が圧縮されます。

※画像の数にもよりますが、最適化には時間がかかります

EWWW Image Optimizerでサイトスピードを改善する

ここまでは、「画像のサイズを小さくする方法」について解説してきました。

では、ここからは本題に入りまして、「画像ファイルをWebP（ウェッピー）に変換する方法」について解説していこうと思います。

手順１：設定

では、もう一度EWWW Image Optimizerの設定画面に移り、WebP変換という項目にチェックを入れましょう。

ここにチェックが入っていると、

WebP（ウェッピー）に対応したブラウザでは、画像をWebP（ウェッピー）で提供し、対応していないブラウザでは元の画像を提供してくれるようになります。

ここにチェックを入れたら、一旦「変更を保存」してください。

手順２：.htaccessファイルにコードを挿入する

すると、設定画面の下にコードが自動生成されます。

ここで、コード下にあるリライトルールを挿入するをクリックします。

すると、.htaccessファイルに自動で上記コードが挿入されます。

（意味が分からなかったら知る必要なし！）

※リライトルールを挿入するをクリックすると右下の赤文字で「PNG」が緑色で「WebP」となります。これはブラウザとサイトがWebP（ウェッピー）に対応済みということです

手順３：最適化する

１〜２の手順が全て終わったら、前述した一括最適化の作業を改めて行いましょう。

もしも、改めて最適化する際は、右のメニューのWebPのみという箇所にチェックを入れるようにしましょう。

まだ圧縮をしていない場合は、チェックを入れなくても大丈夫です。

※画像の数にもよりますが、最適化には時間がかかります

WebP（ウェッピー）で配信されているかを確認しよう

最後は、サイト内の画像が全てWebP（ウェッピー）になっているかを確認しましょう。

※不具合でJPEG、PNGのままなんてこともありますので、必ずチェクするように

手順１：Firefoxをインストール

画像ファイルを調べる時は、Firefox（ブラウザ）を使いましょう。

というのも、非常に確認しやすいからです。

なので、まずはFirefoxをインストールしてください。

手順２：サイトを開く

Firefoxで、自分のサイトを開きましょう。

そして、下記の手順で「開発ツール」まで進んでください。

（MacBookの方は、「Command＋option＋I」でショートカットできます）

手順３：画像ファイルを確認する

補足

もしも、情報が出てこないようであれば、再読み込みをクリックしましょう。

すると、上記のような情報がズラズラと出現します。

疑問：サイトスピードは改善できたのか

では、ここまでやったオータニのサイトの成果をご覧ください。

成果１：改善できる項目

▼▼▼▼▼▼

見てもらえば分かる通り、「次世代のフォーマットでの画像の配信」がすっかり消えていますよね？

つまり、JPEGなどの画像ファイルが、しっかりWebP（ウェッピー）に変換されたということですね。

成果２：弊社サイトのスコア

▼▼▼▼▼▼

見てもらえば分かる通り、スコアを14も伸ばすことに成功しました。

それだけ、画像がサイト全体を圧迫していたということが言えますね。

まとめ：サイトスピードを改善する方法

では最後にまとめましょう。

本日は、

というテーマでブログを執筆しました。

画像ファイルは、サイトスピードを低下させる大きな要因だということが分かりますね。

画像ファイルの圧縮は誰でも！簡単に！できることなので、この記事を見ながら、ぜひサイトスピードをあげていきましょう！