ワードプレスの画像WebP化のポイント
１，ワードプレスにプラグイン・EWWW Image Optimizer入れる
２，サーバー管理画面やFTPソフトで自サイトの 「.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 |
３，プラグイン「EWWW」で画像を一括最適化
ワードプレスサイトが重くなる原因はだいたい「画像」
こんちわ。
皆さん、「自サイトの速度」＝表示までの速さって、気にしてます？
今のGoogleの傾向では、サイト高速化もある程度サイト評価の基準になってきています。
WEXAL & KUSANAGIのご紹介ありがとうございます｜【SWELL】サイトの高速化（コアウェブバイタル）に関する施策［WordPress］ https://t.co/MCQ72GuP8i
— 大島義裕 (@yoshihiro_oh) April 27, 2021
一般的な前提として・・・
サイト表示が遅いと、ユーザー離脱率が上がるといわれています。
たぶんあなたも経験あるかもですが、やたら読み込みが遅いサイトってイライラしますよねｗ
スマホ検索とかだと、割と数秒を争うレベルで早く情報が知りたいわけで。
そんな時に読み込み中マークが延々出て、いつまでも表示されないサイトがあったら、我慢できずブラウザバックしちゃったことがある人もいるはず。
だから、サイト高速化はGoogleの評価だけでなく、ユーザーさんに記事を読んでもらう、という初歩的な機会を失うことにもなりかねないわけで。
で、サイトの速度にかかわるのは、一般的なワードプレスサイトで言いますと・・・
- サーバー選び
- ブログテンプレート
- 自分で入れたコンテンツ（記事画像プラグイン）
・・・ということになるんですが。
サーバーはやっぱりエックスサーバーが一番安定。
これ選べばまず問題ない。
ブログテーマ（テンプレート）も、最近の物ならどれも高速化に対応してます。
で、問題は自分が入れたコンテンツ。
特に画像。
これが、サイトを重くしてるかなり大きな要因でして。
画像形式を変えるだけでも、サイト速度は結構改善することがあります。
特に最近よく見るのが「WebP」という画像形式です。
参考：https://ja.wikipedia.org/wiki/WebP
ただ、これは最近（つっても数年前からもうありましたが）登場した画像形式であり、みんなjpegやらpngを入れるのが一般的だったと思います。
僕も、サイト軽量化とか全然わかってなくて、画像の形式もほぼなんも考えず入れてたんで、WebP形式とか考えたことありませんでした。
ですが、サイトの画像WebP化は、今からでも遅くありません。
ワードプレスなら
- 「EWWW Image Optimizerプラグイン」
- 「htaccessファイルに追記」
だけでサイト画像をWebP変換することができ、サイト高速化に大いに役立ちます。
じゃあ、手順を解説していきます。
あくまでワードプレスサイトのやり方なので、ほかのブログの場合は回れ右してください。
１，EWWW Image Optimizer入れる
まず必要なのは
EWWW Image Optimizer
というプラグインです。
これがあれば、「新規追加画像のWebP変換」「すでにある画像のWebP変換」が簡単に設定できます。
つまり、用意する画像自体は今まで通りjpegとpng、あるいはgifでもOKということですね。
ではインストールしましょう。
ワードプレスを触ってる人なら言うまでもないと思いますが、ワードプレスの「新規プラグイン」からEWWW Image Optimizerを検索してインストールします。
すげー名前もアイコンも似てるEWWW Image Optimizer Cloudみたいな別プラグインもあるので、間違えないように。
インストールしたら、ワードプレス管理画面のメニュー（左側）から「設定」→「EWWW Image Optimizer」を選択しましょう。
「基本」タブのままスクロールしていくと「WebP変換」という項目があるので、クリックしてチェックを入れます。
ただし、その時点では以下のようになっているはず。
ここまでは簡単なんですが・・・当然これだけでは不完全です。
画像の赤い「PNG」と書かれたマークが出るのは、サイト画像のWebP変換が未完了という意味です。
んで、↑の画像でもある通り、「このコードを追加しろ」という感じで出てくるはずです。
注意点として、この画像一番下の「リライトツール挿入」は使いません。いったん無視してください。
次に、サイトのhtaccess.をいじります。
２，htaccessファイル冒頭に以下のコードを追加。
FTPソフト、またはサーバーの管理画面から「.htaccess」ファイルを開きます。
ここではエックスサーバーの管理画面からやってみます。簡単なので。
まんま.htaccess編集という項目があるのでクリック。
WebP化したいサイトを選びます。
タブの「.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ファイルの編集はOKです。
続いてサイトの管理画面（ワードプレス）へ移動しましょう。
３，EWWW Image Optimizerで画像を一括最適化
↑の時点で、新規追加の画像は勝手にWebP変換される設定になっています。
ここからは「すでにある画像」を、今後WebP表示されるように設定していきますね。
EWWW Image Optimizerが正常にインストールできていれば、メディアの中に「一括最適化」という項目が出てきているはずです。
それをクリック。
念のため、右の「再最適化を強制」をチェックして最適化を始めましょう。
「スキャンする」で全自動で変換されます。
画像の量によっては結構時間かかるので気長に待ちましょう。
終わったら、さっきの「設定」→「EWWW Image Optimizer」を選択してさっきの「WebP変換」チェックをした場所へ戻りましょう。
上手くいっていれば、さっきの赤い「png」ではなく緑の「WebP」と書かれた画像に変わってるはずです。
別のチェック方法として・・・最適化の完了後、管理画面の【メディア > ライブラリ】を一覧表示してみます。
各画像リストの「画像最適化」の項目に「WebP:」のサイズが表示されていれば、WebP変換済みと分かります。
なお、「<picture> WebP リライト」をチェックしておくと、自分で自サイトの画像を右クリック保存すると「.webp」拡張子がちゃんと追加されていることが確認できます。
ただ、サイト速度はあんま変わらなかったので「一応チェックしておく」くらいのノリでいいと思います。
注意点
サイトによっては、EWWWプラグイン内の「遅延読み込み」にチェックしてると、画像が全然表示されなくなる場合があります。
チェック外せば戻ります。
「遅延読み込み」を外すと重くなりそうなもんですが、僕の場合、別のサイトで試すとモバイル49→80台に大幅改善しました。
WebP変換だけでも結構高速化の効果があるようです。
サイトがどれだけ高速化できたか見るには
https://developers.google.com/speed/pagespeed/insights/
↑このツールを使ってください。
PCは90台、モバイルも平均以上は欲しいところです。
おわりに
以上で、サイトの速度がある程度改善できるはずです。
こういうのは「記事の内容優先！」で馬鹿にする人いると思いますが、「コンテンツ以外」の不安要素を根こそぎ潰しておいてこそ、コンテンツに集中できるってものです。
だから、僕は気付いた時にサイトの最適化作業をやってるし、その時の経験がそのままブログにできます。
僕はそうやってアクセスや読者の興味を集め、ビジネスにつなげて・・・というようなことをやっています。
たとえネットに疎い初心者でも、その試行錯誤をコンテンツにし、お金を稼ぐことが可能になりました。
興味がある方は、ほかの記事もぜひ読んでみてくださいね（あからさまな宣伝）
では、またね。
