WordPressサイトを作成し、サイトが動きだすとどうしてもグーグル先生の評価が気になります。今回は「PageSpeed Insights」での計測で画像の重さが気になったので、「Converter for Media」で画像の軽量化しサイトの表示速度向上を図ります。
「Converter for Media」とは？非常に優秀な画像系プラグイン
「Converter for Media」は、WebPファイルのフォーマットに変換するためのプラグインです。
このプラグインを使い、JPEGやPNGなど通常の画像形式からWebP形式に変換できます。
WordPressサイト内の画像のWebP関連を全て対応できるので非常に優秀です。
- 対応ブラウザではWebPを表示（ほとんどのブラウザが対応）
- 非対応ブラウザでは元形式（JPEG等）の画像を表示
- 画像アップロード時に自動でWebPに変換
- 既存の画像も一括変換可能
- テーマ・プラグイン内の画像も変換可能
- プラグインを無効化すると元形式の画像を表示
インストール・設定の作業は簡単にできました。
導入前の画像の一括変換処理はそれなりの時間がかかるので、その間ちょっと休憩できます。
WebPファイルとは？高品質で高圧縮な次世代画像フォーマット
WebPはGoogleが開発した画像フォーマットで、高圧縮でありながら高品質な画像にすることができます。
WebPはウェブページの読み込み速度を向上させ、データの転送量を削減できます。
非可逆圧縮（jpegと同じ）
画像の圧縮率が高い（超軽量）
背景透過に対応（ping変換など）
アニメーションに対応
とにかく高性能で超軽量
IE等の古いブラウザに対応していないため、「WebP」形式の画像だけを直接使用するのは少し不安です。
※Googleが開発したオープンソースの画像圧縮ツール「squoosh」もあります。
アップロード前の画像をwebpに変換できますが一枚づつは面倒です…
PageSpeed Insightsとは？サイト表示速度のスコアラー
PageSpeed Insights（ページスピード インサイト）は、Googleが提供する無料のウェブサイトのパフォーマンス分析ツールです。サイトの表示速度について詳しく調べてくれスコアで教えてくれます。
このサイトのPageSpeed Insightsでのスコアが低く、一番の原因が画像の重さでした。このサイトでは読者の読みやすさや伝えたいイメージを意識して、ところどころに無料素材の画像を挿入しています。
手軽さを求めて『記事作成中に投稿画面から直接画像を検索しアップロード』できるプラグインを使用して、無料素材のファイルフォーマットのままアップロードしていました。ほとんどがjpgです。
実際の効果は？
一番の目的はサイト表示速度でPageSpeed Insightsのスコア
Converter for Media導入前のPageSpeed Insights結果
３９点とかなり低いです…
Converter for Media導入直後のPageSpeed Insights結果
40点…？？？
確認するとjpgのまま計測されていて、もちろん画像は重いまま…。キャッシュの問題か、PageSpeed Insightsチェック時には元画像しか読み込まないのか…。
後日チェックし記事更新しようと思います。
後日、再測定したら「改善できる項目」から画像がうんぬん…はなくなってました！スコアも少し上がり安心しました！
実際のスピード感は？
なんとなくですが早くなった気がします。そもそもが多くても５枚くらいしか画像を挿入していない記事ばかりなので体感できるほどではないのかもです。
いままでの記事投稿の作業環境のままで使えてるか？
「Converter for Media」を導入しても、今までのままの環境で記事投稿できるか気になりました。
試しにプラグインを通しアップロードしましたが、webpで表示されていました。こちらは問題なく大成功です。
まとめ
今回の『Converter for Media』の導入で、サイトの表示速度向上を目指しました。GoogleのPageSpeed Insightsによると、画像の重さがスコアに影響しており、その解決策としてWebP形式への変換を検討しました。
『Converter for Media』は、簡単な導入と設定でWordPressサイト内の画像をWebP形式に一括変換でき、非常に効果的なプラグインです。WebP形式は高圧縮で高品質な次世代画像フォーマットであり、サイトの読み込み速度向上に寄与します。
しかし導入前後のPageSpeed Insightsのスコアには変化が見られず、実際の速度感も体感しにくかったですが、これからの記事更新や効果のモニタリングを通じて、サイトの改善を続けていく予定です。手軽さを追求しつつも、サイトパフォーマンスの向上に焦点を当て、ユーザーエクスペリエンスの向上を目指します。
最後まで読んでいただきありがとうございます。