Miss Simji's 空間

지정 문답?
나 이런것도 한다~~ㅋ


1. [지영언니]에 대한 첫 느낌
2000년 3월 2일인가 3일인가 동아리 방을 처음 들어갔을때를 생생히 기억하고 있다.
처음 방문하는 신입생이라고 좋아서 웃으며 반겨줬던 99학번 선배들과
그 뒤에 98학번 여자선배 두명이 멀리 서있었는데
그중 한명이 왠지 자다 일어난듯한 부시시한 표정이였는데 그분이 지영언니 ㅋㅋㅋ

2. [지영언니]를(을) 대하는 나의 자세
존중,경청 음... 그리고 높은자세? (내가 키가 좀 커서-.-ㅋ)

3. [지영언니]는(은) 이게 장점
음 잘난거? -.-

4. [지영언니]는(은) 이게 단점
본인의 생각이 너무 확고한 부분은 타인의 말을 잘 안들어주는 점?
근데 모 나도 남에말은 잘 안듣는 타입이라. 내가 그런 부분을 마주치면 (모... 내가 지지)

5. [지영언니] 때문에 일어난 재밌는 에피소드
에피소드라 기보다...
이 회사 입사 후 가장 신기했던 점은 지영언니를 매일 본다는 점.
평소 동아리 모임이나 게임오프에서 자주 못봐었는데 ㅋ.

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)

원본: http://developer.yahoo.com/performance/rules.html
이중에 웹퍼블리싱 업무에서 참고할 수 있는 것 밑줄표시 (서버쪽 빼고는 대부분이구나;)

<contents>

• Make Fewer HTTP Requests
• Reduce DNS Lookups
• Avoid Redirects
• Make Ajax Cacheable
• Post-load Components
• Preload Components
• Reduce the Number of DOM Elements
• Split Components Across Domains
• Minimize the Number of iframes
• No 404s

<sever>

• Use a Content Delivery Network
• Add an Expires or a Cache-Control Header
• Gzip Components
• Configure ETags
• Flush the Buffer Early
• Use GET for AJAX Requests

<cookie>

• Reduce Cookie Size
• Use Cookie-free Domains for Components

<css>

• Put Stylesheets at the Top
• Avoid CSS Expressions
• Make JavaScript and CSS External
• Minify JavaScript and CSS
• Choose <link> over @import
• Avoid Filters

<javascript>

• Put Scripts at the Bottom
• Make JavaScript and CSS External
• Minify JavaScript and CSS
• Remove Duplicate Scripts
• Minimize DOM Access
• Develop Smart Event Handlers

<images>

• Optimize Images
• Optimize CSS Sprites
• Don't Scale Images in HTML
• Make favicon.ico Small and Cacheable

<mobile>

• Keep Components under 25K
• Pack Components into a Multipart Document

o'relly에서 출판된 high performance web sites에 나오는 14가지 법칙.

1. HTTP  request 숫자 줄이기
2. CDN(content delivery network) 사용하기
3. Expires header 추가
4. 구성요소들 gZip으로 압축하기
5. Stylesheet를 상단에 넣기
6. Javascript를 하단에 넣기
7. Css expressions 피하기
8. Javascript와 CSS파일 외부로 빼내기
9. DNS lookups 줄이기
10. Javascript 최소화
11. Redirects 피하기
12. 중첩되는 script 없애기
13. Reconfigure or remove ETags.
14. AJAX를 캐셔블하게 만들기

영문으로 예제까지 잘 나와있는 페이지
http://stevesouders.com/hpws/

그리고 위 14가지 법칙대로 페이지가 잘 만들어져 있는지 테스트 해볼 수 있는 파이어폭스 부가기능 YSlow 다운 받는 곳. (firebug가 설치되어 있어야만 사용할 수 있다.)
http://developer.yahoo.com/yslow/

frontend engineer에게 필수 지식이라 하는데, 아직 타 업체 개발자와 협업을 하는 퍼블리셔의 입장에서는 알아도 참고 할 수 없는 부분이 많이 있다.
그리고 이것의 내용을 포함하여 더욱 잘 정리되어있는 사이트를 발견해서 상세한 설명은 올리지 않으려 한다.

그 사이트는 바로 야후개발자네트워크http://developer.yahoo.com/performance/rules.html
아마 이 책도 야후개발자가 쓴게 아닐까 생각이 된다.

위 사이트의 high performance rule은 다음 글에... ^^