テクニカルSEO

EWWW Image Optimizer の設定方法と使い方

ページスピード改善につながる「EWWW Image Optimizer」の使い方・設定方法

ページスピードインサイトで「次世代フォーマットでの画像の配信」を改善するよう指摘されていませんか?
WordPressサイトにアップしている画像の形式を変換して、ページスピードスコアを改善するためのプラグインが「EWWW Image Optimizer」です。

この記事では、WordPressサイトをご利用の方向けに、プラグイン「EWWW Image Optimizer」を導入・設定して、「次世代フォーマットでの画像の配信」の項目を改善する手順をご紹介いたします。

画像を最適化してページスピードを改善し、離脱率改善やSEOの効果向上につなげていきましょう。

ページスピードインサイトで指摘される「次世代フォーマットでの画像の配信」

まずは、Googleのページスピードインサイト(PageSpeed Insights)で、現状のページスピードスコアを計測してみました。
スマホ:76点、PC:98点という結果でした。

比較的良好な数値ですが、できればスマホのスコアをもう少し改善しておきたいと思います。

ちなみに、ページスピードスコアの計測には「GTmetrix」などのサイトもあります。


「改善できる項目」に挙がっているのは、「次世代フォーマットでの画像の配信」のほか、「適切なサイズの画像」「効率的な画像フォーマット」と画像に関するものが改善優先順位の上位を占めています。

ページスピード(読み込み速度)が遅くなる原因の一つとして、「画像のデータ容量」があります。
画像はデータ容量が大きくなりがちです。

特に、スマホやカメラで撮影した写真をそのままWordPressにたくさんアップしている方はご注意ください。
そのままアップすると、解像度・サイズが非常に大きいので、後々、ページを表示するのに毎回何秒もかかるような、非常に重たいサイトになります。

そういうサイトは、どんなに良いコンテンツを発信していても、ユーザーは内容をよく読み込んだり回遊する前にイライラして離脱してしまいます。
せっかく良いコンテンツを更新しているのに、もったいないです。

アップする前に都度編集するのはお手間かと思いますが、画像がたくさん溜まってから改善する方が非常に手間となりますし、改善をしないままだと長期的に損失を生んでいることになります。

ページスピードが収益やSEOに与える影響については、以下の記事をご覧いただけましたら幸いです。

ページスピードインサイトをもとにサイトスピードを改善する方法リンクをクリックしてから、ページが読み込まれ表示されるまでの時間が長くなりすぎていませんか? 「読み込みが遅い、サイトが重たい」と...

画像の最適化・ページスピード対策は、最初から行っておくことが肝心です。

プラグイン「EWWW Image Optimizer」でWebPに変換する

EWWW Image Optimizerインストール・基本設定

WordPress管理画面の左メニュー「プラグイン」→「新規追加」→「EWWW Image Optimizer」を検索→「今すぐインストール」→「有効化」をクリックしていただくと、プラグインがインストール・有効化されます。

WordPress管理画面の左メニュー「設定」→「EWWW Image Optimizer」→タブ「Basic」→「Remove Metadata」にチェックが入っていることを確認します。
ここにチェックが入っていることで、EXIF情報など、画像の見栄えに関係のない余計なメタデータを削除してくれます。

タブ「Convert」→「コンバージョンリンクを非表示」にチェックを入れます。

これによって、画像が「jpg」→「png」や「png」→「jpg」など、自動的に変換されることを防ぎます。
jpgの方が最適な画像もあれば、pngが最適な画像もあるため、勝手に変換されないようチェックを入れておきます。

WebP変換設定

タブ「WebP」→「JPG, PNG から WebP」にチェック→画面下の「変更を保存」をクリックします。

WebPとは?
データの軽量化とページスピードアップを意図してGoogleによって開発された、新しい画像形式・規格です。

.htaccessファイルにリライトルールを追記

そうすると、下の方に.htaccessファイルに記述するソースと「リライトルールを挿入する」というボタンが出現します。
「BackWPup」などで事前にバックアップを取った上で、この「リライトルールを挿入する」ボタンをクリックします。
そうすると、サーバー上の.htaccessファイルにこの記述が挿入されます。

場合によっては、正常に挿入されないことがあるようなのですが、私は問題なく挿入されたようでした。
不具合が起きないように、手動で.htaccessファイルへの追記を推奨なさっている方もいます。

バックアップを取っておけば、「リライトルールを挿入する」ボタンを押していただき問題ないと思いますが、ご自身の責任において行っていただくようお願いいたします。

「リライトルールを挿入する」ボタンをクリックすると、以下のように右下の表示が「PNG(赤)→WEBP(緑)」に変わりました。

ここで、PNG(赤)→WEBP(緑)に変わらない場合は、キャッシュを削除して再読込してみましょう。
「Chrome キャッシュ 削除」などでGoogleで検索していただくと手順が出てくるかと思います。

あるいは、WindowsでChrome、FireFox、InternetExplorerなどをお使いの方は、Ctrl+F5キーを同時に押すと、スーパーリロード(ブラウザのキャッシュを無視して再読込)されます。
MacでChrome、Safariなどをお使いの方は、Command+Rキー同時押しのようです。

画像を一括最適化

WebP変換のための設定は完了しました。
次に、既存の画像ファイルの最適化(ここではWebP変換)についてです。

WordPress管理画面の左メニュー「メディア」→「一括最適化」→「最適化されていない画像をスキャンする」をクリックします。

「最適化を開始」をクリックします。

すると、このように自動一括最適化が始まります。
しばらくすると、完了します。

WordPress管理画面の左メニュー「メディア」で一覧を見ると、各画像が少しずつ圧縮されたという表示が確認できます。

WebPで配信されていることを確認

画像がWebPで配信されていることを確認するには、Chromeで当該ページを表示し、「F12キー」→「Network」→「img」をクリックします。
Type欄に「webp」と表示されている画像はWebPで配信されています。

画像最適化の成果:ページスピードスコアの変化

上記を行ったのち、再度ページスピードスコアを計測してみました。

もともと画像はできるだけ必要最小限のサイズでアップしたり、画像最適化は気をつけていたためか、あまり劇的に変わらなかったです。

スマホ:76点→78点、PC:98点→100点という結果となりました。

「改善できる項目」から、「次世代フォーマットでの画像の配信」がなくなりました。

ご依頼いただいて、お客様のWebサイトのページスピード改善を行うこともありますが、改善前が50点~60点くらいなら、画像を最適化することで、10点くらいアップすることもあります。

あとは、「レンダリングを妨げるリソースの除外」「オフスクリーン画像の遅延読み込み」など、他の改善項目をクリアすることで90点以上を実現できます。

これらの対応方法についても、おって投稿させていただきます。

まとめ

ページスピードは、検索順位や離脱率、コンバージョン率などに影響し、最終的に収益に影響します。

ページスピードインサイトスコアについては、必ずしも100点を目指す必要はありませんが、ページスピードは速いに越したことはありません。

内部の技術的なSEO(テクニカルSEO)の一環なので、Webエンジニアでない方は、対応が難しく感じられるかもしれません。

技術的な知識がなくても、今回のようにプラグインを利用して比較的楽にできる対応もあります。
ぜひ実践なさってみていただけたら幸いです。

その他のページスピード改善方法については、以下の記事をご参照ください。

ページスピード高速化に関する記事一覧

ページスピードインサイトをもとにサイトスピードを改善する方法リンクをクリックしてから、ページが読み込まれ表示されるまでの時間が長くなりすぎていませんか? 「読み込みが遅い、サイトが重たい」と...
ABOUT ME
渡部 瞬
一人ビジネス戦略家&Webコンサルタント。得意分野は、テクニカルSEO。 「1ヵ月後に月間PV数1.7倍、2ヵ月後に月間PV数2.3倍」や「7ヵ月後に月間オーガニック流入数 100万件超、前年比507%」など改善実績・事例多数です。 個人起業家から上場企業まで、7年間で180以上のWebマーケティング、Webサイト改善に携わり事業成長を支援しています。 エンジニア・デザイナー・クリエイター、コーチ・コンサルタントなど、労働集約型ビジネスの一人社長・複業家・フリーランス・副業サラリーマンの方向けに、一人ビジネス専門メディア『ナノ経営』を運営。 一人ブラック企業状態を脱却し、週3日稼働で高収益な一人ホワイト企業に転換するための情報を発信しています。 お問い合わせフォームはこちら »
現状分析・課題抽出のためのSEO診断

●対応内容:
サイトの現状調査・分析により、順位上昇・SEO対策の効果を高めるための改善点・課題点抽出を行います。

●成果物:
Word数ページにて、チェック項目・改善点を一式ご報告させていただきます。

※箇条書き、テキストベースのシンプルな体裁とさせていただいておりますが、ご了承いただけましたら幸いです。

※調査結果とあわせてご参考までに、改善・改修作業を弊社で対応させていただく場合のお見積もりをお送りさせていただきます。

※改善・改修作業をこちらで対応させて頂く場合は、調査料金3万円をお見積もりから差し引かせて頂きます。

●所要期間:
お振り込み頂き着手してから、1週間以内に調査結果をお送りさせていただきます。

【特典】
Googleデータポータル(旧Googleデータスタジオ)を活用し、アナリティクスやサーチコンソールの各種データを連携して作成した10ページ前後のアクセス解析オンラインレポートをご提供します。

アナリティクスよりもアクセスの推移やコンバージョン数(申込数、成約数)などの成果が見やすくなります。
Googleデータポータルの仕様が変わらなければ、無料でずっと使えます。

毎日自動でデータが反映され、日々の指標確認、アクセス分析、スピーディーな打ち手検討、モチベーション維持などにご活用いただけます。

【料金】
現状分析・課題抽出のためのSEO診断 一式 30,000円(税別)

SEO診断に申し込む »