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

サイトスピードを改善したい…
どうやったら、画像を全てWebPにできるの…

こんな悩み・疑問を持っていないでしょうか?

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

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

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

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

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

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

う?WebP(ウェッピー)ってなに?

というわけで本日は、

本日のテーマ
  1. WebP(ウェッピー)とは
  2. サイトスピードを調べる方法
  3. EWWW Image Optimizerの登録方法と使い方
  4. WebP(ウェッピー)に一括最適化する方法
  5. EWWW Image Optimizerによるオータニの成果

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

\\おすすめブログテーマ//

WebP(ウェッピー)とは

WebP(ウェッピー)

Googleが開発した次世代の画像フォーマット

世の中には、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(ウェッピー)に対応しているブラウザ

WebP(ウェッピー)とSafari

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

日本のスマホユーザーの60%がiPhoneユーザーなので、これは非常に深刻ですよね。。。

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

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

サイトスピードを調べる

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

結論:PageSpeed Insightsを使う

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

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

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

PageSpeed Insightsの指標
  • 0~49=悪い
  • 50~89=良い
  • 90~100=かなり良い

改善できる項目

改善できる項目の画像

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

その中の、「次世代フォーマットでの画像を配信という項目があるのですが、

これはサイトに添付してある画像の容量が大きいために表示される項目です。

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

EWWW Image Optimizerとは

EWWW Image Optimizerの画像
EWWW Image Optimizer

質を落とすことなく、画像を圧縮してくれるプラグイン

EWWW Image Optimizerのメリット

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

EWWW Image Optimizerのメリット
  1. サイト内の画像容量を一括で圧縮
  2. 自動で、追加した画像容量を圧縮

もちろん、上記2つはメインの機能で、

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

EWWW Image Optimizerさえれば、サイトの画像容量に関する悩みは全て解決します!

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

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

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

インストール手順

WordPressの編集画面>プラグイン>新規追加>検索窓に「EWWW Image Optimizer」と検索>今すぐインストール有効

EWWW Image Optimizerの設定

EWWW Image Optimizerの設定画面

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

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

設定画面へいく

WordPressの編集画面>設定>EWWW Image Optimizer

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

設定項目

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

設定項目
  • 基本
  • 変換

基本

EWWW Image Optimizerの基本設定

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

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

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

変換

EWWW Image Optimizerの変換設定

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

ここにチェックが入っていないと、サイト管理者(あなた)以外のユーザーが、

たとえば、「JPEG→PNG」や「PNG→JPEG」と変換するためのリンクが表示されてしまいます。

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

以上で、EWWW Image Optimizerの基本的な設定は終わりになります!

EWWW Image Optimizerの使い方

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

EWWW Image Optimizerの使い方
  1. 追加する画像の圧縮
  2. サイト内の画像一括圧縮

使い方1:追加する画像の圧縮

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

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

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

使い方2:サイト内の画像を一括圧縮

画像の一括圧縮の画像

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

画像を一括で圧縮する手順

WordPressの編集画面>メディア>一括最適化

一括最適化の画像

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

すると、画面が切り替わって〇〇点の画像を最適化というボタンが出現しますので、

それをクリックすれば、サイト内に存在する全ての画像が圧縮されます。

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

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

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

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

手順1:設定

EWWW Image Optimizerの設定画面

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

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

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

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

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

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

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

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

(意味が分からなかったら知る必要なし!)

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

手順3:最適化する

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

画像を一括で圧縮する手順

WordPressの編集画面>メディア>一括最適化

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

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

一括最適化のメニュー

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

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

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

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

手順1:Firefoxをインストール

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

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

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

手順2:サイトを開く

Firefoxののgががz画像画像

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

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

(MacBookの方は、「Command+option+I」でショートカットできます)

開発ツールまでの手順

ツール>ウェブ開発>開発ツールを表示

手順3:画像ファイルを確認する

開発ツールの画像
画像ファイルを調べる手順

ネットワーク>画像>タイプ(WebPになっていたらOK)

補足

開発ツールの画像

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

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

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

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

成果1:改善できる項目

改善できる項目の画像

改善できる項目の画像

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

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

成果2:弊社サイトのスコア

圧縮前のスコア

圧縮後のスコア

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

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

ブログでお金を稼ぎたい

文章をどうやって書いたらいいのか分からない…
ブログへのアクセスが集まらない…
ブログからコンサルを取れない…
ブログを習慣にできない…

こんな悩みを抱えていないでしょうか?

正直、GoogleやYouTubeなどを使って、ブログの知識を得て、挑戦するにもアリだとは思います。

ただ、当たり前の話ですが、そのような独学による学習では、それなりの時間がかかるということは否定できません。

だから、しっかりコーチの指導を受けて、サイト運営をすることが必要となります。

あなたもブロプロになろう!

ブロプロとは、ブログでお金が稼げるプロになるというコンセプトの個別プログラムです。

心理学をベースにしたマンツーマンサポートなので、成果にコミットしやすいプログラムとなっています。

もしも、「ブログでお金を稼げるようになりたい!」という方は、下記の記事を参考にしてください。

ブロプロ

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

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

本日は、

本日のテーマ
  1. WebP(ウェッピー)とは
  2. サイトスピードを調べる方法
  3. EWWW Image Optimizerの登録方法と使い方
  4. WebP(ウェッピー)に一括最適化する方法
  5. EWWW Image Optimizerによるオータニの成果

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

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

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

シェア嬉しい!