PageSpeed InsightsとWebPの関係性

PageSpeed Insights(呼称:ページスピード)を試すと「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます」が表示される場合があります。

 

ここでは画像形式の1つである「WebP」について軽く触れたいと思いますが、先にメリットとデメリットを書きます。

 

メリット

・WebPは、JPGに比べ画像サイズが減るのでページの読み込み速度は上昇します。なお、「パフォーマンス スコアには直接影響しません」と提示されているので、必ず評価や点数に好影響が出るとは言い切れません。

デメリット

・Internet Explorer(*)など古いブラウザが未対応なので、同じ画像について2種類用意する必要がある。

*MS-IEは2022年6月にサポートが終了しました。

・同じ画像が2つとなるため、管理保存が面倒です。

・すでにJPEGとして保存している画像がある場合、Webp画像に変換する必要があり、その作業が面倒です。

・PNG画像をWebPに変換すると「逆にファイルサイズが増加」した事例があったので、現時点で効果があるのは「JPEGのみ」と判断しました。

 

Webpに対応しているブラウザ

wikipediaより

Google Chrome
Mozilla Firefox 65以降
Microsoft Edge
Opera
Safari 14以降

※これら以外では表示されない、と私は認識しています。すべてのブラウザでの表示テストができないためです

 

このメリットに「それほどの価値がない」と思われた方は、これ以降を読まれる必要はありません。

またデメリットの方ですが、「古いブラウザの人には画像が見れなくても問題はない」という方は、webpの画像だけを用意すれば良いので、デメリットはゼロになります。

 

Webp画像を使用する前のPageSpeed Insights

タップ・クリックで拡大します。

Webp画像を使用する前のPageSpeed Insightsの結果

表示された提案項目「次世代フォーマットでの画像の配信」には

「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます」

「すべての `amp-img` コンポーネントを WebP 形式で表示し、他のブラウザには適切な代替画像を表示することを検討してください」

短縮できる時間(推定)0.3秒

 

 

そこで元のjpeg画像からwebpの画像を用意しました

元のjpeg画像とwebpに変換した画像のファイルサイズの違い

画像の劣化についてですが、私が「パっと見で劣化してなければOK」という性格で細部を見ていないので詳しくはわかりませんが、「それほど違いはない」ように見えました。

ただしファイルサイズはJPEG画像の時 29KBだったのがWebp画像にした時は 16KBとなり、約13KBの節約になりましたが、約45%も圧縮しているので細部を見ると劣化している可能性はあります。

なお、JPEG画像をWebp画像に変換、あるいは画像ソフトでWebpとして保存する方法については、様々なやり方があるのでここでは触れません

 

Webp画像を使用した後のPageSpeed Insights

このように、先ほどの「次世代フォーマットでの画像の配信」は消えました

Webp画像を使用した後のPageSpeed Insightsの結果

 

 

結論

メリット・デメリットを考えてご判断下さい。

私自身は「手間がかかる点、古いブラウザでは表示されない点」を考慮して、「限られた一部のページだけ」で実施しました。とくに「同じ画像を2種類、管理する」というのが私には負担です。

 

jpeg画像とwebp画像との画質の比較

ホームページビルダーに付属のJPEG画像(ファイルサイズ: 11.5kb)

ホームページビルダー付属の画像でWebPテスト画像

上記の画像をWebP画像に変換したもの(ファイルサイズ: 6.95kb)

ホームページビルダー付属の画像をWebPに変換した画像

※Internet Explorerなど一部のブラウザでは上のWebP画像は表示されず空白または文字列「ホームページビルダー付属の画像をWebPに変換した画像」です

 

関連記事

AMPで作成したページでのWebP画像の表示について

→当サイトは非AMPなので別サイトで作成しました。

 

 

その他の参考記述

WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます →英語・詳細

すべての `amp-img` コンポーネントを WebP 形式で表示し、他のブラウザには適切な代替画像を表示することを検討してください →英語・詳細

 


ほかの SEO対策 の記事

Googleアナリティクス 4のURLの変更、タグの取得方法を画像で解説

[SEO対策]迷惑なWebボットに対抗する

Google Search Consoleでエラーが出たら・個人的メモ

Googleアナリティクスで今日現在までのアクセス数が知りたい時

[SEO]Adsense関連の記事

amazonでSEO対策と検索した結果
*該当しない場合があります
この記事のQRコード