SEO対策 PR

【WebP対応】EWWW Image Optimizerの設定方法と基本的な使い方を徹底解説!

EWWW Image Optimizerの設定方法と基本的な使い方
記事内に商品プロモーションを含む場合があります

こんにちは、YUKARIです!

  • 画像の管理が大変…
  • 前よりサイト表示に時間がかかっている気がする!

WordPressで記事の更新が進んでくると、管理する画像の量も増え、どうしてもサイトが重たくなってきちゃいますよね。

コンテンツが増えるのは嬉しい反面、

画像ファイルが増えるほど、サイトの表示速度が落ちてしまうというデメリットもあります。

そして、サイトの表示速度が遅いと、ユーザビリティが下がり離脱率の上昇につながることも…。

そこで利用したいのが、今回紹介するプラグイン「EWWW Image Optimizer」。

手軽に画像を圧縮してくれる優れモノなんです!

この記事を読むとわかること
  • EWWW Image Optimizerの初期設定が完了する
  • EWWW Image Optimizeの使い方がわかる

EWWW Image Optimizerでできることは?

画像の圧縮でページの表示速度が上がる

「EWWW Image Optimizer」は、画像を圧縮して表示速度を高速化できるWordPressのプラグインです。

インストールしておくだけで、新しい画像のアップロード時に自動でサイズを圧縮してくれるだけでなく、

すでにアップロード済みの画像も一括で圧縮できる機能があるため、大変便利です。

表示速度改善でSEO対策になる

サイトの表示速度を改善し、ユーザーにとっての「使いやすさ」であるユーザビリティが向上すると、SEOにも効果的です。

実際、Googleは「ページの読み込み速度をモバイル検索のランキング要素として使用する」スピードアップデートを2018年に完了させています。

検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。研究によると、ユーザーはページの読み込み速度を非常に気にかけています。これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。

Google検索セントラル-ページの読み込み速度をモバイル検索のランキング要素に使用します

 

さらに、2021年6月から適用されたSEOの新評価基準「コアウェブバイタル」のLCP(Largest Contentful Paint)という指標でも、

ページの表示速度のパフォーマンスを重視していることがわかります。

「LCP」…ページ内における最も大きなビジュアルコンテンツが表示されるまでの時間を評価する指標。読み込み開始から2.5秒未満であることが理想的。

ちょっと難しい話になってしまっていたら申し訳ないのですが、

結論、EWWW Image Optimizerを使って画像を軽量化し、ページの読み込みスピードが速くなることで、

ユーザビリティとSEO両方のパフォーマンス改善が期待できるということですね!

むぎちゃん
むぎちゃん
つまり一石二鳥〜!

EWWW Image Optimizerのインストール方法

では、さっそくインストールしていきましょう。

まずはWordPressの管理画面にあるサイドメニューから「プラグイン>新規追加」をクリック。

右上の検索窓に「EWWW Image Optimizer」と入力すると、該当のプラグインがヒットします。

「今すぐインストール」をクリックし、有効化ボタンに切り替わったらクリックしましょう。

EWWW Image Optimizerのインストール

これでインストールは完了です!

EWWW Image Optimizerの初期設定

つづいてサクッと初期設定をしておきましょう。

この初期設定を済ませておくことで、より画像サイズの低下につながりますよ!

インストール後に一度だけやる初期設定

まずはWordPressの管理画面にあるサイドメニューから「設定>EWWW Image Optimizerをクリック。

設定メニューからEWWW Image Optimizerを選択

すると、以下の画面に切り替わります。

EWWW Image Optimizerの初期設定

①「サイトの高速化」にチェック
②「今は無料モードのままにする」にチェック

そして「次」ボタンを押しましょう。

①幅と高さの上限を0にする
②「設定を保存」をクリック

ほかはそのままでOKです!念のためチェックを入れた項目について簡単に説明しておきます。

メタデータを削除…撮影場所や日時など、画像に記録されたデータを削除することにより、画像の軽量化を図る。

遅延読み込み…遅延、とあるがネガティブな意味ではない。「ページ表示の高速化」につながる。

WebP変換…Googleが推奨する次世代フォーマット。画像がとにかく軽くなる。

画面が切り替わりますので、「完了」ボタンを押してください。

 

EWWW Image Optimizerの初期設定完了ボタン

変換リンクを非表示に設定

もう一度、管理画面のサイドメニューから「設定>EWWW Image Optimizer」へと進み、「Enable Ludicrous Mode」をクリックしてください。

隠れていたタブが開き、スムーズに設定を進められます。

EWWW Image Optimizerの設定

変換タブをクリックすると、以下の画面に切り替わります。

ここで「変換リンクを非表示」にチェックを入れ、「変更を保存」をクリックすれば設定完了です!

このように「変換リンクを非表示」にチェックを入れておくと、勝手に画像の拡張子が変更されてしまうのを防げます。

拡張子とは、「.jpg」や「.png」などのファイル形式のこと。

勝手に変更が加わると画質が下がる原因となるので、忘れずにチェックを入れておきましょうね!

WebP(ウェッピー)変換の設定

つづいて、画像をWebP形式に変換するための設定を行います。

WebP…GoogleがWEBサイトの表示速度短縮を目的として開発した画像フォーマット。

従来のフォーマットであるJPEGやPNGと比べてファイルサイズを削減できると言われている。

EWWW Image Optimizerでは、画像を自動的にWebPに変換した上で、表示するブラウザに合わせての画像変換が可能になります。

なお、EWWW Image OptimizerでWebP変換を行う場合、ご自身のサーバーの管理画面で「.htaccess設定」を行う必要があります。

 

手順としては、まず基本タブの「WebP変換」にチェックが入っているかを確認します。

入っていなかった場合には✔︎を入れて「変更を保存」しましょう。

 

すると、「WebPの配信方法」に、以下のようなコードが表示されます。

このコードをコピーして、あなたがお使いのサーバー管理画面から「.htaccess」の冒頭にコードを追加します。

「.htaccessの設定方法がわからない」という方は、お使いのサーバーの公式マニュアルで確認してみることをおすすめします。

たとえば、エックスサーバーでは、設定方法を画像付きでわかりやすく解説しています。

お困りの方は、下記を参考にしてみてくださいね。

Xserverマニュアル-.htaccess

EWWW Image Optimizerの基本的な使い方2つ

「EWWW Image Optimizer」の使い方は、以下の2つです。

  1. 新規アップロードの画像を圧縮
  2. 既存の画像を一括最適化

1.新規アップロードの画像を圧縮

「EWWW Image Optimizer」は、インストールするだけで、新規追加したメディアを全て自動で圧縮してくれます。

実際にどれだけ圧縮できたのかは、WordPressの管理メニュー「メディア」からライブラリ一覧で確認できますよー!

画像圧縮後

上記の画像では、68.9KBの圧縮に成功したことがわかります!

2.既存の画像を一括最適化

EWWW Image Optimizerでは、すでにアップロード済みの画像をまとめて圧縮することもできます。

WordPress管理画面のサイドメニューより「メディア>一括最適化」をクリック。

一括最適化の画面に遷移するので、「最適化されていない画像をスキャンする」を選択し、

「〇〇点の画像を最適化」をクリックすれば、最適化作業が始まります。

一括最適化が完了すると、画面上部に「完了」と表示されます。

たくさんの画像があると数時間とか平気でかかるので、時間があるときにやるのがオススメです!

むぎちゃん
むぎちゃん
コーヒーブレイクはどう?

まとめ:「EWWW Image Optimizer」を利用してサイト表示を高速化しよう

インストールするだけで、画像を圧縮してサイト表示を高速化できるプラグイン「EWWW Image Optimizer」について解説しました!

画像を軽量化し、ページの読み込みスピードが速くなることで、

ユーザーはサイトを使うのが快適になり、SEOの効果も期待できます!

早いうちに済ませておくと、画像最適化の待ち時間も少なくて済みますので(笑)

「サイト速度を改善したい!」という方は、利用してみてくださいね。

最後までお読みいただきありがとうございました(^^)♪