単刀直入に申し上げますと、当ブログの表示速度は遅いです。
CSSを軽くしたりサイドバー等の表示量を減らしたり…といろいろ試したのですが芳しくなく、表示速度を上げるには画像を調整するしかないかなぁ…と思い立ちました。
(現在ブログヘッダーから画像が消えているのも軽量化関連です)
個人的な好みから大きめの画像を載せておきたかったのですが、それで重くなってるんですから仕方はありません。
そこで、とある記事で写真の画質とサイズを変更し、変更前と後で読み込み速度の評価点数にどれだけ差が付くかを調べてみました。
最初は画像アップロードのやり直しが面倒だったので、フォトライフの画像編集機能を使ってアップロード済み画像のサイズを縮小して上書き…と思ったのですが、
フォトライフの編集機能では上書きができず、新規URLで保存されてしまったため、結局記事を編集して掲載画像のURLを書き換える手間は発生してしまいました。
何故か画像サイズも1.5倍ほどに膨らんでしまったため、フォトライフの機能を使ったサイズ縮小は中止。
フォトライフのアップロード設定を変更したうえで、画像のアップロードをやり直すことにしました。
今までは画像を長辺1920px、画質100%でアップロードする設定になっていました。
その時の読み込み速度(PageSpeed Insightsによる)がこちら。
スマホ表示は問題ないのですが、PC表示で「51」の数字が出ています。判定は「Low」。
この後、アップロード設定を長辺1280px、画質60%に変更して画像を再アップロード。
フォトライフで事前に比較テストをしていた際、画質は60%と100%くらいまでなら殆ど見た目の差(荒れ)が出ませんでした。なので画質は60%。
PC表示の数字が「68」に、判定が「Medium」になりました。
画像1枚の記事でも17点の上昇…となると画像の多い記事では効果はあまり出なさそうな気もしますが、これからしばらくかけて、画像量が多い記事を優先的に画像サイズの変更を行うことにします。
長辺1920pxが1280pxになったところでそこまで露骨にディテールが落ちたりはしない…と思うので、ご了承いただければと思います。
(といっても、今まで当ブログでどれだけの人が長辺1920pxの写真で得をしていたのかは分かりませんが)
