これまで記事に画像使うときは、TinyPNGで画像サイズ最適化をしてたので、
それ以上のことはまったく気にしてなかったんですが、最近以下記事をみたのです。
blog.shibayan.jp
そうです。私がやってたのは、PNGの最適化。 はてなブログだとPNGを最適化しても意味ない模様ですね。 ちゃんと確認しとけばよかったな。。。うひひ。
比較的画像を多用してる記事
「foobar2000に公開されてるSkinを適用してデザイン変更するよ - ハイレゾる」
のデータ量を確認。
画像の1つが1MBとかありえない状態になってた。
js、cssとか全部含めると大体5.9MBとすんごい状態。
(request数が多いのは、PCに入れてるkasperskyの問題)
PageSpeed Insightsの状態は、27ポイントだけでした。
画像サイズ減の作業は、
- 該当のページからPNG画像をダウンロード
- オンラインでPNGをJPGに変換で、PNGからJPEG化
- TinyPNG – Compress PNG images while preserving transparencyで、画像の最適化
を実施。これでだいたい1/4程度(240KBだと60KB程度に)のサイズ減になりました。
実施結果は以下。
サイズは、5.9MBから3.8MBに大幅減。
27ポイントから53ポイントに大幅改善。
でも、まだまだ高いポイントではないし、もう少し改善考えてみよっと。