중요하지 않은 CSS 연기

Demián Renzulli
Demián Renzulli
X GitHub 글리치

CSS 파일은 렌더링 차단 리소스입니다. 브라우저가 페이지를 렌더링하기 전에 로드 및 처리되어야 합니다. 웹페이지 불필요하게 큰 스타일시트가 있는 경우 렌더링하는 데 더 오래 걸립니다.

이 가이드에서는 중요하지 않은 CSS를 지연하여 주요 렌더링 경로 및 콘텐츠가 포함된 첫 페인트 (FCP).

예: 최적이 아닌 CSS 로드

다음 예에는 세 개의 숨겨진 단락이 있는 아코디언이 포함되어 있습니다. 각각 다른 클래스로 스타일이 지정됩니다.

이 페이지에서는 8개의 클래스가 있는 CSS 파일을 요청하지만 모든 클래스가 '표시' 속성을 렌더링하기 위해 있습니다.

이 가이드의 목표는 중요한 스타일만 표시되도록 이 페이지를 최적화하는 것입니다. 동기식으로 로드되지만 나머지 (단락 스타일 포함) 비차단 방식으로 로드됩니다.

측정

Lighthouse 실행 페이지에서 성능 섹션을 참조하세요.

보고서에 콘텐츠가 포함된 첫 페인트 측정항목이 '1s' 값으로 표시됩니다. 렌더링 차단 리소스를 제거하여 style.css 파일

<ph type="x-smartling-placeholder">
</ph> 등대 최적화되지 않은 페이지에 대한 보고서(&#39;1초&#39;의 FCP 표시) 및 &#39;Eliminate Blocks 리소스&#39;의 &#39;추천&#39;에서
Lighthouse 보고서에는 페이지 로드 속도를 높일 수 있습니다
를 통해 개인정보처리방침을 정의할 수 있습니다.

이 CSS가 렌더링을 차단하는 방식을 시각화하는 방법은 다음과 같습니다.

  1. Chrome에서 페이지를 엽니다.
  2. Control+Shift+J (Mac의 경우 Command+Option+J)를 눌러 DevTools를 엽니다.
  3. 실적 탭을 클릭합니다.
  4. 성능 패널에서 새로고침을 클릭합니다.

결과 트레이스에서 FCP 마커가 CSS 로드가 완료된 후:

<ph type="x-smartling-placeholder">
</ph> 최적화되지 않은 페이지의 DevTools 성능 트레이스, CSS 로드 후 FCP 시작됨
최적화되지 않은 데모 페이지에서는 FCP가 호출되어야 합니다.

즉, 브라우저는 모든 CSS가 로드되고 처리될 때까지 기다려야 합니다. 그리는 것이 좋습니다.

최적화

이 페이지를 최적화하려면 중요로 간주되는 클래스를 알아야 합니다. 이를 확인하려면 범위 도구를 사용하세요.

  1. DevTools에서 명령어 메뉴를 엽니다. (Mac에서는 Control+Shift+P 또는 Command+Shift+P 키를 누르세요.)
  2. '범위'를 입력합니다. 범위 표시를 선택합니다.
  3. 새로고침을 클릭하여 페이지를 새로고침하고 범위 캡처를 시작합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">CSS 파일의 범위로, 55.9% 미사용 바이트를 표시합니다.</ph>
노출 범위 보고서는 전체 CSS에서 실제로 초기 페이지 로드에 사용됩니다.

보고서를 더블클릭하여 세부정보를 확인합니다.

  • 녹색으로 표시된 클래스는 매우 중요합니다. 브라우저는 광고 소재를 렌더링하기 위해 사용자가 콘텐츠를 표시할 수 있습니다.
  • 빨간색으로 표시된 클래스는 중요하지 않으며 숨겨진 단락과 같이 바로 보이지 않는 콘텐츠에 영향을 미칩니다.

이 정보를 사용하여 CSS를 최적화하여 브라우저에서 처리를 시작할 수 있도록 합니다. 페이지가 로드된 직후에 중요한 스타일을 지정하고 중요하지 않은 CSS는 지연 다음을 참조하세요.

  1. 적용 범위 보고서에서 녹색으로 표시된 클래스 정의를 추출합니다. 이러한 클래스를 페이지 헤드에 있는 <style> 블록에 배치합니다.

    <style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>

  2. 다음을 적용하여 나머지 클래스를 비동기식으로 로드합니다. 패턴:

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

이는 CSS를 로드하는 일반적인 방법이 아닙니다. 방법은 다음과 같습니다.

  • link rel="preload" as="style"는 스타일 시트를 비동기식으로 요청합니다. 나 preload에 대해 자세히 알아보려면 중요한 애셋 미리 로드 가이드를 참고하세요.
  • link의 onload 속성을 사용하면 스타일 시트 로드가 완료됩니다.
  • 'nulling' onload 핸들러가 사용된 후에는 일부 브라우저에서 rel 속성을 전환할 때 핸들러 다시 호출
  • noscript 요소 내의 스타일 시트에 대한 참조는 다음을 제공합니다. JavaScript를 실행하지 않는 브라우저를 대체하는 것입니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

결과 페이지가 대부분의 스타일이 비동기식으로 로드되는 경우에도 마찬가지입니다. 이 CSS 파일에 대한 인라인 스타일 및 비동기식 요청은 HTML에서와 같이 표시됩니다. 파일:

모니터링

DevTools를 사용하여 다음 위치에서 다른 Performance 트레이스를 실행: 최적화된 페이지입니다.

FCP 마커는 페이지에서 CSS를 요청하기 전에 표시되며, 이는 브라우저는 페이지를 렌더링하기 전에 CSS가 로드될 때까지 기다리지 않아도 됩니다.

<ph type="x-smartling-placeholder">
</ph> DevTools 최적화된 페이지의 성능 트레이스, CSS 이전에 시작된 FCP 표시 있습니다.
최적화된 페이지에서 FCP는 스타일 시트가 로드됩니다.

마지막 단계로, 최적화된 페이지에서 Lighthouse를 실행합니다.

보고서에서 FCP 페이지가 0.2초 (20%) 감소한 것을 확인할 수 있습니다. 개선).

<ph type="x-smartling-placeholder">
</ph> FCP 값이 &#39;0.8s&#39;인 Lighthouse 보고서
새롭게 축소된 FCP

렌더링 차단 리소스 제거 제안이 아래에 더 이상 표시되지 않습니다. Opportunities(기회)에 배치되며 Passed Audits(통과한 감사) 섹션에 있습니다.

<ph type="x-smartling-placeholder">
</ph> 등대 &#39;차단 리소스 제거&#39;가 표시된 보고서 &#39;통과된 감사&#39; 페이지에 섹션으로 이동합니다.
이제 페이지가 차단 리소스를 제공합니다.

다음 단계 및 참조

이 가이드에서는 CSS를 수동으로 추출하여 중요하지 않은 CSS를 지연하는 방법을 배웠습니다. 페이지에서 사용되지 않는 코드를 삭제할 수 있습니다 보다 복잡한 프로덕션 환경의 경우 중요한 CSS 추출 가이드에서 주요 CSS를 추출하기 위해 가장 많이 사용되는 도구로 Codelab을 확인하여 실무