PageSpeed Insightsの結果をWebpで改善

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にデータ変換するのは比較的簡単なので実行してみましょう。
  • 効果が期待できます。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる