PageSpeed Insightsでサイトのパフォーマンスを計測すると、改善できる項目に「次世代フォーマットでの画像の配信」と表示されることがあります。
これはブログに掲載している画像をJPG・PNGからWebPにすると、サイトの表示速度が改善され、パフォーマンスが向上するというものです。
ただ改善方法や変換方法がわからない人も多いのではないでしょうか？
WordPressのプラグイン「EWWW Image Optimizer」を使えば、過去の画像も含めてWebPへの一括変換が可能です。
- SEOにどんな影響があるの？
- どれくらいパフォーマンスが改善されるの？
- WebPにどうやって変換するの？
このような方に向けて、「EWWW Image Optimizer」を使ったWebPへの変換方法を解説していきます。
SEOに重要な「ウェブに関する主な指標の評価」
まずサイトのパフォーマンスが落ちるとSEO的にどういった影響があるのか、簡単に説明をします。
2021年6月にGoogleのページエクスペリエンスアップデートで、ランキングを評価する指標として「ウェブに関する主な指標の評価(コアウェブバイタル)」の導入が発表されました。
これは表示速度や視覚的安定性などさまざまな指標を総合的に見て、サイトがユーザー体験をしやすいかを評価します。
ユーザーエクスペリエンスよりコンテンツが優れていればランキングに影響はないとしていますが、関連性が同程度のページが多数存在する場合の検索ランキングでは、このページエクスペリエンスが一段と重要とされています。
ページ エクスペリエンスの Google 検索結果への影響について
つまり「ウェブに関する主な指標の評価」が低いと検索順位が下がってしまう恐れがあるということです。
今回は「ウェブに関する主な指標の評価」を上げるために、要因の1つである「次世代フォーマットでの画像の配信」の改善方法をご紹介します。
WebPへの変換でどれくらい改善されるの？
先にどれくらいパフォーマンスが改善されるのか、結果を見てみましょう。
PageSpeed Insightsで当ブログを計測したところ変換前は0.6s~1.0sでした。
変換前の画像を保存し忘れしまったのですが、変換してからは「合格した監査」に入っており、「次世代フォーマットでの画像の配信」は合格できています。
外部サイトの画像などを埋め込んでいなければ、基本は合格できると考えて良さそうです。
EWWW Image Optimizerを使ってWebPに変換
それでは実際に「EWWW Image Optimizer」を使って、画像をWebPに変換していきます。
「EWWW Image Optimizer」はWordPressのプラグインです。
元の画像からWebPを作成して、対応しているブラウザにはWebP、非対応のブラウザには元の画像フォーマットで表示するという切り替えができます。
他にも画像の圧縮、メタデータの削除が可能です。
EWWW Image Optimizerをインストール
まずWordPressのプラグイン画面から検索してインストールします。
ダッシュボードのメニューから「プラグイン」→「新規追加」をクリックします。
検索ボックスに「EWWW Image Optimizer」と入力して、「今すぐインストール」をクリックします。
インストールが始まり、しばらくすると「有効化」というボタンになるので「有効化」をクリックします。
これでインストールは完了です。
EWWW Image Optimizerの設定
画像をWebPに変換するためには「.htaccess」にリライトルールを入力する必要があります。
まずはダッシュボードから「設定」→「EWWW Image Optimizer」をクリックします。
初回インストール時は質問に答えると自動で設定してくれる案内がでますが、今回は手動で設定するのでスキップします。
右下の「I know what i'm doing. leave me alone!」をクリックします。
設定画面に移動するので、「WebP変換」という項目にチェックを入れます。
有料プランを勧められますがそのまま「次へ」をクリックしてください。
そうするとWebPの配信方法とリライトルールが表示されます。
このリライトルールを「.htaccess」にコピペします。
「リライトルールに挿入する」をクリックすると自動でコードを追加してくれますが、「.htaccess」の一番下部に追加されてしまうため、不安な方は手動で追加しましょう。
利用しているサーバーによって手動で追加する方法が異なります。
今回はエックスサーバーを利用している方向けに設定方法を解説します。
エックスサーバーにログイン後、ホームページの欄にある「.htaccessを編集」をクリックします。
対象ドメインの「選択する」をクリックします。
リライトルールを「# BEGIN WordPress」の上に入力して、「確認画面へ進む」をクリックします。
内容に問題がなければ「実行する」をクリックして、「.htaccess」の編集は完了です。
EWWW Image Optimizerの設定画面に戻り、「変更を保存」をクリックします。
WebPの配信方法の右側にある画像が、緑色の「WEBP」となっていれば設定完了です。
WebP以外の設定
画像のリサイズを設定しておくと、WebPの変換と合わせて処理ができます。
リサイズしたい方は事前に設定しておきましょう。
また「ウェブに関する主な指標の評価」を改善できるものもあるので、それぞれの項目について簡単に紹介します。
- メタデータを削除
- EXIF(撮影日時・位置情報)を削除
- 画像のリサイズ
- 画像の縦横幅の上限を指定
- 不足している寸法を追加
- width・heightが指定されていない画像にプロパティを追加
- 遅延読み込み
- 表示領域に入ったときに画像を読み込む(表示速度改善)
画像のリサイズ
Googleは画像のサイズを「幅と高さをかけて 50,000 ピクセル以上」としています。
以前は横幅1200ピクセルとしていたのですが、2022年9月に更新されました。
横幅1200ピクセルだったことを考えると、アスペクト比が16:9であれば、最低1280×720なら問題ないと考えられます。
WebPの変換と一緒に画像のリサイズをしたい方は、事前に設定しておいてください。
不足している寸法を追加
「不足している寸法を追加」は遅延読み込みをONにした場合のみ設定できます。
これはcssのプロパティが指定されていない画像に、その画像の元のサイズからwidthとheightを追加する機能です。
PageSpeed Insightsの改善できる項目に「画像要素で width と height が明示的に指定されていない」が表示されている場合は、改善できる可能性があります。
ただ実際に試してみたところ、一部の画像に対して適切なプロパティが設定されず、表示が崩れてしまうことがありました。
画像の元のサイズをwidthとheightに追加するため、レスポンシブ用にcssの値をautoや100%としている画像は、表示が崩れてしまうかもしれません。
修正箇所が少ないのであれば、プラグインより手動の方が無難かと思います。
WebPに一括変換
設定が終わったら画像WebPに一括変換します。
ダッシュボードの「メディア」から「一括最適化」をクリックします。
既に「EWWW Image Optimizer」を使用したことがある場合は、右側にある設定の「最適化を強制」にチェックを入れると、過去に圧縮した画像も再度最適化してくれます。
また圧縮はせず、WebPへ変換のみ行いたい場合は「WebPのみ」にチェックを入れてください。
設定が終わったら「最適化されていない画像をスキャンする」をクリックします。
最適化できる画像がスキャンされるので、「画像を最適化」をクリックします。
自動で最適化が始まるので、終わるまでしばらく待ちます。
全て最適化が終われば圧縮とWebPの変換は完了です。
WebPになっているか確認
実際に掲載している画像がWebPで表示されているか確認しましょう。
キャッシュが残っていると確認できない場合があるため、事前にキャッシュを削除しておいてください。
確認したいページでF12、または右クリックから「検証」を選択します。
そうするとデベロッパーツールが表示されるので、「Network」のタブに行き「img」をクリックします。
この状態でページ更新(F5)をすると、記事内に表示されている画像のステータス一覧が確認できます。
対象となる画像のtypeがWebPとなっていれば問題ありません。typeをクリックで並び替えが可能です。
Nameを見てもどの画像かわからない場合は右クリックから「Open～」で画像を確認できます。
単純に画像上で右クリックして「名前を付けて画像を保存」を押せば、ファイルの種類からフォーマットの確認ができます。
EWWW Image OptimizerでWebPに変換する方法まとめ
今回は「EWWW Image Optimizer」を使って、画像をWebPに変換する方法をご紹介しました。
- 「ウェブに関する主な指標の評価」について
- WebPへの変換でどれくらい改善されるか
- EWWW Image Optimizerを使ってWebPに変換
- EWWW Image Optimizerをインストール方法
- EWWW Image Optimizerの設定方法
- WebP以外の設定について
- WebPに一括変換
- WebPになっているか確認する方法
「ウェブに関する主な指標の評価」で合格しておくことは、SEOにとって非常に重要なポイントです。
さまざまな要素から総合的に判断されますが、画像をWebPにするだけでも大きな改善になるでしょう。
「EWWW Image Optimizer」なら一括で処理してくれますし、何より簡単なのでやっておいて損はないかと思います。
少しでもサイトのパフォーマンスを上げたいという方は、ぜひ試してみてください！
コメント