PageSpeed Insightsのスコアを改善するvol.3 – 画像のwebP化

続いて、「画像のwebP化」を行いました。

それにより

• 【INSIGHTS】画像配信を改善する

を改善しました。

問題の原因

サイトの画像は主にPNG画像が中心で、読み込みに時間がかかっていました。webPは最近できたフォーマットで私自身扱うこと自体初めてだったのですが、「PNGやJPEG画像を、画質を落とさず、可逆的に圧縮できる」フォーマットだそうです。

慣れていないフォーマットということもあり、今回はプラグインを導入しました。

解決策

プラグイン「Converter for Media」を導入しました。

最初はソースをみてもPNG画像のままでプラグインがうまく動作していないのではないかと四苦八苦したのですが、「画像の保存」を試みたところ拡張子がwebPになっており無事にwebP画像が出力されていることがわかりました。

PageSpeed Insightsスコアの変化

モバイル

スコア変動はありませんでした。

しかし詳細をよく見てみるとLargest Contentful Paintが18.5秒→11.5秒へと7秒の短縮が認められました。そうはいっても高い値であることに変わりはないので、スコアに影響しなかったのでしょうか。

デスクトップ

パフォーマンスが68→76へと8上昇。おすすめの方法は96→78へと18低下しました。

おすすめの方法のスコアが低下した原因は「サポートを終了した API が使用されています 」という警告が追加されたことだと考えられます。ただ、これも申請中のアドセンスに起因するものなので、今回は無視することにしました。（その後何度か測定した見たところ、この警告は出たり出なかったり…タイミングによるようです。）

総括

モバイルのスコアは変化なし、デスクトップのスコアはやや上昇という結果に収まりました。

正直、webP化によりもっとスコアが上がるものと想定していたので意外でした。ただ、サムネイルにアイキャッチ画像を縮小して利用していることでの負担がみられるので、うまくレスポンシブ対応できるよう対処しようと思います。