EWWWの次世代フォーマット画像WebP変換で表示速度をアップ!

  • URLをコピーしました!
※本サイトはアフィリエイト広告を利用しています。
はてなちゃん

PageSpeed Insightsでページ表示速度を測ると、「次世代フォーマットでの画像」にしろと指示されるんだけど、どうして良いか分かりません。

ザッキー

一つの解決方法がここで紹介するWecPへの変換だよ

PageSpeed Insightsでページ表示速度を測ると、下画像のように改善できる項目として「次世代フォーマットでの画像の配信」が表示される場合があります。

筆者もこれに悩まされ、対策に困っていました。

が、EWWW Image OptimizerでWebP変換することで、ページ表示速度を上げることができましたので、解説します。

目次 タップで飛べます!

WebPに変換する手順

STEP
EWWW Image Optimizer

プラグインEWWWをインストールして有効化します。

  1. WordPressにログインし、サイドバーの「プラグイン」を押します。
  2. 「新規追加」を押します。
  3. EWWWをキーワード爛(検索窓)に入れます。
  4. 「今すぐインストール」を押し、「有効」ボタンを押します。
STEP
WebPへの変換を設定

「WebP変換」にチェックを入れて「変更を保存」

STEP
サーバーの.htaccess欄にコードをコピペ

コードをサーバーの.htaccess欄にコピペします。

STEP
EWWWに戻って画像スキャン

スキャンした画像を一括変換します。

次世代フォーマットWebPとは?

次世代画像フォーマットとは従来のPNGやJPEGより圧縮率の高い新しい画像フォーマットのことで、そのなかの1つに「WebP(ウェッピー)」があります。

今回はそのWebPによる対策です。

WebPとはGoogleが開発する表示速度を短縮させる静止画フォーマットです。

ただしWebPは読み込めるブラウザが限定的です。「Edge」「Firefox」「Chrome」などのブラウザは対応していますが、「Safari」や「iOS Safari」は対応していません。Androidでは古いバージョンでなければ問題なく使うことができるようです。

筆者の場合はSafariやiOS Safariでも大丈夫ですが、念のため。 Safariをご利用の方、このページ大丈夫ですか?

EWWW Image Optimizerの設定

STEP
設定」>「EWWW Image Optimizer

画像を次世代フォーマットWebPにするには、プラグイン「EWWW Image Optimizer」を使います。

WordPress管理画面のサイドバーメニューから、「設定」→「EWWW Image Optimizer」→「基本」の順に進みます。

STEP
「JPGからWebPへの変換〜」にチェック

「WebP変換」の部分のチェックボックスにチェックを入れ、「変更を保存」ボタンを押下します。

STEP
「リサイズ」項目を設定

「リサイズ」ボタンを押し、「既存の画像をリサイズ」と「他の画像をリサイズ」にチェックを入れ、「変更を保存」ボタンを押します。

サーバー側の設定

XSERVER の場合

次にサーバーの管理パネルにログインします。

ここではまず、エックスサーバーを例に説明します。次にConoHaWingの場合を説明します。

STEP
ログイン

サーバーパネルにログインします。

STEP
.htaccess編集

サーバーパネルから「.htaccess編集」を押します。

STEP
選択

ドメインの中から対象のドメインを探し、「選択する」を押します。

STEP

.htaccess編集」のタブを選択。

STEP
.htaccess欄上部に、下記のコードを舌画像のように貼り付けます。
「.htaccess」欄上部に、下記のコードを舌画像のように貼り付けます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+).(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
.htaccessにコードを貼り付ける
.htaccess欄に、このようにコードを貼り付ける。

必ず元の状態をメモ帳などに保存しておきましょう。

編集後はサイトが正常に表示されているかどうかを必ず確認し、異常が見つかったら元の状態にに戻せるようにします。

STEP
確認画面へ進む

「確認画面へ進む」ボタンを押下します。

STEP

実行する」を押します。

STEP
,htaccessの編集完了

「編集が完了」となったらOK。

STEP
WordPressのEWWW設定画面

WordPressのEWWW設定画面の戻り、「変更を保存」ボタンを押すと赤字の「PNG」が緑地の「WEBP」に変わります。それを確認したら完了です。

ConoHaWingの場合

STEP
管理画面にログイン

ConoHaWingの管理画面にログインし、「サイト管理」→「サイト設定」→「応用設定」と進む。

STEP
「.htaccess設定」を押す

「.htaccess設定」を押します。

STEP
EWWWのコードをコピペ

EWWWの下画像赤線内のコードをコピーし、ConoHaWingの赤線枠にペーストし、「保存」ボタンを押します。

次にWordPressのEWWWの設定画面に戻り、「設定を保存」ボタンを押します。

国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

STEP
グリーンに変わればOK

EWWWの「WEBP」の赤地の「PNG」が緑地の「WEBP」に変わりますので、それを確認したらOK、完了です。

画像を一括最適化をする

STEP
WordPressに戻る

WordPress管理画面のEWWWプラグインに戻ります。

STEP
一括最適化

「一括最適化」を押します。

STEP
最適化されていない画像をスキャンする

「最適化されていない画像をスキャンする」ボタンを押します。

STEP
完了

スキャン後、一括最適化を行います。以上で完了です。

国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

目次 タップで飛べます!