【覚書き】ブログの高速化とかナントカってのをしてみた。(7月13日追記)

20110623161600.jpg
ウェブページの高速化のために読んでおきたいサイトのまとめ』というを記事読んでて、
「確かにサイトが軽いほうがいろいろと捗るぞ!」という思いに至ったのでやってみた。


画像最適化とCSS スプライトでの画像をまとめて表示、あとCSSとJavascriptの圧縮をしてみた。
画像の最適化、要するに画像を圧縮して容量を落とすってことなんだけど、
今回は『PunyPNG』ってサイトを使ってみた。
画像の見た目が変わらず容量が40%近く落とせたりで凄い!
次にCSS スプライトに画像をまとめるっていうのをやってみたんだけど、
そもそもCSSスプライトってなんぞや!?
調べたところ画像を複数読み込んでると時間がかかるから、
一つの画像でまとめて読み込んでCSSで位置を指定して表示するんだとか。

なるほどわからん(笑)
このサイトとか読んだりしてあとから分かってきたことだけど、
小さい容量の画像をいくつも何回も読み込むより、
一つの大きい画像を1回で読み込むほうがサイトの表示が早くなるという理屈らしい。ほーう。
ということでブログのタイトルロゴや横のアイコンなどの画像をCSSスプライトに直した。
CSSスプライトジェネレーターなんて便利なものがあるんだねぇ。
おかげで仕事が早く済んだ、ばんざい!
あとはCSSやJavascriptなんかも容量を落としてやるとサイトの表示が早くなるらしい。
なのでCSS CompressorというサイトやYUI Compressorというサイトを使って圧縮!
最後に『WebWait』でサイトの表示スピードを確認。
おおお、直す前は1.5秒くらいかかってたけど0.8秒くらいに改善された!
Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少するらしいので、
これだけ早くなったら結構いい感じだよね。
まぁ、あんまりアクセスのないサイトだからそんなに関係ないかもだけど(笑)
ちなみにGoogle先生がここを直すといいよと教えてくれる『Page Speed labs』が非常に便利。
さすがGoogle先生やで・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>