「画像の適切化」「オフスクリーン画像の遅延読み込み」意味がなかった

少し意欲が出てきたのでPageSpeed Insightsに手を付けてみる。

まずは現状の計測。
25点（モバイル）。
前は80点とかいったような気がするが本当に厳しくなったものだ。

足を引っ張っている要因は、まず画像のファイルサイズ。
改善のために勧められてくるのが、次世代フォーマットでの画像配信。
試してみたが、拡張子が変わってしまうので今回はパス。
てかやってる奴いるのか。

ということで画像の最適化を。
以前全ファイルやったのだが、その後増えたファイルも有るので。
以前はPageSpeed Insightsさんがそのまま最適化された画像を配ってくれたのだが、
いつの間にかその機能がなくなっているので残念。
検索すると、どこのサイトも次世代フォーマットのことばかり書いているので
すこし古いサイトへ。できれば一括で変換してくれる方が良い。
ということでこちらのサイトへのガイドを発見。
https://tinypng.com/
だいぶサイズは小さくなった。

早速ファイルを置き換えてPageSpeed Insightsで再度計測してみると・・・・

23点？！

なんと点数が下がってしまった。
しかも最適化したのに「まだ減らせるだろ？」とさらなるダイエットを求めてくる鬼畜生。

これ以上はどうにもならないので、
もう一つの要因、オフスクリーン画像の遅延読み込みを試す。

lazysizes.jsは以前から入れていたのだが、ちゃんと機能していなかったので設定。
ヘッダでjsを読み込んで、
imgのclass にlazyloadを読み込むのと、srcをdata-srcに書き換えるだけ。
だけというが、一つ一つのimgで書き換えていくのはすこしめんどい。
一括置換もできないので。

一通り設定してUP。
そしてスコアを見てみると・・・

25点。
色々やってもとに戻っただけ。
しかもPCのスコアは少し下がっている。
なんだこれ。

速度インデックスやCPUの初回アイドル、
インタラクティブになるまでの時間で
惨憺たる赤字が並んでいるが、
改善できる項目は、もはやない。
次世代フォーマット～などをやっても雀の涙に過ぎない。


25点で手詰まり。
無料のFC2HPではこの程度で限界か。