GoogleのPageSpeed Insightsの画像判定はおかしい?

前回の記事でGoogleのPageSpeed Insightsでのモバイル画像の警告が気になって仕方がないので、とことんテストしてみる事にしました。

今度はDevicePixelRatioを表示を追加してテストしてみました。

テストした結果は下記の画像。

PageSpeed Insights_1

PageSpeed InsightsのモバイルはDevicePixelRatioは2xで判定しているようです。

ソースは下記にしているので、画面は320pxですが2xなので640pxの画像が表示されます。

[code]

<img src="img/2000w.jpg" srcset="img/320w.jpg 320w, img/360w.jpg 360w, img/640w.jpg 640w, img/768w.jpg 768w, img/800w.jpg 800w, img/980w.jpg 980w, img/1280w.jpg 1280w, img/2000w.jpg 2000w" alt="srcsetのテスト">

[/code]

現状のスマートフォンは、DevicePixelRatioが2xどころか3x等、ディスプレイの性能はかなり高くなってます。

GoogleのPageSpeed Insightsのモバイルは2xで画像を表示させているのは妥当だと思います。

では何故『圧縮してサイズを変更すると 20.3 KB(75%)削減できます。』のような修正を考慮が出てくるのか?

ここはとことん実験してみるしかない!

という事で試してみました。

下記結果は、320pxと640pxの画像をそれぞれ圧縮率80%のJPGで出力しました。

320pxの画像は問題ないですが、640pxの画像で『修正を考慮』が出てます。

で、640pxの画像を10%ずつ圧縮率を下げてはチェックを続け、ようやく20%で『修正を考慮』が消えました。

画像のファイルサイズを確認、320pxが10KB、640pxが5KB。

要するに、GoogleのPageSpeed Insightsのモバイル画像のチェックは、320px以下の画像はOKだが、2x用に作った640pxの画像は、ファイルサイズを1/2にしないとOKが出ない事がわかりました。

しかし、640pxの画像ファイルサイズを1/2にすると流石に荒くて見れたものではない。

実際スマートフォンで確認しました、DevicePixelRatioは3xです。

スマートフォンで見たとき

640pxの画像は荒くて見られたものではないです。

結論!

 

今やモバイルデバイスの解像度はかなり良くなってきてます。

当然!性能が良いディスプレイ端末を持っていれば綺麗に見たいのが当然でしょう。

なので、今のところGoogleのPageSpeed Insightsのモバイル画像のチェックは使えません。

画像の『修正を考慮』表示されても、今のところは無視するしかないでしょう。

今後、PageSpeed Insightsの精度が上がる事を期待します!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です