二十歳街道まっしぐら
お得なサイト お得なツール 小ネタ ゲーム ニュース 画像関連 動画関連 音楽関連 このブログの読者になる
TOP > スポンサー広告 > TOP > お得なツール > デザイン
タレコミNEW!! | メルマガ | お問い合わせ

★新URL:http://20kaido.com/
★新RSS:http://20kaido.com/index.rdf
いままでFC2ブログで5年間、お世話になりました。感謝です。
移転先でもよろしくお願いいたします!
二十歳街道まっしぐら(FC2ブログ時代)人気記事TOP50まとめ

スポンサーサイト このエントリーを含むはてなブックマーク あとで読む

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

エントリー詳細 --年--月--日 | スポンサー広告 > |

CSS Splite を使うとどれだけサイトが軽くなるか分かるブックマークレット「Sprite Me」 このエントリーを含むはてなブックマーク あとで読む

Sprite Me
CSS Sprite でサイトを軽くしたい

Sprite Me」はCSS Spriteでサイトがどれだけ軽くなるか教えてくれるサイトです。
サイトというよりか、ブックマークレットを用意してくれています。
ブックマークバーにいれておくと、いろんなサイトでCSS Spriteを使うとどれだけ軽くなるかを教えてくれます。

CSS Spriteとは、複数の画像を1枚の画像にしておき、CSSで区切って表示させる手法です。
Googleもこれを利用していますね。

詳しくは、CSS Spriteを活用しようを参考にしてください。

以下に、Sprite Me のブックマークレットを使ってみた様子を載せておきます。


Splite Me ブックマークレットの登録

まず「Sprite Me」にアクセスします。
Sprite Me
そして、用意されているブックマークレットをブックマークバーなどに登録しましょう。
普通にブックマークするだけでもOKです。


CSS Sprite してみる

次にCSS Spriteしたいサイトを表示させます。
先ほどブックマークしたブックマークレットをクリックしましょう。
Sprite Me
するとこのようにCSS Spriteした方がいいよって画像とそうでない画像が一覧で表示されます。

右上の「make sprite」をクリックし見ましょう。
CSS Spriteされます。

Sprite Me
CSS Spriteした結果です。
このように複数の画像が1枚の画像になりました。

どれだけ軽くなったかというと、
Sprite Me
ありゃ!?10KB重たくなってますね…。
画像はかなり高圧縮してますからね。

しかし、いままで6回も画像サーバにアクセスしていたのがたった1回で済みます。
場合によってはこちらの方が表示が速くなるということもありますね。


Googleなどは大量にサーバにアクセスされるので、
アクセス回数を減らすだけでもかなりの効果があるんでしょうね。

Sprite Me」で自分のサイトも試してみてください。




関連記事

このエントリーを含むはてなブックマーク Yahoo!ブックマークに登録 このエントリを del.icio.us に登録 このエントリをlivedoorクリップに登録 Add to Google
http://tokuna.blog40.fc2.com/tb.php/1865-7e56d79c


これなんてフォント?フォント名を当てるゲームサイト「Fonttrainer」 トップページへ戻る ウェブ上で音楽編集ができる高性能ツール「Myna」を知っておくと便利
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。