WordPressの完全無料&WebP対応!!EWWWより有能?「WebP Express」

2019年8月20日

1. WebP Express
2. 導入方法
3. 設定
- 3.1. apacheの場合
- 3.2. Nginxの場合
4. 感想

WebP Express

皆さんこんにちわ、今回はサイト高速に役立つwebpの話。

さて最近はサイトの高速化の加速が速まっています、高速化することで離脱率が減る大きなきっかけになりますからね。

特に高速化するには圧縮やデータの削減が役に立ちます。

その一環としてWebPになります、WebPはjpgやpngを損失を抑えてデータ削減された形式になります。
まあ特にサイトの表示が遅くなる原因は画像やjsの読み込みが多いですからね。

というわけで早速Wordpressの画像をWebPに変換させていきましょう。

使うプラグインは「WebP Express」、完全無料でApache、Nginxに対応しています。

導入方法

まずは「WebP Express」をwordpressのプラグイン追加から検索でインストールしてください。

無事インストールできたら次の項目に進んでください。

エラー、特にフォルダを作れない等パーミッションのエラーの場合は手動でエラー文通りにフォルダを作ってください。

構造としてはwp-content内にwebp-expressのフォルダ作成でおｋです、パーミッションは各自設定してください。
777でもいい気もしますができればこんな雑な設定はあまりおすすめしません。

これでプラグインの有効化は完了です。

設定

プラグインの有効化はできましたがこのままではwebp化はされません、apacheなら.htaccessに、nginxを使っているならnginxの設定を変更する必要があります。

apacheは簡単ですが、nginxは少し面倒です。

プラグインの設定に合わせてnginxの設定もいじらないといけません。

とりあえずプラグインの設定はデフォルト(初期設定)のままにします、またはwebp化させる場合の品質の設定ぐらい。
自分はとりあえず品質を70まで下げました、下げすぎると画像が粗くなりますので。

apacheの場合

apacheは先程言ったとおり.htaccessに記述をするだけでいいです、基本はプラグインの設定を保存するだけで.htaccessにその記述がされるようですが失敗する場合は画面に出たテキストを手動で.htaccessの追加記述してください。

Nginxの場合

Nginxは.htaccessが機能しないようなのでNginxの設定に記述をします。
設定のファイルがある場所は「/etc/nginx/conf.d」

conf.d内に設定ファイルがあります。

自分はwordpressをKUSANAGIで動かしているのでnginxなので、設定ファイルの名前がサイト名になってます。
各自今動いているサイトの設定ファイルがどれか確認してください。

確認ができたら早速編集します。

以下の記述を「server{ }」内に書き込んでください!!

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

この記述を追加することでwebpが無事表示されるようになります。

自分はアクセスログやエラーログを保存する記述の後ろあたりにこの記述を追加しました。

要注意なのはこの記述をしたあとNginxを再起動してください。
KUSANAGIなら「kusanagi restart」または「kusanagi nginx」で再起動します。

この時エラーが出る場合は記述した箇所に問題があります。
治らない場合は一旦追加した記述を消す、場所を変えてみてください。