여러 페이지 CSS를 단일 파일로 결합

Question

전체 사이트의 모든 CSS를 단일 파일로 결합하면 어떨까요? 브라우저에 의해 캐시되거나 새 페이지가 열릴 때마다 다시로드됩니다. 하나의 CSS 파일에 서로 다른 값이 포함되어 있습니다. CSS를 다른 페이지로 나누거나 하나의 파일로 유지해야합니까?

Answer 1

일반적으로 CSS를 하나의 파일로 결합하는 것은 프로덕션 서버에서 좋은 방법입니다. 단일 파일은 필요한 HTTP 요청 수를 줄이고 두 경우 모두 (단일 또는 다중 파일) 캐싱이 사용됩니다.

적은 수의 HTTP 요청의 이점은 최초 방문자의 경우 가장 좋습니다.

또한 파일이 캐시 된 이후 페이지에 필요한 요청 수를 줄입니다. (현재 페이지에서 사용되지 않는 부분이 낭비되는 경우 css를 미리로드하는 것으로 생각하십시오.)

Answer 2

대부분의 제정신 브라우저는 CSS 파일을 캐시하므로 파일을 하나의 파일로 압축하면 약간의 도움이됩니다. 요청 시간. 그러나 유지 보수성 또한 문제입니다. CSS 코드가 모두 단일 파일에있을 때 CSS 코드를 유지하는 데 어려움이 있다면 별도의 파일을 계속 사용하고 싶을 수 있습니다.

결국 무엇이 가장 좋을 지간에 그것은 결국 당신에게 달려 있습니다.

Answer 3

하나의 파일을 가지고있는 것이 좋습니다. 페이지로드 시간에 영향을 줄 수있는 파일 크기도 확인하십시오. 모든 브라우저는 css 파일을 잡습니다. 다음에는 새로운 것을로드하지 않습니다.

여기에 yahoo info을 사용하십시오.

Answer 4

CSS 파일을 하나로 결합하면 성능이 향상됩니다. FireFox의 FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843)에서 이것을 비교할 수 있습니다. 당신이 ScriptReferenceProfiler를 보라 asp.net을 사용하는 경우 다운로드 한 자원의 목록을 보여줍니다

가, 이들은 성능을 향상시키기 위해 결합 될 수있다 : 참조 블로그 : http://blogs.msdn.com/mikeormond/archive/2008/06/26/asp-net-ajax-scriptreferenceprofiler.aspx

Answer 5

예 파일이 결합 된 아마도 더 나은하지만 올바른 헤더가 설정된 경우에만 캐시됩니다. 나는 YSlow (또는 Page Speed)를 다운로드하여 귀하의 페이지를 분석하고 속도가 어떻게 느린지를 보여주고 개선 방법에 대한 조언을하는 방화 광물에 대한 플러그인을 제안합니다.

http://developer.yahoo.com/yslow/

또한 파일을 결합뿐만 아니라 CSS 코드를 압축하기 위해 YUI 툴킷에서와 같은 CSS를 축약 도구 봐.

http://developer.yahoo.com/yui/compressor/