css_sprites 독인가? 약인가

CSS Sprites 독인가? 약인가? 박상혁

12.12.03

이 발표자료에는

간접광고가 포함되어 있습니다.

여러 개의 이미지를

하나의 이미지 plate에 모아

CSS에서 배경이미지로 처리해

특정 부분만 보여주는 방법

응답속도를 빠르게 하는 점

Yslow

Page Speed

Steve Sauders

웹 접근성 준수가 어려운 점

Image Defect

대체 텍스트를 보여줘~

CSS Sprites 쓰면 응답속도는 빠르지만

웹 접근성 준수가 어렵다.

CSS Sprites 코딩 방법이 여러 가지던데?

얼마나 빨라져요?

어떤 지침을 준수하기 어렵나요?

두 마리 토끼를 잡을 수 없나요?

CSS Sprites 파헤치기

배경 처리한 Element에 CSS의 Text-indent나 line-height 속성을 이용하여 Inner-text의 내용을 Viewport 밖에 위치하도록 하는 방법

Overlay

Void Element에 CSS background-image 속성을 적용하여 Sprites을 구현하는 방법.

Letter blow

배경 처리한 Element의 descendant-node Inner-text에 blind 관련 속성을 부여하여 해당 텍스트를 화면에서 보이지 않도록 하는 방법

Vanish

Overlay

<a href=”#”>질문<span></span></a>

a{display:block;overflow:hidden;position:relative;width:26px;height:16px}

a span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

<a href=”#”>질문<img src=”1x1빈이미지” width=”1” height=”1” alt=””></a>


a img{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

Overlay

<span class="btn"><button type="button"><span>버튼</span></button></span>

.btn{display:block;width:26px;height:16px;background:url(이미지) no-repeat}

button{overflow:hidden;width:26px;height:16px}

button span{position:relative;z-index:-1}

Letter blow

<a href=”#”>질문</a>

a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;text-indent:-

9999px}

a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;line-

height:999em}

<a href=“#”><span>질문</span></a>

a{display:block;width:26px;height:16px;background:이미지}

a span{position:absolute;top:0;left:-9999px}

Vanish


a{display:block;width:10px;height:10px;background:이미지} a span{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}

ETC

<h2><span></span>질문1</h2>

h2 span{display:inline-block;width:10px;height:10px;background:이미지}

<h2>질문1</h2>

h2{padding-left:10px;background:이미지}

ETC

<p>질문1<span>new</span></p>

p span{display:inline-block;width:10px;height:10px;background:이미지;text-indent:-9000px}

<p>질문1<span>new<span></span></span></p>

p span{display:inline-block;overflow:hidden;position:relative;width:26px;height:16px} p span span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

Image Defect CSS Defect 스크린 리더

(센스리더) 고대비 키보드 네비게이팅 인쇄

대체텍스트가 일부

만 보일 수 있음 정상 정상(질문링크)


만 보일 수 있음

포커스 확인 불가

(꼼수) 불가


만 보일 수 있음 정상 ??(질문그래픽링크)




(꼼수) 불가




<a href=”#”>질문<img src=”1x1빈이미지” width=”1” height=”1” alt=””></a>


a img{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}

Overlay



대체텍스트 확인 불

가 정상 정상(질문링크)


가 정상 불가

<a href=”#”>질문</a>

a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;text-indent:-

9999px}

a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;line-

height:999em}

Letter blow


(센스리더) 고대비(XP) 키보드 네비게이팅 인쇄


가 정상 정상(질문링크)


가 정상 불가

Vanish


a{display:block;width:10px;height:10px;background:이미지} a span{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}

접근성

Overlay Letter Blow Vanish

Image Defect 대체텍스트가 일부만 보임 대체텍스트 확인 불가 대체텍스트 확인 불가

CSS Defect 정상 정상 정상

스크린 리더 정상 정상 정상

고대비(XP) 대체텍스트가 일부만 보임

(IE6은 +2) 대체텍스트 확인 불가 대체텍스트 확인 불가

키보드 네비게이팅 outline 표시 안됨 (꼼수) 정상 정상

인쇄 불가 (사용자 설정 변경 필요)

Overlay 방식이 그나마 나은 방법

Image defect, 고대비(XP), outline을 해결하면

완벽해!!

http://me2.do/line





a {display:block;overflow:hidden;position:relative;width:26px;height:16px; font-size:12px;

margin:-1px;padding:1px; /* outline 일부 노출 */

_font-size:10px; /* ie6 고대비 글자 강제 키움 대비 */

}

a span{position:absolute;top:1px;left:1px;width:26px;height:16px;background:이미지}



대체텍스트가 길면

일부만 보임 정상 정상

대체텍스트가 길면

일부만 보임 일부 노출 가능

배경이미지 체크 안

내


a {display:block;overflow:hidden;position:relative;width:26px;height:16px; font-size:12px;

margin:-1px;padding:1px; /* outline 일부 노출 */

_font-size:10px; /* ie6 고대비 글자 강제 키움 대비 */

}

a span{position:absolute;top:1px;left:1px;width:26px;height:16px;background:이미지}




만 보일 수 있음 정상 정상




(꼼수) 불가

Overlay 방식으로 하고

대체텍스트를 width에 맞춰서 짧게…^^

좋은 방법 있으면 소개해주세요

http://me2.do/line

기본 테스트

N사 사내 네트워크

우리집(100M 광랜)

Windowx XP SP3 / Intenet Explorer 6.0 HttpWatch Professional 6.1 10회 평균 (초기접속기준)

기본 테스트

Type

request time(s) time(s)

Normal Sprites Normal Sprites Normal Sprites

Total 17 2 0.078 0.050 0.317 0.155

• 테스트 결과와 같이 페이지 로딩 시간이 약 15~20% 향상 되는 것으로 확인 되었습니다.

• 서버 요청 1건당 요청 헤더 파일의 크기는 약 300bytes 로 요청 수를 줄이는 것만으로도 성능이 향상

되는 것을 확인 할 수 있습니다.

• CSS 파일의 용량은 약 2,000 bytes 늘어났지만 속도는 향상된 것으로 보아 CSS 파일의 용량 증가보다

는 요청 수를 줄이는 것이 성능에 더 큰 영향을 미치는 것으로 확인 되었습니다.

• 네트워크의 속도가 느릴수록 성능 향상을 명확히 확인 할 수 있었습니다.

심화 테스트

네트워크 환경은 100Mbps급 회선과 20ms의 지연을 발생시켜 만든 2Mbps급 회선을 사용했다.

클라이언트는 고 성능의 PC(i5_760 CPU, 4G Memory, Windows 7, IE8, no cache)와

저 성능의 PC(p4 2.8Ghz CPU, 1G Memory, Windows XP SP3, IE7, no-cache ) 2대를 기준으로 실험했다.

파일 크기가 동일하고 파일 요청 수만 변경한 경우

파일 요청 수가 동일하고 파일 크기만 변경한 경우

10 requests 20 requests 40 requests 80 requests

200kb 20kb * 10개 10kb * 20개 5kb *40개 2.5kb * 80개

400kb 40kb * 10개 20kb * 20개 10kb * 40개 5kb * 80개

100kb 200kb 400kb 800kb

20 requests 5kb * 20개 10kb * 20개 20kb *20개 40kb *20개

40 requests 2.5kb * 40개 5kb * 40개 10kb * 40개 20kb * 40개

심화 테스트

-

2,000

4,000

6,000

8,000

10,000

12,000

14,000

r80 r40 r20 r10

용량 동일(200k), 리퀘스트 다를 때 - 100 - 1

용량 동일(200k), 리퀘스트 다를 때 - 2 - 1

용량 동일(400k), 리퀘스트 다를 때 - 100 - 1


100M

bps 2Mbps

100M

bps

2Mbp

s

100Mb

ps

2Mbp

s

100M

bps

2Mbp

s

200kb 163 4,041 104 2,694 74 2,778 69 2,188

400kb 152 4,218 102 3,694 110 3,369 84 2,982


파일 크기 동일하고 파일 요청 수를 변경했을 때 고성능 PC의 onload 발생시간

빠른 회선(100Mbps)과 느린 회선(2Mbps)

모두 파일 요청수가 작아질수록 onload 이벤

트 발생 시간이 단축된다.

80개의 파일 요청 수를 10개로 줄이면

onload 이벤트 발생 시간을 약 50% 줄일 수

있다.

심화 테스트


파일 크기 동일하고 파일 요청 수를 변경했을 때 저성능 PC의 onload 발생시간

빠른 회선(100Mbps)과 느린회선(2Mbps) 모

두 파일 요청수가 작아질수록 onload 이벤트

발생 시간이 단축된다.

고성능 PC에 비해 약 30% 더 단축효과가 있

다. 특이한 점은 파일 요청 수를 80개에서 40개

로 줄이면 단축률은 50% 인데 20개에서 10개

로 줄이면 10% 밖에 되지 않는다.

100M

bps 2Mbps

100M

bps

2Mbp

s

100Mb

ps

2Mbp

s

100M

bps

2Mbp

s

200kb 687 10,732 359 5,924 248 3,885 196 3,544

400kb 757 12,455 415 7,143 274 5,082 228 4,493

-

2,000

4,000

6,000

8,000

10,000

12,000

14,000

r80 r40 r20 r10

용량 동일(200k), 리퀘스트 다를 때 - 100 - 1


용량 동일(400k), 리퀘스트 다를 때 - 100 - 1


심화 테스트

다운로드하는 파일 크기가 작아질수록

onload 이벤트 발생 시간이 단축된다.

100M

bps 2Mbps

100M

bps

2Mbp

s

100Mb

ps

2Mbp

s

100M

bps

2Mbp

s

20 requests 251 5,089 85 3,576 71 2,817 72 1,989

40 requests 108 3,754 107 3,549 101 2,897 115 2,409

800kb 400kb 200kb 100kb

(1,000)

4,000

9,000

14,000

800k 400k 200k 100k

리퀘스트 고정(20), 용량이 다를때 - 100 - 1




파일 요청 수가 동일하고 파일 크기를 변경했을 때 고성능 PC의 onload 발생시간

심화 테스트

느린회선(2Mbps)은 다운로드 하는 파일 크

기가 작아질수록 onload 이벤트 발생 시간이

단축된다.

특이한 점은 동일한 크기의 파일을 다운로드

하더라도 파일 요청 수가 적으면 onload 이

벤트 발생 시간이 더 단축된다는 사실이다.

800kb 400kb 200kb 100kb

파일 요청 수가 동일하고 파일 크기를 변경했을 때 저성능 PC의 onload 발생시간

100M

bps 2Mbps

100M

bps

2Mbp

s

100Mb

ps 2Mps

100M

bps

2Mbp

s

20 requests 392 7,341 273 5,140 247 4,922 244 3,505

40 requests 348 7,260 413 7,078 362 6,044 340 5,796

(1,000)

4,000

9,000

14,000

800k 400k 200k 100k





• 파일 크기를 줄이는 것과 파일 요청 수를 줄이는 것 모두 성

능 개선 효과가 있다.

• 파일 요청 수를 줄이는 것은 모든 환경에서 성능 개선 효과

가 있고 특히 저성능 PC, 느린 네트워크 환경에서 성능 개

선 효과가 더 좋다.

• 파일 크기를 줄이는 것은 PC 성능과 네트워크 속도의 조합

에 따라 성능 개선 효과가 다르다.

• 개선 전 이미지 요청 수가 많고 적음에 따라 성능 개선 차이

가 크다.

성능, 접근성

두 마리 토끼를 잡는 건 힘들다.

http://me2.do/line

필요한 부분에 적절히 사용하는 것만으로는

응답속도 개선 효과는 글쎄…

어설프게 적용하면…

정보를 포함하지 않은 이미지만

배경이미지로 처리하는 것이 Best Practice !!

HiveLab에서 식구 찾아요~

JOBKOREA에서 HiveLab으로 검색하시거나

2부에 물어보세요…

㈜Hivelab 웹표준개발팀 박상혁

[email protected]

Facebook : parkbur

Me2day : bur

감사합니다.

mailto:[email protected]

css_sprites 독인가? 약인가

Documents