CSS에 많은 배경 이미지가 필요하면 성능에 영향을 미칩니 까?

Question

일부 사용자는 내 사이트가 너무 느리다고보고하고 CSS의 배경 이미지가 가능한 범인 일 수 있다고 생각합니다.

사용자 정의 빌드 시스템을 사용하여 모든 CSS를 연결하고, 압축 (YUI 압축기), CSS 스프라이트를 자동으로 만들고 전체 페이지 용 9KB CSS로 구성된 사이트가 있습니다. 여기에는 백그라운드 이미지에 대한 모든 CSS가 포함됩니다. 마침내 D 그들은 약 60 세였습니다 (몇몇은 같은 스프라이트로갑니다.

브라우저의 기본 동작이 필요에 따라 (선택기와 일치 할 때) 이미지를 다운로드하거나 모두 다운로드하는지 궁금합니다.

지금 Firefox의 Firebug는 모두 다운로드되었다고 제안하는 것 같습니다. 문제를 피하거나 완화하기 위해 어떤 기술을 사용 하시겠습니까?

편집 : FireBug를 잘못 읽었습니다. 다운로드 된 이미지는 숨겨진 조명에 속하지만 배경 이미지는 DOM과 일치합니다.

Answer 1

아니요, 실제로 마크 업보다 CSS에 넣는 것이 좋습니다.

이미지 호출은 페이지를 차단하지 않으며 이미지가로드되면 페이지에 렌더링되므로 전체적으로 CSS를 통해로드하는 것이 좋습니다. 이 디자인도 더 유연하다는 것은 말할 것도 없습니다.

(각 이미지 각각은 대역폭과 추가 HTTP 요청을 취할 것입니다.)

Answer 2

기본 브라우저 동작은 한 번에 두 항목을 다운로드하는 것입니다 (예 : 2 HTTP 요청), 이미지가 많은 이미지가 있다고 생각되면 이미지와 같은 이미지에 대한 서브 도메인을 작성하는 것입니다. images.yoursite.com 그리고 당신은 병렬 요청을하는 브라우저를보기 시작하고 성능이 약간 향상되는 것을 볼 수 있습니다.

Answer 3

(측면 주제. 실제로 질문에 대답하지는 않지만 흥미 롭거나 관련이있을 수 있습니다.)

또 다른 가능한 범인은 "일부 사용자"는 항상 귀하의 사이트가 "너무 느리게"느끼게 될 것이라고 생각합니다. (아마도 그것은 스택 오버플로보다 정신적 고장일지도?이 사용자들은 빠른 사이트라고 생각 하는가? 예제를 제시 할 수 있습니까? 연결과 컴퓨터는 얼마나 빠르고, 어디에 있고 서버는 어디에 있습니까? 어디에 있습니까? 바로 그거죠 느리나요? 가입 프로세스? HD에서 비디오를보고 있습니까? 창을 스크롤 하시겠습니까? Firefox로드? 결국, 그것은 인간입니다 .. N'EST PAS?)

Answer 4

아마도 당신이 보내는 이미지를 자세히 살펴보십시오. 특히 단일 "스프라이트"이미지로 컴파일되는 많은 사람들이있는 경우.

일어날 수있는 일은 당신이 가리키는 이미지가 매우 크다는 것입니다. 물론, 한 번만로드해야하지만 (스프라이트 방법의 이점) 수백 KB라면 확실히 성능 문제가 발생할 수 있습니다.

Answer 5

성능 최적화에 대한 유용한 정보를 제공하는 Yslow라는 멋진 Firefox 플러그인이 있습니다. 그것은 당신에게 그것이 감지 한 성능 문제를 보여주고, 개선을 제안하는 기사에 대한 링크를 제공합니다.http://developer.yahoo.com/yslow/

모범 사례에 대한 정보http://developer.yahoo.com/performance/rules.html