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

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

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

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

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

目次
  1. 速度の確認方法
  2. WebPとは
  3. WordPressの画像保存の仕組みとアスペクト比
  4. EWWW Image Optimizerについて
  5. EWWW Image Optimizerを使う
    1. EWWW Image Optimizerをインストール
    2. サーバーの設定(.htaccessの編集)
      1. .htaccessについて
      2. エックスサーバーでの手順
    3. EWWW Image Optimizer側の設定
      1. 今回必要な設定
      2. その他の設定項目について
    4. アップロード済み画像の一括変換
  6. WebPで表示されているか確認
  7. Befor After(参考まで)
  8. その他、最後に

速度の確認方法

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

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

  1. PageSpeed Insights

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

    調べたいページのURLを入力して「分析」をクリックします

  2. 結果画面

    結果が表示されます

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

  3. PageSpeed Insights結果画面

    「ラボデータ」が分析結果です

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

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

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

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

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

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

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

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

話がそれます💦

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


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

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

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

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

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

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を使う

順序

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

EWWW Image Optimizerをインストール

WordpressEWWW Image Optimizeプラグインインストール画面
  1. 右側「プラグイン」をクリック 
  2. 画面上部の「新規追加」をクリック
  3. キーワードに「EWWW Image Optimizer」を入力
  4. 「今すぐインストール」をクリック(Cloudではない方です)
  5. 「有効化」をクリック

サーバーの設定(.htaccessの編集)

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

.htaccessについて

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

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


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

エックスサーバー以外は

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

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

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

  1. エックスサーバーサーバーパネルにログイン

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

    「.htaccess編集」を選択

  2. サイトのドメインを選択

    サイトのドメインを選択

  3. .htaccess編集タブを選択

    「.htaccess編集」タブを選択

    この画面を編集します

WordPressの管理画面です

  1. wordpress管理画面設定からEWWW Image Optimierを選択

    WordPressの管理画面

    「設定」から「EWWW Image Optimier」を選択します

  2. EWWW Image Optimierを選択

    「WebPの配信方法」の赤い枠のところをコピーします

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

  1. サーバー.htaccess編集画面

    サーバー側
    .htaccess編集画面

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

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

    編集前にバックアップすることをお勧めします

  2. サーバー.htaccess編集画面完了画面

    「実行する」を押します
    「.htaccess」の編集が完了しました
    が表示されます

WordPressの管理画面です

  1. EWWW Image Optimierの設定画面

    WordPressの管理画面

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

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

    *「WebP未対応ブラウザ」の場合は当然ですが「WebP」は表示されません

  2. 管理画面パーマリンク

    念の為
    「設定」の「パーマリンク」で「変更を保存」をクリックします
    内容の変更はしないで下さい

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

EWWW Image Optimizer側の設定

今回必要な設定

EWWW Image Optimizer基本設定画面

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

メタデータを削除
画像の不要な情報を削除する設定です
チェックが入っていることを確認します
画像のリサイズ
幅と高さをどちらも「0」にするとリサイズしない設定です
幅の上限を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への一括変換をします
一括変換後は元に戻せません

  1. メディア一括最適化を選択

    「メディア」「一括最適化」
    を選択します

  2. 最適化されていない画像をスキャンをクリック

    「最適化されていない画像をスキャン」をクリック

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

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

  3. 画像の最適化をクリック

    「画像の最適化をクリック」します

    枚数にもよりますが、かなり時間がかかります

  4. 完了画面

    完了です

  5. メディアライブラリをクリック

    変換ができたかを確認します

    「メディア」「ライブラリ」をクリック

  6. メディアライブラリ一覧画面

    右側に表示されます

WebPで表示されているか確認

Chromeを使っている場合

  1. 右クリック検証をクリック

    右クリック「検証」をクリックする
    「ディベロッパーツール」が開きます

  2. ChromeディベロッパーツールNet workをクリック

    「Net work」をクリック

  3. 再読み込みのアイコン

    左上のアイコンで再読み込みします

  4. Chromeディベロッパーツールネットワーク画面

    「Type」の列に画像は「webp」と表示されたら成功です

表示されない場合、キャッシュが残っている可能性があります
Mac:Cmd + Shift + R
Windows :Shift + F5
でスパーリロードしてみて下さい

Chrome以外のブラウザもほぼ同じです
別の方法として画像の上で右クリックして、「イメージを(別名で)保存する」を押すとその画像の拡張子「.webp」が確認できます

Befor After(参考まで)

このサイトの「WebP」設定を外して、「PageSpeed Insights」でテストしました

Chromeディベロッパーツールネットワーク画面webp非対応

Before

Chromeディベロッパーツールネットワーク画面WebP対応画面

After

Webp非対応PageSpeed Insights結果

Before

Webp対応PageSpeed Insights結果

After

Webp非対応PageSpeed Insights結果
改善項目次世代フォーマットでの画像の配信

Before
改善項目に「次世代フォーマットでの画像の配信」があります

Webp対応PageSpeed Insights結果
改善項目次世代フォーマットでの画像の配信なしの画面

After
改善項目から「次世代フォーマットでの画像の配信」が消えました

その他、最後に

「Google アナリティクス」や「Googleアドセンス」を設置すると、かなり遅くなります

ちなみに、このサイトは「Google アナリティクス」は使っていません
また、Googleアドセンスはページをスクロールしてから表示するようにしているので、読み込み時は影響しません
(良いのか悪いのかはっきり分かっていませんが、もし怒られても実害はありません😅 )

その他、サーバーの設定で「ブラウザキャッシュ」「サーバーキャッシュ」を「on」にすると改善すると思います

見出しはできればh4までがよさそうです(h6まで使うとDOMが深くなる)

参考にしていただければ、幸いです