CSSスプリットでWEBサイトのリクエスト数を減らし高速にする
PR
WEBサイトは表示速度を常に考えてやらなくてはいけません
さらにSEO的にも必要な項目です
CSS内の画像を一つの画像にして CSSスプリットにすることで
画像の容量も減らし、リクエスト数を減らすことでサイトの表示速度の向上に役立ちます
リクエスト数とは
例えるなら、6台のトラックがあって
それが行ったり来たりして荷物を運ぶ状態とします
6つの荷物が6つの出発点から出発するなら同時進行が出来ます
でもこれが増えていくと、待の荷物が出てきます
待が少なくなればなるほど、早く終わります
WEBページでもリクエスト数の上限があり、ここで言うトラックの最大の数です
できるだけ1回の配送だけで全てが運べれたら楽ですよね
CSSスプリットはその役目をやってくれます
荷物を一つの拠点にまとめる＝CSS画像をまとめる
複数の荷物を一つの包装にして、重さを減らす＝画像をまとめて重さを減らす
このような作用があります。
こうすることで、リクエスト数を減らし
速度を早くします
リクエスト数を減らすことはとてもメリットのあることなのです
CSSスプリットを作って使う
CSSスプリットを作るにはツールを使うのが簡単です
手作業で、ペイント系のソフトで作ることも出来ます
原理は画像をまとめてbackgroundで画像を読み込んで、background-positionを使って座標で指定することで
その対象の画像を表示するというものです
こちらのサイトを使うのがオススメです
CSSのコードも一緒に表示されるので便利
http://ja.spritegen.website-performance.org/
PR
短縮URL:
COMMENT