중요하지 않은 CSS 연기

Demián Renzulli

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

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

예: 최적이 아닌 CSS 로드

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

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

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

측정

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

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

<ph type="x-smartling-placeholder">

</ph>

Lighthouse 보고서에는 페이지 로드 속도를 높일 수 있습니다

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고: 이 데모 사이트에서는 매우 작은 스타일 시트를 사용합니다. 프로덕션 시나리오에서는 훨씬 더 큰 CSS 파일이 필요한 것이 일반적입니다. Lighthouse에서 페이지에 사용하지 않은 CSS 규칙이 2048바이트 이상 스크롤 없이 볼 수 있는 부분의 콘텐츠에는 사용하지 않는 CSS 삭제 제안도 표시됩니다.

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

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

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

<ph type="x-smartling-placeholder">

</ph>

최적화되지 않은 데모 페이지에서는 FCP가 호출되어야 합니다.

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

최적화

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

1. DevTools에서 명령어 메뉴를 엽니다. (Mac에서는 Control+Shift+P 또는 Command+Shift+P 키를 누르세요.)
2. '범위'를 입력합니다. 범위 표시를 선택합니다.
3. 새로고침을 클릭하여 페이지를 새로고침하고 범위 캡처를 시작합니다.

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

</ph> <ph type="x-smartling-placeholder"></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 지연 함수를 사용하는 것이 좋습니다. 예: loadCSS 이 동작을 캡슐화하고 여러 브라우저에서 잘 작동할 수 있습니다. 지원되지 않을 수도 있는 콘텐츠 보안 정책을 인라인 onload JavaScript를 허용합니다.

또한 페이지 하단에 CSS 링크를 배치하여 콘텐츠가 할 수 있습니다. 그러나 이 경우에도 브라우저는 여전히 스타일 시트의 우선순위를 지정하므로 모든 브라우저에서 중요한 콘텐츠를 차단할 수도 있습니다

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

모니터링

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

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

<ph type="x-smartling-placeholder">

</ph>

최적화된 페이지에서 FCP는 스타일 시트가 로드됩니다.

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

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

<ph type="x-smartling-placeholder">

</ph>

새롭게 축소된 FCP

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

<ph type="x-smartling-placeholder">

</ph>

이제 페이지가 차단 리소스를 제공합니다.

다음 단계 및 참조

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