サイト高速化。WebPで、次世代画像フォーマットを。画像系プラグイン EWWW

サイトの高速化を図ることは、サイトの集客上昇に結びつきます。

サイトが高速＝集客アップ（直帰率の改善）
という傾向にあります。

googleの公式サイトでも明言されています。

ページのパフォーマンスが重要な理由
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。

「広告」

googleの公式な速度チェックツール
次世代フォーマットとは・・・
WebPに自動的に変換してくれる、EWWW プラグイン
既存の画像データを最適化
WebPでの配信
WebPサーバー側設定
WebP画像の用意
過去の画像を一括で、webp生成（2021/01/21追記）
ブラウザで確認（2021/1/21修正）
画像を投稿する場合、WebP自動生成

googleの公式な速度チェックツール

PageSpeed Insights

にて、客観的な速度の測定と、アドバイスをしてくれます。

↑体感速度が遅いと、スコアが５０以下で、低評価となります。
画面の下の方にいくと、

↑次世代フォーマットでの画像の配信
という項目があります。

今回、この項目を改善するという試みです。

「広告」

次世代フォーマットとは・・・

画像フォーマットとしては、「jpeg（jpg）」「png」「gif」が有名ですが、最近は、より軽くて効率のようにフォーマット形式が出てきています。

↑JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

この中で、今回、普及しつつある「WebP」へ変換をしてみたいと思います。

作り上げた、サイトの画像、１ヶ１ヶを、WebPに変換するのは、大変です。
専用ソフトで、WebPに変換するのも、面倒です・・・

WordPressでは、WebPに簡単に変換してくれる便利なプラグインがあります。

「広告」

WebPに自動的に変換してくれる、EWWW プラグイン

画像関係の便利で簡単なプラグイン「EWWW」。

↑「EWWW」で検索をすると、「EWWW Image Optimizer」と、「EWWW Image Optimizer Cloud」と、２つ出てきます。
今回、「Cloud」【ではない】方を選びます。

↑インストール直後、エラーが出てきます。

EWWW Image Optimizer はツールフォルダーを作成できませんでした。: /xxxxx/wp-content/ewww/. 権限を調整するかフォルダーを作成してください。

↑「wp-content」以下にフォルダを作成できなかったというものです。
サイトによっては、エラー自体、出てこない事もあるかと思います。

# cd wp-content/
# mkdir ewww
# chmod 777 ewww/

↑「ewww」ディレクトリを作成します。

EWWW Image Optimizer は jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp を使用します。 jpegtran がありません。設定ページとインストール手順をインストールしてください。

↑各ツール必要ですよ。というエラーです。

各ソフトを入れます。

(jpegtran)
# yum install libjpeg-turbo-utils

(optipng)
# yum install optipng

(pngquant)
# yum install pngquant

(gifsicle)
# yum install gifsicle

(cwebp)
# yum install libwebp-tools

↑エラーメッセージでは、既に導入済みのものも、念のため、インストール方法を明記しておきます。
「pngout」
は、centos7.7では、yumで入れる事ができませんでしたので、今回、パスします。
これで、jpg(jpeg)、png、gifの画像を自動的に、最適化してくれるはずです。

「広告」

既存の画像データを最適化

既にアップロード済みの画像データを、最適化する場合、「一括」で簡単に変換ができます。

↑「メディア」メニューの下に「一括最適化」というメニューがあります。
ここを選んで、「最適化」を押します。

↑最適化をしてくれます。

「広告」

WebPでの配信

jpeg(jpg)やpngでの配信ではなく、次世代フォーマットでの配信を行います。

↑EWWWプラグインの「WebP」タブを開きます。

「WebP変換」というところをチェックします。

「広告」

WebPサーバー側設定

apacheの場合、.htaccessで、記述すべきものが表示されますので、指示に従い、.htaccessを作成します。

今回、該当サーバーは、nginxなので、違う方法になります・・・

map $http_accept $webp_suffix {
       default "";
       "~*webp" ".webp";
}

↑該当サーバー設定の「http {」の中で、「server {」の直前に、上記の設定を入れます。

location ~* \.(png|jpe?g)$ {
       root  （サーバーのルート）;
       add_header Vary Accept;
       try_files $uri$webp_suffix $uri =404;
}

↑そして、「server {」の中に、上記の設定を記述します。わたしは「location / {」のブロックの中に入れました。

# /usr/local/nginx/sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

↑と、nginxで、テストをして、ＯＫであれば