ちょっと曲がった家

家づくりとその後の庭づくりや日常生活の記録

ブログの表示速度が遅すぎた

いつも拝読しているku-kaさん(id:ku-kahan)の記事を読んで、興味本位で調べてみたらうちはとんでもなく遅いことが判明しました(*_*;

ku-kaさんの記事

www.kurasitotonoe.com

ブログがメチャ重かった!

ku-kaさんの記事で紹介されていた『Page Speed Insights』というGoogleのサービスでこのブログの表示速度を調べてみたのですが…

なにかを発見したネコのイラスト

パソコンの測定結果

Paga Speed Insightsブログの表示速度の診断結果パソコン

スマホの測定結果

Paga Speed Insightsブログの表示速度の診断結果スマホ

どちらも成績悪すぎ!( ;∀;)

診断の結果

様々なチェック項目があるようなのですが、とりあえず私が理解できたのは画像データが大きすぎる事くらい(;^ω^)

Paga Speed Insightsの診断結果 改善項目

改善点まで丁寧に指摘してくれるなんて、親切すぎる( ;∀;)

Paga Speed Insightsの診断項目一覧

それにしても真っ赤っかwwここまで赤いと見事ですね(;^ω^)

ブログに載せていい画像って?

何年もブログ書いてるのに勉強不足だったのですが、ブログに載せる画像は圧縮しないといけなかったんですね(;^ω^)
私、写真を撮ってトリミングやサイズの縮小しかしてなかったんですが、更に圧縮した画像データを載せるのが正解だったみたい。。。

画像データはJPEGPNGを使い分ける

JPEGPNGの違いも知らず、ぜーんぶPNGに変換してました(汗)

  • JPEG:写真向き(ただし、保存をするたびに画像が荒れてしまう欠点あり)
  • PNG:イラストや画面ショットなど

本来は目的に応じて使い分けるのがベストらしいです(^^;

画像は記事上で縮小しない

クセというか無意識にやっていたことですが、大きな画像を記事上で縮小して貼り付けていました。
本来は記事に張り付けるサイズに加工してから、貼り付ける方が良かったみたい(^^;

640×480サイズの画像をわざわざ記事上で360×270サイズに縮小していたけど、元の画像自体を360×270サイズにして、そのまま貼り付けるのが正しい方法です(*'ω'*)

ただし、意図的にクリックして拡大して見てもらいたい画像については、大きなサイズのまま貼り付けて、記事上で縮小しています。

画像を圧縮してみたら

一気に全部やり直すのは無理ですが、ku-kaさんの記事を参考にして50ファイル分だけ圧縮した画像データを貼り直してみました(疲)

写真(640×480サイズ)のPNGファイルを圧縮したJPEGにするだけで、およそ1/10近くまでデータ容量を減らせることができました(*'ω'*)
知らなかったとはいえ、見た目同じなのにこんなに軽いなら、ひと手間かけても圧縮するべきですね。。。

パソコンの測定結果

Paga Speed Insights改善後のブログの表示速度の診断結果パソコン

スマホの測定結果

Paga Speed Insights改善後のブログの表示速度の診断結果スマホ

時間帯によって変動するのでもしかしたら誤差の範囲かもしれないんですが、パソコンの方は少し改善してて一安心(^^;

とりあえず平均目指して、コツコツがんばります。。。
画像の総数2700ファイル以上…気が遠くなりますね(*_*;