CSS 전송 최적화

이 규칙은 PageSpeed Insights에서 페이지에 첫 번째 렌더링 시간을 지연시키는 렌더링 차단 외부 스타일시트가 포함되어 있음이 감지되면 트리거됩니다.

개요

브라우저에서 콘텐츠를 렌더링하려면 먼저 현재 페이지의 모든 스타일과 레이아웃 정보를 처리해야 합니다. 따라서 브라우저는 외부 스타일시트가 다운로드되고 처리될 때까지 렌더링을 차단하는데, 이로 인해 왕복을 여러 번 해야 하고 첫 번째 렌더링 시간이 지연될 수 있습니다. 중요한 렌더링 경로에 관해 자세히 알아보려면 렌더링 트리 생성, 레이아웃 및 페인트를 참조하세요. 또한 렌더링 차단을 해제하고 CSS 전송을 향상하는 방법을 알아보려면 렌더링 차단 CSS를 참조하세요.

권장사항

외부 CSS 리소스의 크기가 작은 경우 HTML 문서에 직접 리소스를 삽입할 수 있는데, 이를 인라인이라고도 합니다. 이렇게 작은 CSS를 삽입하면 브라우저에서 페이지 렌더링을 진행할 수 있습니다. CSS 파일이 큰 경우 CSS를 전부 삽입하면 PageSpeed Insights에서 표시되는 콘텐츠의 우선순위 지정을 통해 페이지에서 스크롤 없이 볼 수 있는 부분이 너무 크다는 경고를 보낼 수 있습니다. CSS 파일이 크면 스크롤 없이 볼 수 있는 콘텐츠의 렌더링에 필요한 CSS를 확인하여 삽입한 다음 스크롤 없이 볼 수 있는 콘텐츠의 로드가 완료될 때까지 나머지 스타일의 로드를 지연시켜야 합니다.

작은 CSS 파일 삽입의 예

HTML 문서가 다음과 같고 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
리소스 small.css가 다음과 같은 경우 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
다음과 같이 중요한 CSS를 삽입할 수 있습니다. 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

prioritize_critical_css 필터를 사용 설정하면 nginx, apache, IIS, ATS, Open Lightspeed에 PageSpeed 최적화 모듈을 사용하여 중요하거나 중요하지 않은 CSS 결정, 중요한 CSS 삽입, 중요하지 않은 CSS의 지연된 로드를 비롯한 변환이 자동으로 이뤄질 수 있습니다.

CSS를 비동기적으로 로드할 수 있는 loadCSS 함수도 참조하세요. 이 함수는 웹페이지에서 중요한 CSS를 추출하는 도구인 Critical과 함께 사용할 수 있습니다.

스크롤 없이 볼 수 있는 콘텐츠의 스타일을 지정하는 데 필요한 중요한 스타일은 문서에 즉시 삽입되고 적용됩니다. 전체 small.css는 페이지의 첫 번째 페인트 후 로드됩니다. 로드가 완료되면 중요한 콘텐츠의 초기 렌더링을 차단하지 않고 페이지에 스타일이 적용됩니다.

웹 플랫폼은 곧 자바스크립트를 사용하지 않아도 HTML 가져오기를 사용하여 렌더링을 차단하지 않는 방식의 스타일시트 로드를 지원할 예정입니다.

큰 데이터 URI 삽입하지 않기

CSS 파일에 데이터 URI를 삽입할 때는 주의해야 합니다. CSS에서 크기가 작은 데이터 URI를 선택하여 사용하는 것이 좋으며, 대용량 데이터 URI를 삽입하면 스크롤 없이 볼 수 있는 CSS의 크기가 커져서 페이지 렌더링 시간이 늘어날 수 있습니다.

CSS 속성 삽입하지 않기

HTML 요소에 CSS 속성 (예: <p style=...>)을 삽입하면 불필요한 코드 중복이 발생하는 경우가 많으므로 가능하면 삽입하지 않아야 합니다. 또한 HTML 요소에 CSS를 삽입하는 것은 콘텐츠 보안 정책(CSP)에 의해 기본적으로 차단됩니다.