画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webパフォーマンスについて
これは、HTML5 Advent Calendar 2014の7日目のエントリーとして書いております。 2008年4月1日に初版が発行された、オライリー・ジャパンの「ハイパフォーマンスWebサイト」を未だに参考にされている方は多いと思います。 ウェブページ内で、背景やボタン、ナビゲーションバー、リンクなどで多数の画像を使う場合は、CSSスプライトを使うのがエレガントな解決策です。そうすることで、マークアップが整理され、扱うべき画像の数も減り、レスポンスも高速になります。 ― 「ハイパフォーマンスWebサイト 高速サイトを実現する14のルール」 Steve Souders著 その部分を参照されてか、時折、「CSSスプライトを使うことで、HTTPリクエスト数が削減されて、高速化に繋がる」と書かれている方をお見受けします。 しかし、それは本当なのでしょうか? そこで、今回、本当に効果があるのかど
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スプライト）として読み込んでいる。この場合、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
