CSS 전송 최적화

<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. 이 규칙은 PageSpeed Insights에서 페이지에 렌더링 차단 외부 요소가 포함되어 있음을 감지하면 트리거됩니다. 첫 번째 렌더링 시간이 지연됩니다.

개요

브라우저에서 콘텐츠를 렌더링하려면 먼저 현재 페이지의 모든 스타일과 레이아웃 정보를 처리해야 합니다. 따라서 브라우저는 외부 스타일시트가 다운로드되고 처리될 때까지 렌더링을 차단하는데, 이로 인해 왕복을 여러 번 해야 하고 첫 번째 렌더링 시간이 지연될 수 있습니다. 를 참조하세요. 렌더링 트리 생성, 레이아웃, 페인트를 참조하세요. 및 렌더링 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>

중요한/중요하지 않은 CSS에 대한 결정을 포함한 이러한 변환은 중요한 CSS의 인라인 처리, 중요하지 않은 CSS의 지연 로드 kubectl ‘get pods’ PageSpeed 최적화 모듈 nginx, apache, IIS, ATS, Open Lightspeed를 사용할 수 있습니다. prioritize_critical_css 필터

자세한 내용은 loadCSS 함수를 사용하여 CSS를 비동기식으로 로드하며, 이는 심각, 웹페이지에서 중요한 CSS를 추출하는 도구입니다.

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

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

큰 데이터 URI 삽입하지 않기

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

CSS 속성 삽입하지 않기

HTML 요소에 CSS 속성 삽입 (예: <p style=...>)는 불필요한 코드 중복으로 이어지는 경우가 많으므로 가능하면 사용하지 않는 것이 좋습니다. 또한 HTML 요소에 대한 인라인 CSS는 콘텐츠 보안 정책 (CSP).

의견

이 페이지가 도움이 되셨나요?

<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">