『WebP(ウェッピー)』WordPressで画像を軽量化する方法

あるとき、自サイトのページパフォーマンスや、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で計測したスコアは、インターネット回線や自動広告など、不安定要素も含まれます。

そのため、常に安定したスコアが出るわけではないことに注意🍓