병렬 CSS 다운로드를 통한 웹 사이트 성능 향상?

웹 사이트의 페이지로드 시간을 최적화하고있었습니다. 방법 중 하나는 CSS에 대한 여러 HTTP 요청을 하나의 결합 된 HTTP 요청으로 결합하는 것입니다. 그러나 검토 자 중 한 명이 흥미로운 질문을했습니다. 여러 CSS 파일을 병렬로 다운로드해도 페이지로드 시간이 줄어들지 않습니까?

인터넷에서 읽은 유일한 것은 (블로킹) HTTP 요청 수를 줄이는 것이 더 빠른 웹 페이지의 핵심이라는 점입니다 (Google Pagespeed Insights 에서이 1 을 명확하게 언급하지는 않지만 ).

병렬화로 인해 성능이 향상되지 않거나 매우 적은 문제가 발생하는 몇 가지 이유를 알 수 있습니다 (HTTP 요청 수가 적을 때의 이점보다 중요).

새로운 연결을 설정하는 데 많은 비용이 듭니다. 여러 연결을 병렬로 설정할 수 있지만 브라우저는 브라우저에 따라 최대 4-6 개의 연결을 사용하므로 CSS를 병렬로 다운로드하면 JavaScript 및 이미지와 같은 다른 자산의 다운로드가 차단됩니다.
HTTPS 연결을 설정하려면 추가 데이터가 필요합니다. 나는 이것이 쉽게 몇 KB의 데이터가 될 수 있다는 것을 읽었습니다. 이것은 실제로 보내려는 CSS 대신 유선으로 전송해야하는 추가 데이터입니다.
TCP Slow Start 알고리즘으로 인해 연결을 통해 전송 된 데이터가 많을수록 연결 속도가 빨라집니다. 따라서 수명이 긴 연결은 실제로 새 연결보다 훨씬 더 빠르게 데이터를 전송합니다. 페이지로드 시간을 향상시키기 위해 단일 연결을 사용하는 SPDY 프로토콜을 참조하십시오.
TCP는 추상화입니다. 기본 연결은 여전히 하나만 있습니다 (일반적으로). 따라서 여러 요청이 사용되는 동안 유선을 통해 전송되는 데이터는 속도를 향상시키기 위해 여러 연결의 이점을 전혀 얻지 못할 수도 있습니다.
인터넷 연결은 특히 모바일에서 본질적으로 신뢰할 수 없습니다. 한 요청이 다른 요청보다 훨씬 빠르게 완료 될 수 있습니다. CSS에 여러 요청을 사용하면 마지막 요청이 완료 될 때까지 웹 페이지 렌더링이 차단되며 이는 평균 연결보다 훨씬 늦을 수 있습니다.

CSS 파일에 대한 HTTP 요청을 병렬 처리 할 때 어떤 이점이 있습니까?

참고 / 업데이트 : 모든 CSS 파일은 렌더 차단입니다. 아직 중요 경로 외부로 이동되지 않은 CSS 파일

css performance

— 에 이케
소스

etsy의 코드에서 무언가를 정적 사이트 (css, imgs, js)에 쿠키가없는 단일 도메인 사용을 권장하는 공예 사이트로 보았습니다. 최신 브라우저는 단일 도메인에서 병렬 다운로드를 수행하는 것이 좋습니다. 동일한 도메인의 여러 파일 (10 CSS 파일 대 1 큰 파일)은 하나의 큰 파일을 결합하고 축소하고 하나의 요청을 만드는 것이 더 낫습니다. 특히 CSS는 사이트가 올바르게 보이려면 모든 CSS가 필요할 것입니다.

— Frank

어떤 방식 으로든 브라우저는 사용 가능한 연결 수에 따라 이미 병렬로 다운로드됩니다. 브라우저가 읽고있는 HTML을 기반으로합니다.

— 일요일

HTML 문서에서 링크 된 CSS 파일은 HTML이 구문 분석 될 때 병렬 다운로드 큐에 추가됩니다. 핵심은 비동기식 JavaScript 링크가 HTML 구문 분석기를 차단하여 해당 JavaScript가 다운로드, 구문 분석 및 실행될 때까지 이후 태그가 다운로드 큐에 추가되지 않도록하는 것입니다. ^[1]

다음은 브라우저가 4 개의 파일 중 3 개를 순차적으로 다운로드하도록하는 예제입니다 (최소 3 회 왕복).

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

다음은 4 개의 파일을 모두 병렬로 다운로드하는 예제입니다 (최소 한 번의 왕복).

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

또 다른 참고 사항 : CSS 파일은 기본적으로 파서 차단이 아닌 렌더 차단입니다. 페이지는 계속 파싱되고 DOM이 생성되지만 CSSOM이 생성 될 때까지 렌더링이 시작되지 않습니다 .

CSS를 분리해야하는 주된 이유는 폴더 위에있는 컨텐츠를 클라이언트에 렌더링하고 가능한 빨리 구문 분석하는 데 필요한 최소 규칙을 얻는 것입니다. 즉시 표시되지 않는 항목에 대한 나머지 규칙 media은 링크 태그의 쿼리 로 불필요하게 렌더링 차단으로 표시 하거나 비동기식으로로드 된 JavaScript를 통해 페이지에 추가 할 수 있습니다.

따라서 CSS 다운로드를 병렬 처리하는 것만으로는 명백한 이점이 없습니다. 그러나 항상 그렇듯이 측정하고 테스트하십시오!

자세한 내용은 Google의 'Web Fundamentals : 성능 최적화'에 대한 다음 기사를 참조하십시오 . https://developers.google.com/web/fundamentals/performance/

[1] : 일부 브라우저의 추론 분석 기능을 무시합니다.

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=ko-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— 로버트 케이 벨
소스

스크립트가 동시에 다운로드를 유지하는 방법에 대한 또 다른 좋은 읽기는 여기에 있습니다 : stackoverflow.com/questions/436411/...

— joshreesjones

모든 .js 파일은 닫는 body 태그 바로 앞의 코드 끝에 링크되어 있어야합니다. 이렇게하면 아무것도 차단하지 않습니다.

— Chaoley

"자신을 위해 CSS 다운로드를 병렬화 할 때 명확한 이점은 없습니다"? 나는 어떻게 든 위의 답변에서 그것을 알아낼 수 없었다

— gaurav5430

@ gaurav5430 css 파일을 분할해야 할 이유가없는 것 같습니다. 렌더링 시간을 최적화하는 것 (및 캐시 최적화)을 넘어서는 것이 아닙니다.

— Robert K. Bell