[B! css][http] fukudamasa09のブックマーク

fukudamasa09 id:fukudamasa09

cssとhttpに関するfukudamasa09のブックマーク (2)

HTTPリクエストを減らすために【CSS Sprite編】スプライト地獄からの解放 - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。【序章】HTTPリクエストは甘え【CSS Sprite編】スプライト地獄からの解放【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ【DataURI編】遅延ロードでレンダリングブロックを回避【終章】我々には1000msの猶予しか残されていない 2日目は、HTTPリクエストを減らす最もポピュラーな手法、CSSスプライトについて説明する。まずは動画をご覧頂きたい。 img要素読み込み | WebPagetest Test Result CSS Sprite読み込み | WebPagetest Test Result 左が30個のアイコン画像を一つ一つimg要素として読み込んでいるのに対して、右は１つの背景画像（CSSスプライト）として読み込んでいる。この場合、
fukudamasa09 2013/08/20
performance

css

css sprite

compass

http

Sass

Maple

#201308

CSSスプライト
リンク
コードの圧縮や外部ファイル化とページの読み込み速度について
なぜ、ごちゃごちゃしてるのか？ぱっと気づくのがこの2点です。改行やスペースがほとんど使われていない CSSやJavascriptが外部化ファイル化されていない Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。コードの軽量化について HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。これは当然ですね。コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを
fukudamasa09 2012/09/04
css

HTTP

css

javascript

html

まとめ

高速化

最適化

Web制作

HTML
リンク
1