Miss Simji's 空間

A. HTTP request 최소화 하기

웹사용자는 80%이상의 시간을 stylesheet, javascript, images, flash 등 페이지의 구성요소를 다운로드 하는데 소비한다.
구성 요소의 개수를 줄여 HTTP request 수를 줄이면 웹페이지는 빨리질 수 있다.

페이지의 디자인을 단순하게 하는 것은 request 수를 줄일 수 있는 좋은 방법이지만 디자인이 화려한 페이지에서도 request를 줄이는 방법은 몇가지 있다.

1. script를 하나의 파일에 다 넣는다던지 css를 하나의 stylesheet파일에 넣어 링크되는 파일의 수를 줄이는 방법도 좋은 방법이고 유니크한 디자인을 가지고 있는 페이지라면 style을 파일 내부(header)에 넣어 링크되는 파일수를 줄이는 것도 request 수를 줄일 수 있는 방법인다.

2. 이미지맵은 여러개 이미지를 합쳐서 사용할 수 있으니 적절한 곳에서 이미지 맵을 사용하는 것도 request를 줄이는 좋은 방법이다.

3. css로 정의하는 배경 이미지도 각각 request를 요청하기 때문에 배경 이미지를 합치는 것도 좋은 방법이다.
예를 들면 <a>의 배경에 아래 그림-A와 같이 빨간 블릿이 들어가고 마우스 오버시에 파란색 블릿이 들어간다면, 두 이미지를 따로 잘라 저장하는 대신 그림-B처럼 하나의 파일로 만들어 background-position의 속성으로 조절하여 배경을 보여주면 된다.

  
css-example>


실제 예시
http://l.yimg.com/a/i/ww/sp/trough_2.0.gif
위 이미지는 야후닷컴(http://us.yahoo.com)에서 어디에 사용될까요 ㅎㅎ

---

B. DOM엘리먼트 수 줄이기 (태그수 줄이기)

예를들어 이벤트 핸들러를 추가하여 특정 id가 있는 태그(dom element)를 찾을때 태그의 수가 500개가 있는 것과 5000개가 있는 것은 차이점이 있다.
그러므로 레이아웃을 잡을때 table보다는 div를 사용하고 되도록 디자인 때문에 발생하는 불필요한 태그를 사용을 자제하여 태그 수를 줄이는 것이 올바르다.
표준에 입각한 코딩을 하다보면 자연스럽게 줄일 수 있는 것.

---

C. iframe 되도록 사용하지 않기

아이프래임의 장점

• Helps with slow third-party content like badges and ads
• Security sandbox
• Download scripts in parallel

아이프래임의 단점

• Costly even if blank
• Blocks page onload
• Non-semantic

아이프래임은 xhtml1.0에서 표준이 아니다.
하지만 우짜노 일정 촉박하신 개발자뉨들께서 결국엔 아이프래임으로 뻥 뚫어 버리시는 걸...
내가 하는 프로젝트 특성상 외국 현지에서 유지/관리 하시는 분들의 편의성등 여러 복합적인 이유 때문에 경우에 따라 허용하고 있는 부분이다.

---

D. No 404Error page

404에러 메시지는 페이지를 찾을 수 없을 때 표시되는 메시지이다.
보통 이런 경우 사용자는 'A C~' 하며 바로 back해버리거나 다른 것을 클릭할 수 있다.
사용자는 자신히 원하는 페이지가 없어 에러페이지를 만난다면 당연히 그 페이지를 오래 마주 있을 필요가 없다.
사실 404에러 페이지가 없는 것이 속도에는 가장 좋다. 하지만 없는 페이지에 대해 아무런 알림도 없이 브라우저가 가지고 있는 오류 페이지를 떡하니 보여준다면 사용자에게 참으로 예의 없는 사이트가 아닐 수 없다.
그러므로 404에러 페이지는 최대한 간결하게, 사이트의 기본 레이아웃 끌고 올것 없이 심플한 디자인과 최소한의 DOM elements로 만들어 주는 것이 올바르다.

---

* 출처: 야후 개발자 네트워크 (http://developer.yahoo.com/performance/rules.html)