そんな疑問にお答えします。
サイトの表示スピードが遅い原因のひとつに、アップロードした画像ファイルが大きいことが挙げられます。
サイトが表示されなければ、ユーザが離脱してしまいますし、SEOの点でも評価が下がってしまいます。
ですが、サムネイルや図解の説明など、コンテンツを作る上で画像は欠かせないので、省くことはできません。
そこで、そんなお悩みを解決してくれるのが、今回紹介するプラグイン「EWWW Image Optimizer」です。
「EWWW Image Optimizer」は、自動で画像サイズを圧縮し、サイトの表示スピードを改善することができます。
それでは、設定方法や使い方の紹介をしていきます。
EWWW Image Optimizerとは
「EWWW Image Optimizer」とは、画像サイズを圧縮してくれるプラグインです。
インストールすることで、WordPressにアップロードする画像を自動で圧縮してくれます。
インストールするだけで、あとは勝手に圧縮してくれるので、手間が一切かかりません。
また、すでにアップロードされている画像も一括で圧縮してくれる点も魅力的です。
画像一つ一つのサイズを小さくすることで、サイトの表示スピードが上がり、ユーザの離脱を防ぐことができます。
EWWW Image Optimizerの設定方法
それでは、プラグイン「EWWW Image Optimizer」の設定方法をご紹介します。
設定手順
- EWWW Image Optimizerをインストール・有効化する
- EWWW Image Optimizerの初期設定
- WebPの配信方法の設定
- 変換リンクを非表示にする
この4つの手順で設定することができます。
EWWW Image Optimizerをインストール・有効化する
まずはじめに、プラグインをインストールしていきます。
WordPress管理画面から
プラグイン > 新規追加
をクリックします。
右上の検索ボックスで「EWWW Image Optimizer」と入力します。
該当するプラグインを見つけたら、「今すぐインストール」をクリックします。
※似たようなプラグインに「EWWW Image Optimizer Cloud」がありますが、こちらはインストールしないように注意しましょう。
ココに注意
「EWWW Image Optimizer Cloud」は、「EWWW Image Optimizer」と開発元は同じで、画像圧縮できるプラグインです。サーバーへかかる負荷が少ない特徴がありますが、画像圧縮に要する時間が「EWWW Image Optimizer」より長いデメリットもあります。また、管理画面が全て英語表記なので、日本語表記で扱いやすい「EWWW Image Optimizer」を選ぶと良いでしょう。
インストールが終了したら、「有効化」をクリックします。
EWWW Image Optimizerの初期設定
続いて、「EWWW Image Optimizer」の初期設定をしていきます。
設定 > EWWW Image Optimizer
をクリックします。
こちらの画面では、
「サイトを高速化」「今は無料モードのままにする」
にチェックをつけ、「次へ」クリック。
続いて表示される画面では、初期設定のままでOKです。
「設定を保存」をクリックします。
これで、初期設定は完了です。
「完了」をクリックしましょう。
WebPの配信方法の設定
こちらが「EWWW Image Optimizer」の管理画面です。
基本的に初期設定のままでOKです。
その中で「WebPの配信方法」の項目があります。
WebP（ウェッピー）とは、「次世代画像フォーマット」のことで、Googleが開発している静止画のフォーマットのことです。
ポイント
WebP（ウェッピー）は、これまで主流であった「JPEG」や「PNG」よりもファイルサイズを小さいため、サイドスピードを上げることができます。
また、今までWebP（ウェッピー）形式の画像が対応しているブラウザが少なかったのですが、
今では、「Internet Explorer（IE）」以外のブラウザ「Google Chrome」、「Firefox」、「Edge」、「Safari」でWebP（ウェッピー）形式の画像が対応しているため、こちらの設定は必ず行いましょう。
WebP（ウェッピー）形式対応ブラウザ
- Google Chrome
- Firefox
- Edge
- Safari
それでは、設定方法です。
下記のコードを.htaccessに追加する形となります。
.htaccessを編集するには、レンタルサーバの管理画面に行く必要があります。
なので、今回は「ConoHa WING（コノハウイング）」と「Xserver（エックスサーバー）」の2つの設定方法をお伝えします。
ConoHa WING（コノハウイング）で「.htaccess」に追加する場合
「ConoHa WING（コノハウイング）」の管理画面へ移動します。
>> 「ConoHa WING（コノハウイング）」の管理画面へアクセスする
ログイン後、「サイト管理」をクリックします。
サイト設定 > 応用設定
をクリックします。
「.htaccess設定」をクリックします。
「編集」をクリックします。
こちらに先ほどのコピーしたコードを貼り付け、保存します。
注意ポイント
コピーしたコードをそのまま貼り付けましょう。一語でも抜けているとエラーになり、サイトが見れなくなる可能性があります。
これで、「.htaccess」の設定は完了です。
再び、WordPressの「EWWW Image Optimizer」の管理画面へ戻り、「変更を保存」をクリックします。
「PNG」と書かれた枠が赤色から緑色に変わると、無事設定が完了です。
Xserver（エックスサーバー）で「.htaccess」に追加する場合
続いて、「Xserver（エックスサーバー）」での設定です。
こちらも同様、管理画面へ移動します。
>> 「Xserver（エックスサーバー）」の管理画面へアクセスする
管理画面へログインしたら、「.htaccess編集」をクリックします。
該当するドメインを選択します。
続いて、「.htaccess編集」をクリックし、タブを切り替えます。
こちらも同様、先程コピーしたコードを貼り付けます。
注意ポイント
コピーしたコードをそのまま貼り付けましょう。一語でも抜けているとエラーになり、サイトが見れなくなる可能性があります。
コードを貼り付けたら、「確認画面へ進む」をクリックします。
確認画面に移動するので、問題なければ、「実行する」をクリックして完了です。
「PNG」と書かれた枠が赤色から緑色に変わると、無事設定が完了です。
変換リンクを非表示にする
「EWWW Image Optimizer」の管理画面にある「Enable Ludicrous Mode」をクリックします。
すると、詳細設定ができるモードに切り替わります。
続いて「変換」タブをクリックします。
「変換リンクを非表示」にチェックをつけ、保存しましょう。
「変換リンクを非表示」の設定をすることで、「jpg」→「png」のように勝手に拡張子が変換されるのを防ぎます。
拡張子が変換されると、画質が低下する恐れがあるので、必ず設定しましょう。
EWWW Image Optimizerの使い方
それでは、初期設定が完了したので、実際に画像を圧縮していきます。
「EWWW Image Optimizer」をインストールした段階で、これからアップロードする画像は自動で圧縮してくれます。
ですので、すでにアップロードしている画像を圧縮していきます。
このプラグインの便利な点は、一括で圧縮してくれます。
EWWW Image Optimizerで一括最適化（圧縮）する
メディア > 一括最適化
をクリックします。
「最適化されていない画像をスキャンする」をクリックします。
すると、最適化（圧縮）されていない画像数が出てきます。
「●●点の画像を最適化」をクリックします。
これで、自動で圧縮してくれるので、終わるまで待ちます。
注意ポイント
画像数が多いと圧縮が終わるまでに時間がかかるため、時間があるときに作業しましょう。
全ての最適化が終われば、作業完了です。
新規アップロードする画像は自動で最適化
「EWWW Image Optimizer」インストール後にアップロードした画像が自動で圧縮されます。
それでは、実際に「アップロードした画像が自動で圧縮されるのか」見ていきましょう。
画像ファイルをアップロードしていきます。
ひとつ画像ファイルを選択します。
すると、このように自動で圧縮されました。
はじめに一括最適化しておけば、あとは勝手に画像圧縮してくれるので、自分で圧縮する必要はありません。
画像圧縮でサイトの表示スピードはどのように変わる？
最後に、「EWWW Image Optimizer」インストール前後でサイトの表示スピードにどのような変化があるのか見ていきます。
今回、サイト表示スピードを計測するツールは、「PageSpeed Insights（ページスピードインサイト）」です。
「PageSpeed Insights（ページスピードインサイト）」は、計測したいページのURLを入力すると、自動で分析してくれるツールです。
SEOやWordPressの本でも必ず紹介されているほど、便利なツールとなります。
それでは、「EWWW Image Optimizer」導入前後でどのような変化があったのか見ていきます。
画像圧縮する前後でのPCの評価
それでは、PCの評価です。
画像数の多いこちらのページを対象に評価しています。
PCの評価
「適切な画像のサイズ」「次世代フォーマットでの画像の配信」の画像の項目が圧縮後に消えました。圧縮したことで、画像に関する改善がされたことになります。
画像圧縮する前後でのスマートフォンの評価
それでは、スマートフォンの評価です。
スマートフォンの評価
スマートフォンも同様に、「適切な画像のサイズ」「次世代フォーマットでの画像の配信」の画像の項目が圧縮後に消えました。圧縮したことで、画像に関する改善がされたことになります。
PC、スマホともに、インストールするだけでサイトスピードが改善されました。
まとめ サイトスピードを上げて、ユーザの離脱を防ぐ対策をしましょう。
今回は、「EWWW Image Optimizer」の設定方法をご紹介しました。
インストールするだけで、自動で画像サイズを圧縮し、サイトの表示スピードを改善することができます。
サイトの表示スピードが上がれば、ユーザの離脱を防げ、SEOの評価も上がります。
まだの方は、この機会に導入してみてはいかがでしょうか。
本日は、以上です。
↓ 他のプラグインはこちら
