PageSpeed InsightsとはGoogleのAPI（PSI）。API（PSI）は、何のことだかわかりづらいですが、大雑把にいうと「アプリケーション、ソフトウェア、プログラムなどをつなぎ最適化のお手伝いをする」くらいに理解しておきましょう。PageSpeed Insightsはモバイル端末向けとパソコン向けの両方のページにおけるパフォーマンスに関するレポートと、そのページを改善する最適化案を提供してくれます。ブログなどにアクセスした時、サッと表示してくれる方がユーザーに親切という考えが主流になりつつあります。だから、ページを表示する速度のパフォーマンスが良いにこしたことはありません。
本ブログのPageSpeed Insightsの結果
本ブログの本ブログのPageSpeed Insightsの結果は以下の通りでした。
デスクトップは99というハイスコア。
一方、モバイルは59という残念な結果でした。
モバイルの改善策を見ると・・・
「効果的な画像フォーマット」が最もスピードの重石となっています。
CSSやJavaScriptにも改善の余地はありそうですが、CSSもJavaScriptも詳しくないので手を出せません。
「効果的な画像フォーマット」の対策は、Jpegやpngの画像データをWebpの画像データに置き換えるということです。これならできそうです。
Webpとは
Webpとはページスピードの改善に向いている比較的新しい画像フォーマット。
Googleが開発し、圧縮しても画質が落ちづらいという特徴があります。
以前は、Webpの画像フォーマットだと表示されないブラウザやスマホのOSがたくさんありましたが、最近はほとんどが対応してきました。なので、ブログなどでも安心してWebpの画像フォーマットが使えるようになりました。
では、早速、本ブログの画像（Jpegなど）をWebpに置き換えていきます。
Photoshopで手軽にWebp変換
PhotoshopでJpeg、pngをWebpに変換
Photoshopも最近までJpeg、pngをWebpに簡単に変換できませんでした。
別名保存の一覧などにJpeg、pngはあってもWebpはありませんでした。
そのため、アプリなどをつかってWebpに変換する必要があり面倒でした。
それが2022年2月に公開された「Photoshop」のデスクトップ版バージョン23.2から、別名保存の一覧プルダウンメニューにJpegやpngと並びWebpも採用。Photoshopで手軽にWebp変換できるようになりました。
PhotoshopのWebp変換手順
jpegの場合、ファイル＞別名で保存を選択する。
別名で保存画面が表示されたら、プルダウンメニューからWebpを選択し保存すれば完了。
Webpにブログの画像をすべて置き換えた結果、高速化に成功
Webpにブログの画像をすべて置き換えPageSpeed Insightsを再び実行したところ、モバイルは「59」から「85」に改善されました。
まとめ
- ブログの表示スピードは遅いよりも速い方がいい。
- 簡単にできる対策は実行するにこしたことはありません。
- Webpにデータ変換するのは比較的簡単なので実行してみましょう。
- 効果が期待できます。