중요하지 않은 CSS 연기

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

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

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

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

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

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

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

측정

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

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

'기회'에 FCP '1' 및 '차단 리소스 제거'가 표시된 최적화되지 않은 페이지의 Lighthouse 보고서
Lighthouse 보고서에서는 페이지 로드 속도를 높이기 위해 스타일시트를 단순화하는 것이 좋습니다.

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

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

결과 트레이스에서 CSS가 로드를 완료한 직후에 FCP 마커가 배치됩니다.

최적화되지 않은 페이지의 DevTools 성능 트레이스로 CSS 로드 후 FCP가 표시됨
최적화되지 않은 데모 페이지에서는 CSS 로드가 완료될 때까지 FCP가 발생할 수 없습니다.

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

최적화

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

  1. DevTools에서 Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 명령어 메뉴를 엽니다.
  2. 'Coverage'를 입력하고 Show Coverage를 선택합니다.
  3. 새로고침을 클릭하여 페이지를 새로고침하고 범위 캡처를 시작합니다.
55.9% 미사용 바이트를 보여주는 CSS 파일의 적용 범위
적용 범위 보고서에는 초기 페이지 로드에 실제로 사용되는 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 속성을 사용하면 스타일시트의 로드가 완료될 때 브라우저가 CSS를 처리할 수 있습니다.
  • onload 핸들러를 사용한 후 'null 처리'하면 일부 브라우저에서 rel 속성을 전환할 때 핸들러를 다시 호출하지 않게 됩니다.
  • noscript 요소 내의 스타일 시트 참조는 JavaScript를 실행하지 않는 브라우저에 대체를 제공합니다.

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

모니터링

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

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

CSS 로드 전에 FCP가 시작되었음을 보여주는 최적화된 페이지의 DevTools 성능 트레이스
최적화된 페이지에서는 스타일시트가 로드되기 전에 FCP를 시작할 수 있습니다.

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

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

FCP 값 &#39;0.8s&#39;를 보여주는 Lighthouse 보고서
새롭게 감소한 FCP

렌더링 차단 리소스 제거 제안은 Opportunities(기회)에 더 이상 표시되지 않고 대신 Passed Audits(통과된 감사) 섹션에 표시됩니다.

&#39;통과된 감사&#39; 섹션에 &#39;차단 리소스 제거&#39;를 보여주는 Lighthouse 보고서
이제 페이지가 차단 리소스 감사를 통과합니다.

다음 단계 및 참고 자료

이 가이드에서는 페이지에서 사용되지 않는 코드를 수동으로 추출하여 중요하지 않은 CSS를 지연하는 방법을 알아보았습니다. 더 복잡한 프로덕션 환경의 경우 중요 CSS 추출 가이드에서는 중요한 CSS를 추출하는 데 가장 많이 사용되는 도구를 다루고 Codelab을 통해 이러한 도구가 실제로 어떻게 작동하는지 확인해 보세요.