CSSスプリットでWEBサイトのリクエスト数を減らし高速にする

CSS split
このエントリーをはてなブックマークに追加
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

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)