중요하지 않은 CSS 연기

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

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

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

예: 최적이 아닌 CSS 로드

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

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

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

측정

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

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

'기회'에 '1초'의 FCP 및 '차단 리소스 제거'가 표시된 최적화되지 않은 페이지에 대한 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. '범위'를 입력하고 범위 표시를 선택합니다.
  3. 새로고침을 클릭하여 페이지를 새로고침하고 범위 캡처를 시작합니다.
CSS 파일의 범위로, 55.9% 미사용 바이트를 표시합니다.
노출 범위 보고서에는 초기 페이지 로드 시 실제로 사용되는 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 핸들러가 사용된 후 'nulling'하면 일부 브라우저에서 rel 속성을 전환할 때 핸들러를 다시 호출하지 않아도 됩니다.
  • noscript 요소 내의 스타일 시트 참조는 JavaScript를 실행하지 않는 브라우저에 대체 항목을 제공합니다.

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

모니터링

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

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

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

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

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

FCP 값이 &#39;0.8s&#39;인 Lighthouse 보고서
새롭게 줄어든 FCP

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

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

다음 단계 및 참고 자료

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