http://developer.yahoo.com/performance/rules.html#external

Make JavaScript and CSS External

tag: javascript, css

많은 성능관련 규칙들이 어떻게 관리중인 컴포넌트들을 외부화 하는지를 다루고 있다. 하지만, 그 전에 보다 기본적인 질문에대해 생각해봐야 한다. 자바스크립트와 CSS는 외부 파일에 들어있어야 하는가 아니면 페이지 자체에 포함되어 있어야 하는가?

실제로는 외부 파일을 사용함으로써, 브라우저가 자바스크립트와 CSS를 캐시하여 페이지 로딩 속도를 향상시킬 수 있다. HTML 문서에 들어있는 자바스크립트와 CSS는 매번 HTML 문서를 요청받을 때마다 다운로드 된다. 이렇게 하면 필요한 HTTP 요청을 줄일 수 있기는 하지만, HTML 문서 크기를 증가시킨다. 반면에, 만약 자바스크립트와 CSS를 외부 파일로 두고 브라우저가 캐시할 수 있게 하면 HTML 문서 사이즈도 줄이고 HTTP 요청 수의 증가도 없다.

그렇다면, 중요한 것은 요청되는 HTML 문서의 양에 비해 상대적으로 캐시 해야하는 자바스크립트와 CSS 컴포넌트 빈도이다. 수치화하기 어려울 수 있지만, 이 요소는 다양한 척도를 통해 계산할 수 있다. 만약 사이트의 사용자가 세션 당 여러 페이지를 요청하고 페이지의 대부분에서 동일한 스크립트와 스타일시트를 재사용한다면, 외부 파일 캐시를 통해 얻을 수 있는 잠재적인 장점이 더 크다.

대부분의 웹 사이트는 이러한 척도 중간에 놓여있다. 그러한 사이트에서 최선은 선택은 보통 자바스크립트와 CSS를 외부 파일로 배포하는 것이다. 페이지에 포함시키는 것이 더 좋을 수 있는 예외로 야후의 첫 페이지와 마이 야후 같은 홈 페이지가 있다. 홈 페이지는 세션당 페이지 뷰가 거의 없다. (대부분 하나다) 따라서 자바스크립트와 CSS를 페이지에 포함시키는 것이 최종 사용자 응답 시간을 줄일 수 있다.

여러 페이지 뷰로 연결되는 첫 페이지의 경우, 외부 파일을 통해 캐시 장점을 이용하는 것 말고도 HTTP 요청을 줄이는 기술들이 있다. 그런 기술 중 하나가 자바스크립트와 CSS를 첫 페이지에 두지만, 외부 파일을 페이지 로딩이 끝난 뒤에 동적으로 다운로드하는 것이다. 그 다음 연쇄적으로 호출되는 페이지들은 이미 브라우저의 캐시된 외부 파일을 참조할 것이다.