WordPress画像対策「WebP」で速度改善（EWWW IO）（3）

下のSEO対策記事の続きです

WordPress SEO対策・URL正規化・サーチコンソール（1）

WordPress SEO対策・Yoast SEOでできること（2）

ページが表示されるまでの速度はSEOにとって重要です

表示速度は「サーバー」「テーマ」「プラグイン」の影響が大きく、簡単に対策できることは少ないかもしれません

しかし、画像を最適化することは比較的手軽にでき、効果があります

目次

速度の確認方法
WebPとは
WordPressの画像保存の仕組みとアスペクト比
EWWW Image Optimizerについて
EWWW Image Optimizerを使う
WebPで表示されているか確認
Befor After（参考まで）
その他、最後に

速度の確認方法

表示速度の確認は、Googleが提供している「PageSpeed Insights」を使うのがお手軽です

ウェブサイトに多くの訪問者がいない場合の分析結果は、実際のデータほどの精度ではないようです😅

PageSpeed Insights

上のURLにアクセスした画面です

調べたいページのURLを入力して「分析」をクリックします
結果が表示されます

赤枠の
「フィールドデータ」
「Origin Summary」
は、Chromeを利用しているユーザーのデータから他のサイトと比較します
「ラボデータ」が分析結果です

参考までに（この記事の為に調べました、間違えていたらごめんなさい）

First Contentful Paint: 記事や画像が初めて表示されるまでの時間

Speed Index: ページが見えるまでの時間

Largest Contentful Paint: 最も大きなテキストまたは画像が描画されるまでにかかった時間

Time to Interactive: ユーザーがメインのコンテンツが表示されたと判断するまでの時間

Total Blocking Time: コンテンツの操作が可能になるまでの時間

Cumulative Layout Shif: 視覚の安定性（レイアウトのズレの発生量）

「改善できる項目」を教えてくれますが、専門性が高く、「素人のSEO対策でできること」の範疇を越えている気がします　💦

しかし

「改善できる項目」の中で、画像は対応できる範疇です

「PageSpeed Insights」でテストしてみて下さい

「改善できる項目」に「次世代フォーマットでの画像の配信」があり
短縮できる時間の割合が大きければ、「 WebP」対応で速度は改善するはずです

「EWWW Image Optimizer」というプラグインを使い画像を最適化したいと思います

WebPとは

Googleが作った新しい画像フォーマットです　拡張子は「.jpg」「.png」のように「.webp」です

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
ja.wikipedia

圧縮率が高くて、透過にも対応できるとのことです
ファイルサイズはかなり小さくなります　^^;

難点が１つあります
それは、全てのブラウザが「WebP」に対応していないことです

だから、「WebP」の画像を使うには、
「WebP」対応ブラウザには「WebP」を
対応していないブラウザには「JPG」か「PNG」を準備しないといけないんです
面倒ですよね！！

でも大丈夫です
「EWWW Image Optimizer」が画像を変換してくれるので、いつも通り画像をアップロードすればOKです

ただ、最初に１つだけすることがあります
「WebP対応ブラウザ」にはWebPを
対応していないブラウザには「JPG」か「PNG」の画像をブラウザに送り返してね」
とサーバーにお願いすることです
そのためにWebサーバー用ソフトウェアの設定を変更します（.htacessの編集）

追記：ブラウザの対応
IEがサポート終了になったのであとは古いSafariです
OSサポート期間を考慮するならCatalinaリリースから3年後の2022年の年末ぐらいからは完全にWebP移行してもよさそうらしいですが…

話がそれます💦

「WordPressの画像保存や表示」のことで
投稿時に画像をたくさん使う場合はおすすめです

「 WebP」の設定とは関係ない話なので「WebP」だけなら飛ばして下さい〜

WordPressの画像保存の仕組みとアスペクト比

前提として、「 WebP」は画像を高圧縮できるというものですが
圧縮とリサイズは別です
「圧縮」は幅と高さはそのままで、ファイルサイズを小さくすること
「リサイズ」は画像の幅と高さを小さくすることです
適切なサイズにリサイズした画像を圧縮したら、もっとサイズを小さくできます

WordPressは、画像をアップロードすると「フルサイズの元画像」とは別にリサイズした画像も保存します

「設定」の「メディア」でリサイズするサイズの変更ができます

デフォルトのサイズ

	幅	高さ
サムネイルのサイズ	150ピクセル	150ピクセル
中サイズ	上限300ピクセル	上限300ピクセル
大サイズ	上限1024ピクセル	上限1024ピクセル

上限がつく理由は
アスペクト比と関係があり
リサイズするときに画像の横幅と高さの比率を保ってリサイズしないと、見た目がおかしくなります

横幅と高さの比率をアスペクト比と言います

下の画像は
上が元の写真、下は横幅と高さを同じにした（比率を保たなかった）場合です

縦長の写真は押しつぶした感じになります

横長の写真は引き伸ばした感じになります

「サムネイルサイズ」: アスペクト比は維持して、縦横を150の正方形に合うよう切り抜きます; 縦長や横長の写真は収まらない部分が発生します

「中サイズ」と「大サイズ」: アスペクト比は維持して
縦長画像は高さを上限値に合わせて調整し（横幅は上限値より小さくなる）
横長画像は横幅を上限値に合わせて調整し（高さは上限値より小さくなる）; 正方形だと横幅と高さがピッタリ上限値ですね

補足

例えばアップロードした写真が「大サイズ」の上限値より小さい場合は「大サイズ」は保存されません
多くのテーマでは画像を挿入した時にレイアウトからはみ出さないようにコンテント幅の上限値を設定しています（その場合は画像がコンテント幅より大きくても意味がありません）

結論
ちりも積もれば山となるです　😅

大サイズは用途にあったサイズに変更する（ただしテーマが既にアイキャッチ画像などで使うサイズを指定している場合が考えられるので、極端なサイズ変更は注意が必要です）
中サイズはスマホのことがあるので300のままが良いです

投稿画面で画像を挿入する時は、無駄に大きい画像は使わないよう大きすぎるサイズを選択していないか？確認しましょう（下の画面）

「サムネイル」「中」「大」は「設定」の「メディア」の画像サイズで保存された画像、
「フルサイズ」は元画像です

EWWW Image Optimizerについて

2021年10月現在

「EWWW Image Optimizer」のインストール条件は
PHPバージョン：7.1またはそれ以降
WordPress バージョン：5.5またはそれ以降　
です

ちなみに、もしPHPのバージョンがかなり古い場合、そのことも速度に影響しているはずです（古いPHPは処理速度が遅いです）

バージョン確認方法

「ツール」「サイトヘルス」「情報」から確認できます
WordPress のバージョンは「WordPress 」、PHPのバージョンは「サーバー」をクリックした画面に表示されます

EWWW Image Optimizerでできる事は

WebPに自動で変換
画像を自動で圧縮（JPGやPNGも圧縮します）
画像をリサイズ
画像のメタデータの削除（メタデータには撮影場所やカメラ情報など不要な情報が含まれています）
既にアップロードしている画像の一括変換
Lazy Load（遅延ロードですが、WordPress5.5以降で、Lazy loadingはデフォルトで有効なのであえてここで設定する必要はないと思います）

など

注意既にアップロード済みの画像も一括でリサイズして圧縮変換できます

しかし一度変換すると元に戻せません

画像が多いとかなり時間がかかり、トラブル発生のリスクも大きくなります

画像が保管されているフォルダのバックアップを強くお勧めします
（フォルダのバックアップはFilezillaやCyberduckなどのFTPソフトが使えると便利です）

EWWW Image Optimizerを使う

順序

EWWW Image Optimizerをインストール
サーバーの設定
EWWW Image Optimizer側の設定
アップロード済み画像の一括変換

EWWW Image Optimizerをインストール

WordpressEWWW Image Optimizeプラグインインストール画面

右側「プラグイン」をクリック　
画面上部の「新規追加」をクリック
キーワードに「EWWW Image Optimizer」を入力
「今すぐインストール」をクリック（Cloudではない方です）
「有効化」をクリック

サーバーの設定（.htaccessの編集）

初めてだと少し敷居が高いかもしれません

.htaccessについて

「.htaccess」とは、共用で使っているサーバーの設定を変更するための自分専用のファイルです

今回「.htaccess」ですることは
ユーザーのブラウザが「WebP」に対応しているかどうかで、配信する画像（URL）を切り分ける設定と、MINEタイプの追加です

「.htaccess」編集はプラグイン（EWWW Image Optimizerの画面）で提供されている機能もありますが、失敗するリスクが高いため、直接「.htaccess」を編集したいと思います
（実は、この記事を書くために試したら、案の定サーバーエラーで管理画面に入れなくなりました😅 )

エックスサーバー以外は

ご契約のサーバーにより方法が異なります、サーバー名と「.htaccessの編集」で検索して確認してみて下さい
またはFTPソフトを使い「.htaccess」の編集ができます

エックスサーバーでの手順

エックスサーバーの「.htaccess編集」画面

エックスサーバー・サーバーパネル

サーバーパネルにログイン

「.htaccess編集」を選択
サイトのドメインを選択
「.htaccess編集」タブを選択

この画面を編集します

WordPressの管理画面です

WordPressの管理画面

「設定」から「EWWW Image Optimier」を選択します
「WebPの配信方法」の赤い枠のところをコピーします

サーバーの「.htaccess」編集画面です

サーバー側
.htaccess編集画面

貼り付ける時の注意点
＃BEGIN WordPressと＃END WordPressの間には挿入しないで下さい
くれぐれも、既に書かれているコードを上書きしないように注意して下さい

一番下が無難だと思います
貼り付けたら「確認画面へ進む」を押します

編集前にバックアップすることをお勧めします
「実行する」を押します
「.htaccess」の編集が完了しました
が表示されます

WordPressの管理画面です

WordPressの管理画面

画面を再読み込みすると
右下『PNG』が
上の画像の『WEBP』になります

これでサーバー設定は完了です

＊「WebP未対応ブラウザ」の場合は当然ですが「WebP」は表示されません
念の為
「設定」の「パーマリンク」で「変更を保存」をクリックします
内容の変更はしないで下さい

サーバー設定が上手くいかず、「WebP」設定ができなかった場合でも
EWWW Image Optimizerで「JPG」や「PNG」を圧縮できるので、ファイルサイズは小さくなります

EWWW Image Optimizer側の設定

今回必要な設定

「今は無料モードのままにする」にチェック

メタデータを削除: 画像の不要な情報を削除する設定です
チェックが入っていることを確認します

画像のリサイズ: 幅と高さをどちらも「０」にするとリサイズしない設定です
幅の上限を1200〜2000の間で設定すれば、大きな画像も気にせずアップロードできて良いと思います

WebP変換: WebP変換にチェックをつけます

チェック完了後、「変更保存」を押します

(余談)

その他の設定項目について

あくまでサーバー側で設定ができなかった場合ですが、こちらにチェックをつけて、HTMLのタグで切り分ける方法です（テーマにより表示されない場合があり、 CSSの背景画像は別途対応が必要）　
テスト環境で試しましたが、あまり上手くいきませんでした💦

<picture>WebPリライト: サーバー側ではなく、ブラウザ側で表示する画像を切り替える
下のようなHTMLコードが出力されます

<picture>
  <source type="image/webp" srcset="Webp画像のURL">
  <img src="JPGやPNG画像のURL" alt="">
</picture>

設定画面の切り替え（詳細な設定）

（余談終了）

アップロード済み画像の一括変換

JPGとPNGの圧縮、Webpへの一括変換をします
一括変換後は元に戻せません

「メディア」「一括最適化」
を選択します
「最適化されていない画像をスキャン」をクリック

右側の枠について
「再最適化を強制」は
やり直す時などにチェックをつけますが、繰り返すと画像は劣化します

「WebPのみ」は
「JPG」や「PNG」を圧縮しない場合にチェックします
「画像の最適化をクリック」します

枚数にもよりますが、かなり時間がかかります
完了です
変換ができたかを確認します

「メディア」「ライブラリ」をクリック
右側に表示されます