ブログTOPページの軽量化と横幅を修正してみた。

1月にブログのデザインをグレー基調から白へ変更しました。

かれこれ半年くらい経ちましたが、慣れるとやはり白地の方が読みやすい気がします。
アレコレ文章を書くとなると見た目は重要ですね。

そして、ブログといえばTOPページがメインになります。
見せたい各記事も重要ですが、TOPページはブログの顔ですので最重要ページになると思います。

今回は、以前から少し気になっていたTOPページの読み込みを早くするために少々軽量化してみました。
具体的には画像を少し小さくしたり、画像の圧縮率を上げてみたりしました。

1番上のバナーなどは半分くらいのファイル容量に抑えてみました。
100kbほどの画像が半分の50kbほどになると結構変わるのではないかと思います。

そもそもこれだけ圧縮できるものを今までそのまま使っていたのも問題ですが・・・。


そして、大幅に変更したのがサイトの横幅です。

以前は横幅1000pxでやっていたのですが、大幅に短くして920pxにしました。
1024×768pxの解像度に合わせていたつもりなのですが、Wordpressのプラグインが右側に表示されていて、これをあわせるとこの解像度で収まり切らなくなっていました。

ずいぶん長いこと気付かなかったのですが、iPhoneで自分のブログを見て微妙にTOPバナーが切れているのが気になって直してみました。
以前から本文の横幅がもう少し短くても良いかなと思っていたのですが、丁度良いくらいになった気がします。

今回は、以下のサイトを参考に修正してみました。

 link >>  【買いパラ】ネットショップ検索エンジン　ファイルサイズのチェック
 link >>  share web pages in simulated resolutions with simures

ファイルサイズチェックは基準が56kモデムになっていますのでちょっと現状と合わない気はしますが、目安にはなると思います。
修正したところ、読み込みが50秒を越えていたものが43秒くらいまで早くなりました。

もう1つは、web上で指定の解像度での見え方が擬似的に確認出来るサイトです。
ここであらためて1024×768pxで確認したところ、少しはみ出していました。

普段使っているモニタが1600×1200なので左右にかなり隙間が出来てしまい横幅がもったいないとつい思ってしまい、低い解像度での表示を忘れてしまっていました。
さすがに80pxもカットすると見た目の違いがすぐにわかりますが、しばらくやっていれば慣れるかなと思います。

むしろ、キュッと引き締まった感じ・・・がしなくもないです。

まだまだ直したいところや追加したいものもあったりしますがなかなか時間が無くて出来ないところです。
やり始めると夢中になってあっという間に時間が経ってしまうのが難ですが、改悪にならないようにしたいですね。