Pagespeed Insightsで最大22.6ポイントスコアアップ！平均3.2ポイントアップ！Googleが開発した新しい画像フォーマットWebPでスコアが上がる！

27つのデモページを利用して、Googleが開発した新しい画像フォーマットWebPを利用したら、Pagespeed Insightsのスコアがどうなるのかを調べてみました。

最大22.6ポイント、平均3.2ポイントのスコアアップ

今回は無料のBootstrapテンプレートページをデモとして利用し、その結果を利用しています。配布されているテンプレートなので、フロントエンド構築レベルも高く、画像も圧縮されているケースもあり、検証対象としてはかなりシビアなものだと思います。

画像のファイルサイズが大きいデモページでは、最大22.6ポイントのスコアアップが確認できました。

ひとつのデモページでは、スコアリングが0.2ポイントほどさがりました。これはWebPでさがったというわけではなく、ネットワーク環境による影響が強いせいです。PSIは3ポイントぐらいは計測ごとに異なるため、その影響となります。

平均して、3.2ポイントのスコアアップが可能でした。9ポイントあがるデモページもありますし、2ポイント上がるところもあります。画像軽量化が行われているデモページでは、スコアアップのポイントはすくなめですが、確実にスコアがあがるのは確認できました。

詳細については、こちらの記事をご覧ください。今回の調査データも無料でダウンロードいただけます。

WebPの活用によるPageSpeed Insigntsのスコア改善を本気で検証
https://blog.ideamans.com/2019/02/webp-pagespeed-insights.html

自分のウェブサイトをWebPにするとどのぐらいかわるのか無料でチェック

WebPに変換したらどのぐらいかわるのか、無料のシュミレータでチェックすることができます。URLを入れていただいて、ボタンをクリックするだけ！30秒以内に結果がでます！

ページまるごとWebPファイル変換
https://sim.lightfile.net/webp/

実際にWebP変換された画像一式をダウンロードすることも可能。画質のチェックもできるので、比較することもできちゃいます。

最後に

JPEGが登場してから26年以上も経っているので、そもそろ新しい画像フォーマットにかわることも検討するべきでしょう。SVGやPNGなど、さまざまな画像フォーマットが生まれていますが、一部に特化しているものや重くなってしまうケースなどがあるため、あまりシンプルではありません。

「もうWebPでいいじゃん」というレベルでよいくらい、このWebPは優れています。ウェブでの画像表示は、ぜひWebPを取り入れていきましょう！