UI 개발자의 또다른 기술력 - 사이트 최적화(3)

사이트 최적화 방법은 크게2가지로 나뉜다고 설명드렸는데요,

• 데이터의 양을 줄이자
  
• 데이터의 요청자체를 줄인다. <이번시간에>

이번에는 '데이터의 요청자체를 줄인다.'를 설명드리고자 합니다
지난 2편에서는 데이터의 양(사이즈)을 줄이는 방법으로 압축위주로 안내를 해드린것 같은데요, 그보다 오늘말씀드리는 것이 조금더 중요할것 같습니다.

HTTP Request는 줄이는것이 목적입니다.

이미지를 하나로 합치기.(CSS Sprite)

다운로드되는 이미지의 개수 만큼의  request를 줄일 수 있는 방법은 이미지를 사용하지 않거나, 여러가지 이미지를 하나로 합치는 방법이 존재 합니다.

 CSS Sprite 기법은 이미지를 합쳐서 하나의 이미지로 만들어서, 실제 필요로 하는 부분에서는  CSS Background position 속성을 활용해서 , 합쳐진 이미지의 좌표값을 통해 표현하게 됩니다. 다시 말해 이미지의 합에서 특정 이미지만을 잘라서 보여주게 되는것이죠.

#panel1b a:hover {
    background: transparent url(test-3.jpg)
    0 -200px no-repeat;}

위의 예제는 아래 URL에 게시된 정보 인데요. 가로/세로의 위치값을 지정해줌으로써, 특정이미지를 추출해 낼 수 있습니다.

아래의  URL 을 통해서 대표적인 사용방법을 익힐 수 있습니다.

http://www.alistapart.com/articles/sprites/

그리고, 이미지를 어떻게 합치는가하는 문제가 또 있습니다.  누가 하느냐도 문제겠군요. 디자이너는 대부분 이런 작업이 어떤것인지 알고 있습니다. 포토샵으로도 가능하고요. 하지만 이것은 쉽지 않고 매우 귀찮은 방법인데요. 이런 것을 자동화 해주는 툴도 많이 공개된것 같습니다.

대표적인 툴이라고 합니다.

http://spritegen.website-performance.org/

 헤더에 만료기간을 추가.

정적인 자원들이 다시 호출되는 것을 방지하는 것은, 바로 캐쉬를 활용하는 것입니다. 

캐쉬를 활용하는 기법은 만료기간을 적절하게 표현함으로써, 다시 서버로 요청을 하여 다운로드를 하지 않는 것입니다.

크게 2가지 방법이 존재 합니다.

- Cache-control  의   max-age 속성설정

- 만료기한을 설정

이것은  HTTP/1.0 과 1.1 에서 지원하는 스펙의 차이로 인한 것인데요. 일반적으로 둘다 지정하여 사용하면 좋습니다.

몇가지 추가적인 최적화 방법을 소개 합니다.

스크립트를 외부 파일로 지정하기.

스크립트 소스와  CSS 소스를  HTML 페이지안에 인라인형태로 작성하는 경우가 있습니다.  과거에는 정말 이렇게 많이 구현하곤했었죠. 그런데 이런경우에도 장점이 있긴 합니다.

여러번의  Requset 를 일으키지 않는 다는 점입니다. 

하지만 이것은 제한적인 장점 입니다. 두번/세번 요청시에는 어떨까요?  외부파일로 지정하지 않은 탓에 캐쉬가 되지 않고 이로 인해 계속  다운로드가 발생하게 됩니다. 

물론 여러번 접속하지 않는 웹사이트의 성격이라면 인라인스크립트가 좋을 수도 있습니다.

이는 사용자패턴을 분석하여 적절히 사용하면 됩니다.

사실 인라인스크립트와 외부 스크립트 선택은, 최적화측면에서 보다는 소스의 관리 측면에서 현실세계에서는 외부스크립트가 당연시 되고 있습니다.  

 html/css/javascript 가 중복된 소스파일은 정말 끔찍한데요. 가독성 문제 뿐 아니라 파일의 버전관리도 어렵게 됩니다.

가급적 3개의 파일은 각각 존재하는 것이 유지보수 비용을 줄이는 당연한 방법인것 같습니다.

기타 이미지 최적화

이미지 최적화는 이미지 자체를 올바르게 사용함으로써, 보다 최적화된 상태의 파일을 다운로드 받도록 하는데 목적이 있습니다.

이미지의 실제 사이즈를 더 줄일 수 있는 방법도 있고요. 이런것은 자바스크립트 소스를 억지로 줄이는 것보다 비용이 훨씬 적게 듭니다. 최적화를 위해서 자바스크립트 소스를 줄이려고 소스내용을 변경하지는마세요 ^^

-  JPEG, PNG,GIF의 용도를 잘 파악하고 있으면 좋습니다.(예를들어  사진과 같은 곳에는  jpeg 이고 그래픽작업에는 png라는 점등을 이해)

-   GIF 의 애니메이션을 최적화 하는 툴도 있다고 합니다

-   JPEG 의 경우 메타데이터를제거하는 방법도 있다고 합니다.

마지막으로

최적화를 하는 방법은  Server-side 개발자 -  UI  개발자 - 디자이너 등 다양한 파트에서 각각해야할 부분이 있습니다.

하지만 최종적인 검토와 책임은   UI 개발자에게 있다고 생각됩니다. 그렇다고 이것저것 모든것을 직접 컨트롤할수는 없지만, 최소한 이런 저런부분을 분석하고 스스로 최적화된 방법을 컨설팅하는 능력이 중요합니다.

그렇지 않으면 아무도 여러분들의 1년짜리 웹사이트 개발 프로젝트의 최적화에 관심을 갖지 않을것 입니다.

더불어 사이트를 분석하고 디버깅하는 능력과 툴을 반드시 익히면 좋을것 같습니다. 툴을 사용하는데 있어서 주의할점은 절대적인 값으로 판단하지 말고 항상 상대적인 수치를 가지고 성능을 판단하는것이 좋다고 생각됩니다 ^^