웹 사이트 성능 향상

[웹 사이트 속도 향상 베스트 프랙티스 10] 자바스크립트 CSS 크기 줄이기

http://developer.yahoo.com/performance/rules.html#minify Minify JavaScript and CSS tag: javascript, css 크기줄이기는 로드 타임을 향상시키기 위해 코드에서 불필요한 문자를 제거하여 그 파일 크기를 줄이는 방법이다. 코드를 최소화하면 모든 주석이 제거되고 불필요한 공백(스페이스, 새줄, 탭)등이 제거된다. 그렇게 하면 자바스크립트의 경우 다운로드 할 파일 크기가

DNS 룩업

[웹 사이트 속도 향상 베스트 프랙티스 9] DNS 룩업 줄이기

http://developer.yahoo.com/performance/rules.html#dns_lookups Reduce DNS Lookups tag: content 도메인 네임 시스템(DNS)는 호스트네임을 IP 주소로 맵핑한다. 마치 전화부에서 사람의 이름을 그 사람의 전화번호로 맵핑하는 것처럼. http://www.yahoo.com을 브라우저에 입력하면, 브라우저에 연결된 DNS 리졸버(resolver) 해당 서버의 IP 주소를 룩업한다. DNS는 비용이

웹 사이트 성능 향상

[웹 사이트 속도 향상 베스트 프랙티스 8] 자바스크립트와 CSS 외부화하기

http://developer.yahoo.com/performance/rules.html#external Make JavaScript and CSS External tag: javascript, css 많은 성능관련 규칙들이 어떻게 관리중인 컴포넌트들을 외부화 하는지를 다루고 있다. 하지만, 그 전에 보다 기본적인 질문에대해 생각해봐야 한다. 자바스크립트와 CSS는 외부 파일에 들어있어야 하는가 아니면 페이지 자체에 포함되어 있어야 하는가? 실제로는 외부 파일을 사용함으로써,

CSS expression

[웹 사이트 속도 향상 베스트 프랙티스 7] CSS expression 사용하지 않기

http://developer.yahoo.com/performance/rules.html#css_expressions Avoid CSS Expressions tag: css CSS expression은 CSS 속성을 동적으로 설정할 수 있는 강력(하면서도 위험)한 방법이다. IE 버전5 부터 지원되기 시작했다. 예를 들어, CSS 표현식을 사용하여 배경 색을 매 시마다 다르게 설정할 수 있다.

웹 사이트 성능 향상

[웹 사이트 속도 향상 베스트 프랙티스 6] 스크립트를 바닦에 두기

http://developer.yahoo.com/performance/rules.html#js_bottom Put Scripts at the Bottom tag: javascript 스크립트가 야기할 수 있는 문제는 병렬적인 다운로드를 막는다는 것이다. HTTP/1.1 표준은 브라우저가 호스트 이름당 두 개 이상의 컴포넌트를 병렬적으로 다운로지 하지 않도록 제안하고 있다. 만약 이미지를 여러 호스트 이름에서 제공한다면, 병렬적으로 두

head

[웹 사이트 속도 향상 베스트 프랙티스 5] 스타일시트를 HEAD에 넣기

http://developer.yahoo.com/performance/rules.html#css_top Put Stylesheets at the Top tag: css 야후에서 성능 조사를 하는 동안, 스타일 시트를 문서의 HEAD로 옮기는 것이 페이지 로딩을 더 빠르게 해준다는 것을 발견했다. 스타일 시트를 HEAD에 놓음으로써, 페이지 랜더링이 더 빨라지기 때문이다. 성능을 고려하는 화면 엔지니어는 페이지 로딩이 빨라지길

gzip

[웹 사이트 속도 향상 베스트 프랙티스 4] 컴포넌트 압축하기(Gzip Components)

http://developer.yahoo.com/performance/rules.html#gzip Gzip Components tag: server HTTP 요청과 응답을 네트워크로 전송하는데 걸리는 시간을 화면 개발자들과의 논의를 통해 극적으로 줄일 수 있다. 물론 최종 사용자의 인터넷 속도는 개발 팀과 관계없는 인터넷 서비스 제공처와 접근하려는 곳과의 거리에 따라 달라지기는 한다. 하지만 그 외밖에도 응답 시간에 영향을

웹 사이트 성능 향상

[웹 사이트 속도 향상 베스트 프랙티스 3] Expires 또는 Cache-Control 헤더 추가하기

http://developer.yahoo.com/performance/rules.html#expires Add an Expires or a Cache-Control Header tag: server 이 규칙에는 두 가지가 있다. * 정적 컴포넌트인 경우: 아주 긴 시간으로 Expires 헤더를 설정하여 “Neber expire” 정책을 구현한다. * 동적 컴포넌트인 경우: 적절한 Cache-Control 헤더를 사용하여 브라우저를 도와준다. 웹 페이지 디자인은 점점

웹 개발

[웹 사이트 속도 향상 베스트 프랙티스 1] HTTP 요청 최소화 하기

참조: http://developer.yahoo.com/performance/rules.html#num_http HTTP 요청 최소화하기(Minimize HTTP Requests) tag: content 사용자 응답 시간 중 80%가 브라우저 단(front-end)에서 소요된다. 이 시간 중 대부분이 페이지의 모든 컴포넌트들(이미지, 스타일시트, 스크립트, 플래시 등)을 다운로드 하는데 소요된다. 컴포넌트의 갯수를 줄이면 페이지를 랜더링하는데