중요하지 않은 CSS 연기

Demián Renzulli

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

이 가이드에서는 중요하지 않은 CSS를 지연하여 주요 렌더링 경로를 최적화하고 첫 번째 콘텐츠가 포함된 페인트 (FCP)를 개선하는 방법을 알아봅니다.

예: 최적화되지 않은 CSS 로드

다음 예에는 숨겨진 텍스트 문단 3개가 포함된 아코디언이 있으며, 각 문단의 스타일은 다른 클래스로 지정되어 있습니다.

이 페이지는 8개의 클래스가 있는 CSS 파일을 요청하지만 '표시된' 콘텐츠를 렌더링하는 데는 모두 필요하지는 않습니다.

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

측정

페이지에서 Lighthouse를 실행하고 성능 섹션으로 이동합니다.

보고서에는 값이 '1초'인 콘텐츠가 포함된 첫 페인트 측정항목과 렌더링 차단 리소스 제거 기회가 표시되며 style.css 파일을 가리킵니다.

이 CSS가 렌더링을 차단하는 방식을 시각화하려면 다음 단계를 따르세요.

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

결과 트레이스에서 CSS 로드가 완료된 직후에 FCP 마커가 배치된 것을 확인할 수 있습니다.

즉, 브라우저는 화면에 단일 픽셀을 표시하기 전에 모든 CSS가 로드되고 처리될 때까지 기다려야 합니다.

최적화

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

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

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

• 녹색으로 표시된 클래스는 중요합니다. 브라우저는 제목, 자막, 아코디언 버튼을 비롯하여 표시되는 콘텐츠를 렌더링하는 데 이러한 속성이 필요합니다.
• 빨간색으로 표시된 클래스는 중요하지 않으며 숨겨진 단락과 같이 즉시 표시되지 않는 콘텐츠에만 영향을 미칩니다.

이 정보를 사용하여 브라우저가 페이지가 로드된 직후 중요한 스타일을 처리하고 중요하지 않은 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 속성을 사용하면 스타일 시트 로드가 완료될 때 브라우저가 CSS를 처리할 수 있습니다.
• onload 핸들러가 사용된 후 'nulling'하면 일부 브라우저에서 rel 속성을 전환할 때 핸들러를 다시 호출하지 않아도 됩니다.
• noscript 요소 내의 스타일 시트 참조는 JavaScript를 실행하지 않는 브라우저에 대체 항목을 제공합니다.

대부분의 스타일이 비동기식으로 로드되더라도 결과 페이지는 이전 버전과 정확히 동일하게 표시됩니다. 다음은 HTML 파일에서 인라인 스타일과 CSS 파일에 대한 비동기 요청이 어떻게 표시되는지 보여줍니다.

모니터링

DevTools를 사용하여 최적화된 페이지에서 또 다른 성능 트레이스를 실행합니다.

FCP 마커는 페이지가 CSS를 요청하기 전에 표시됩니다. 즉, 브라우저는 페이지를 렌더링하기 전에 CSS가 로드될 때까지 기다릴 필요가 없습니다.

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

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

렌더링을 지연시키는 리소스 제거 제안이 더 이상 기회 아래에 표시되지 않고 대신 감사 통과 섹션에 표시됩니다.

다음 단계 및 참조

이 가이드에서는 페이지에서 사용되지 않는 코드를 수동으로 추출하여 중요하지 않은 CSS를 지연하는 방법을 알아봤습니다. 더 복잡한 프로덕션 환경의 경우 중요한 CSS 추출 가이드에서 중요한 CSS를 추출하는 가장 인기 있는 도구를 다루고 있으며, 이러한 도구가 실제로 작동하는 방식을 확인할 수 있는 Codelab도 포함되어 있습니다.