CSS 스프라이트로 사이트 속도 향상

스프라이트 마스터 웹

나는이 사이트에 페이지 속도에 대해 꽤 많이 쓰고 있으며 이는 우리가 고객 사이트에 적용하는 분석 및 개선의 중요한 부분입니다. 강력한 서버로 이동하고 다음과 같은 도구를 활용하는 것 외에도 콘텐츠 전송 네트워크, 일반 웹 개발자가 사용할 수있는 다른 프로그래밍 기술이 많이 있습니다.

원래 Cascading Style Sheet의 표준은 현재 15 년이 넘었습니다. CSS는 콘텐츠와 디자인을 분리했기 때문에 웹 개발에서 중요한 발전이었습니다. 이 블로그와 다른 것을보세요. 스타일 차이의 대부분은 첨부 된 스타일 시트에 있습니다. 스타일 시트는 브라우저 내의 캐시에 로컬로 저장되기 때문에 중요합니다. 결과적으로 사람들이 귀하의 사이트를 계속 방문하므로 매번 스타일 시트를 다운로드하지 않고 페이지 콘텐츠 만 다운로드합니다.

자주 활용되지 않는 CSS 요소 중 하나는 CSS 스프라이트. 사용자가 귀하의 웹 사이트를 방문 할 때 단순히 페이지를 요청하는 것이 아니라는 것을 깨닫지 못할 수 있습니다. 그들 여러 번 요청하다… 페이지, 스타일 시트, 첨부 된 JavaScript 파일 및 각 이미지에 대한 요청. 테두리, 내비게이션 바, 배경, 버튼 등에 대한 일련의 이미지가있는 테마가있는 경우 브라우저는 웹 서버에서 한 번에 하나씩 각 이미지를 요청해야합니다. 수천 명의 방문자를 곱하면 서버에 대한 수만 개의 요청이 될 수 있습니다!

결과적으로 사이트 속도가 느려집니다. ㅏ 느린 사이트는 참여 및 전환에 극적인 영향을 미칠 수 있습니다. 당신의 청중이 만드는. 훌륭한 웹 개발자가 사용하는 전략은 모든 이미지를 단일 파일에 저장하는 것입니다. 요정. 이제 각 파일 이미지를 요청하는 대신 단일 스프라이트 이미지에 대한 단일 요청 만 있으면됩니다!

당신은에 대해 읽을 수 있습니다 CSS Sprite가 CSS-Tricks에서 작동하는 방법 or Smashing Magazine의 CSS 스프라이트 게시하다. 내 요점은 사용 방법을 보여주는 것이 아니라 개발 팀이 사이트에 통합하도록 조언하기위한 것입니다. CSS Tricks가 제공하는 예제는 10 개의 요청이고 최대 10Kb를 추가하는 20.5 개의 이미지를 보여줍니다. 하나의 스프라이트에 모이면 1KB 인 요청 13 개! 이제 9 개 이미지에 대한 왕복 요청 및 응답 시간이 사라지고 데이터 양이 30 % 이상 감소합니다. 여기에 사이트 방문자 수를 곱하면 실제로 리소스를 줄일 수 있습니다!

글로벌 네비그리고, Apple 내비게이션 바가 좋은 예입니다. 각 버튼에는 몇 가지 상태가 있습니다. 페이지에 있든, 페이지를 벗어 났든, 버튼 위에 마우스를 올리 든 상관 없습니다. CSS는 버튼의 좌표를 정의하고 올바른 상태의 영역을 사용자 브라우저에 표시합니다. 이러한 모든 상태는 단일 그래픽으로 함께 축소되지만 스타일 시트에 지정된대로 영역별로 표시됩니다.

개발자가 도구를 좋아한다면 도구를 포함하여 도움이 될 수있는 수많은 도구가 있습니다. Compass CSS 프레임 워크, 리퀘스트리듀스 ASP.NET의 경우 CSS-스프리터 루비의 경우 CSSSprite 스크립트 Photoshop의 경우 스프라이트 패드, 스프라이트 라이트, 스프라이트 소, ZeroSprite, Project Fondue의 CSS 스프라이트 생성기, 스프라이트 마스터 웹스프라이트미 북마크릿.

스크린 샷 스프라이트 마스터 웹:
스프라이트 마스터 웹

Martech Zone 테마 전체에서 배경 이미지를 사용하지 않으므로 지금은이 기술을 배포 할 필요가 없습니다.

댓글 2

  1. 1

    잠깐… 전체 컬렉션이 "이미지"(또는 "평면")이고 각 하위 이미지 (또는 애니메이션 또는 대화식으로 변경되는 이미지의 경우 이미지 하위 그룹)가 "스프라이트"가 아닌가?

    지난번에 이런 종류의 일을 처리 한 이후로 이름이 바뀌었을 수도 있지만 Sprite가 표시되는 요소이며 가져온 빅 데이터 테이블이 아니라고 확신 할 수있었습니다.

    ( "스프라이트 테이블"… 그게 아니 었나요?)

    • 2

      우리는 두 가지 다른 이야기를 할 수 있습니다, 마크. CSS를 사용하면 기본적으로 좌표를 사용하여 표시 할 이미지 파일의 '부분'을 지정할 수 있습니다. 이를 통해 모든 이미지를 단일 '스프라이트'에 넣은 다음 CSS로 표시하려는 영역을 가리킬 수 있습니다.

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.