Yslow성능 향상 Tip

Chapter 01. HTTP 요청을 줄여라

1. 이미지 맵(Image map)

이미지 맵 을 이용하면 웹 페이지 UI 변경 없이 HTTP 요청 수를 줄일 수 있다. 그 이유는 한 개의 이미지로 여러 개의 URL 을 연결 할 수 있기 때문이다. 이미지 맵을 사용하면 장점으로는 보통 50% 빠른 속도를 보이는데, 단점으로는 클라이언트 측 맵으로 코드를 작성 할 경우 맵의 영역 좌표를 수동으로 하는 경우 지루하고 실수하기 쉽다. 그리고 네모가 아닌 다른 모양을 만드는 것을 거의 불가능하며 연속적인 이미지여야 하는 안 좋은 점이 있다.

2. CSS Sprite

CSS Sprite 는 이미지 맵처럼 여러 이미지를 결합할 수 있지만 이미지 맵보다 훨씬 유연하다. 보통 CSS 의 background-position 속성을 이용해서 배경으로 사용할 부분을 잘라서 위치시킨다. 역시 분리된 이미지를 사용할 때보다 50% 빠르고 다운로드 크기가 줄어들 수 있으며(합쳐진 이미지가 컬러테이블이나 포맷정보를 하나로 가지고 있기 때문), 이미지 맵처럼 연속적인 이미지여야 한다는 제약사항도 없는 장점이 있다.

3. 인라인이미지

data:라는 URL 스키마를 이용함으로써 어떤 추가적인 HTTP 요청 없이 웹 페이지 안에 이미지를 포함할 수 있다. data:[][;base64], 처럼 데이터를 첨부할 수 있으며 SCRIPT나 A 태그와 같이 URL을 지정하는 모든 곳에 사용할 수 있다. 단점은 IE 지원이 안된다는 것과 크기에 제한이 있고 base64로 인코딩을 하게 되면 이미지 크기가 커진다. data:를 사용하는 좋은 방법으로는 CSS를 이용해서 배경으로 인라인 이미지를 사용하는 것이다.

4. 스크립트와 스타일시트의 결합

가장 이상적인 상황은 각 페이지에 하나의 스크립트와 한 개의 스타일시트가 있는 것이다. 그러나 현실은 모듈 방식의 코드를 사용하기 때문에 자바스크립트 파일을 모듈화하여 여러 파일로 나누어 놓되 이렇게 모듈화된 스크립트 파일을 사용하는 페이지에 맞게 재구성하는 빌드 과정을 두는 것이다.

Chapter02. 콘텐츠 전송 네트워크를 이용하라.

CDN을 이용하라

서비스의 이용자가 늘게 되어 서버를 증설하게 되면 서버의 콘텐츠를 지리적으로 분산된 여러 개의 서버에 나누어 놓아야 할 필요가 생긴다. 콘텐츠를 지리적으로 분산시킬 때 먼저 웹 애플리케이션을을 분산 구조에 맞게 재설계하는 작업을 피하고, 웹 페이지 구성요소가 저장되어 있는 웹 서버를 먼저 분산시켜 놓는 것이 더 좋은 선택일 수 있고 이는 CDN(Contents Delivery Network)를 이용하면 더 쉽게 구현할 수 있다. CDN은 사용자에게 효율적으로 콘텐츠를 전달하기 위해서 여러 지역에 웹 서버를 분산시켜 놓는 기술인다. 이는 응답시간을 줄이며, 백업, 저장용량의 확대, 캐싱기능을 갖고 이미지, 스크립트, 스타일시트, 플래시와 같은 정적 콘텐츠를 전달할 때 이용된다. 대신에 조심해야 할 점으로는 HTTP 리다이렉트를 이용해 로컬 서버를 이용하도록 하는 방식의 CDN은 일단 조심하는 것이 좋다. 웹 페이지를 느리게 하는 원인이 되기 때문이다. 또한 단점으로는 다른 웹 사이트의 트래픽에 내 사이트가 영향을 받을 수 있다는 점, 콘텐츠를 담고 있는 서버를 직접적으로 제어하지 못해 가끔 불편한 점이 있다. 결론 : CDN을 실 서비스에 적용했을 때 야후쇼핑 사이트의 응답 시간은 전체적으로 20%가 향상되었다. 단지 정적인 구성요소를 CDN으로 옮겼을 뿐인데 말이다.

Chapter03. 헤더에 만료기간을 추가하라

사이트에 처음 방문한 사용자일 경우 여러 번의 HTTP 요청을 하게 될지도 모르지만 헤더 만료기한(Expires)을 이용함으로써 그 구성요소를 캐시에 저장할 수 있다.

1.헤더의 만료기간

브라우저 캐시를 이용하여 HTTP의 요청 수를 줄일 수 있다. Expires헤더에서 지정한 시간 이후에는 해당 응답의 내용이 더 이상 유효하지 않다는 것이다.

2. max-age 와 mod_expires 속성

Expires는 지정된 날짜를 이용하기 때문에 서버와 클라이언트가 시간을 맞추어 사용해야며 만료일에 대해 갱신해야 한다는 단점이 있다. 그리하여 HTTP/1.1 에서 소개된 Cache-Control은 Expires 의 한계를 보완하고자 max-age 속성을 설정하여 얼마 동안 캐시에 보관할지를 설정한다. 하지만 HTTP/1.1 을 지원하지 않는 브라우저에서는 Expires를 사용해야 하는데 기존의 단점이 문제가 된다. 그 단점을 보완하고자 아파치에서 mod_expires 라는 모듈을 제공하고 있고 이 기능은 Expires 를 max-age 와 비슷하게 상대적인 시간으로 지정할 수 있게 해 준다. 둘 다 설정되어 있을 경우 우선순위는 Cache-Control 이 높으며 시간을 재설정하는 수고를 덜 수 있을 것이다.

3. 빈 캐시와 꽉 찬 캐시

서비스의 형태와 함께 PV, UV 를 고려하여 Expires를 생각하여야 한다.

4. 이미지 그 이상으로

헤더의 Expires는 이미지에 보통 사용하지만 이미지에 국한되어서는 최고의 성능을 발휘할 수 없다. 헤더의 Expires 속성은 스크립트나 스타일시트, 플래시와 같이 자주 변하지 않는 것에도 포함시켜야 한다.

5. 파일 이름의 활용

Expires가 설정된 상태에서 서버의 구성요소를 변경하였을 경우 사용자가 최신 정보를 받아보기 위해서 가장 좋은 방법은 구성요소의 주소를 변경하는 것이다. 그렇게 해서 서버로부터 완전히 새로운 구성요소를 로드하게 만드는 것이다.(ex.구성요소의 파일에 버전을 붙임)

CSS Naming

Layout

Id는 레이아웃의 용도 이외에는 사용을 제한합니다. 단, js동작과 관계된 경우 신중히 선택적으로 사용할 수 있습니다.

CSS 예약어

• 팝업: #pop_
• GNB: #gnb
• 레이어: #layer_
• 버튼: .bt_
• 아이콘: .ic_
• 탭: .tab_
• 테이블: .tb_
• 검색: .sch_