ページパフォーマンスの低下、『WebP画像』に変えて改善・軽量化

あるとき、自サイトのページパフォーマンスや、SEO評価を測れることを知ったかきばナ。

 測定はこちらから→PageSpeed Insights

計測結果を少し下にスクロールすると、いくつかのパフォーマンス改善案がでてきます。

その中でも今回は、携帯画面のパフォーマンスを改善する一つの方法、画像配信の改善を実行してみます！

ページパフォーマンスの低下、『WebP画像』に変えて改善・軽量化

かきばナのサイトでは「jpeg」や「png」画像をよく使っていました。しかし、これが多くの容量を占めていたようです。

そこで、計測結果のヒントにあった「WebP」形式の画像を使ってみることに。

ということで、計測時点で公開していた約50記事、約330枚の画像を「WebP」に変換します。（GIFアニメは除く）

プラグイン『Performance Lab』の導入

jpeg画像をWebP画像に変換するのに便利なのが、Performance Lab。

Performance Labは、WordPressにjpegやpng画像をアップロードしたとき、自動でWebP画像に変換してくれるプラグインです。

 すでにアップロードしてある画像は変換されません。

「プラグイン」→「プラグインを追加」から「Performance Lab」を追加し、有効化します。

以降、設定にある「Performance」から軽量化の設定ができます。

試験的機能の2つを除き、すべての機能を有効化するのがおすすめです。

設定が完了したところで、いよいよ行動にうつります。

先述の通り、すでにアップロードしてある画像は変換されないため、再アップロードし直します。

サイト内の画像をWebPに変換したスコア

画像をひたすら再アップロードしてWebPにしたスコアです。

ちなみに、同じ画像サイズ(1600×900)でも「jpeg」→「WebP」に変換しただけで、容量が「245KB」→「59KB」と軽くなっています！（一例）

さいごに

今回は画像を軽量化したことでサイトパフォーマンスが上昇しましたが、他の改善点も修正することでより良いスコアが出ると思います。

PageSpeed Insightsで計測したスコアは、インターネット回線や自動広告など、不安定要素も含まれます。

そのため、常に安定したスコアが出るわけではないことを把握しておきましょう。