중요하지 않은 CSS 연기
CSS 파일은 렌더링 차단 리소스입니다. 브라우저가 페이지를 렌더링하기 전에 로드 및 처리해야 합니다. 불필요하게 큰 스타일이 포함된 웹 페이지는 렌더링하는 데 시간이 더 오래 걸립니다.
이 가이드에서는 중요 렌더링 경로를 최적화하고 FCP(First Contentful Paint)를 개선하기 위해 중요하지 않은 CSS를 연기하는 방법에 대해 배우게 됩니다.
차선책으로 CSS 로드하기 #
다음 예제에는 각각 다른 클래스로 스타일이 지정된 3개의 숨겨진 텍스트 단락이 있는 아코디언이 포함되어 있습니다.
이 페이지는 8개의 클래스가 있는 CSS 파일을 요청하지만 "보이는" 콘텐츠를 렌더링하는 데 모든 클래스가 필요한 것은 아닙니다.
이 가이드의 목표는 이 페이지를 최적화하는 것이므로 중요한 스타일만 동기식으로 로드되고 나머지(예: 단락에 적용된 스타일)는 비차단 방식으로 로드됩니다.
측정 #
페이지에서 Lighthouse를 실행하고 성능 섹션으로 이동합니다.
보고서는 값이 "1s"인 First Contentful Paint 메트릭과 style.css 파일을 가리키는 렌더 차단 리소스 제거 기회를 보여줍니다.
이 CSS가 렌더링을 차단하는 방법을 시각화하려면:
- Chrome에서 페이지를 엽니다. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Performance tab.
- 성능 패널에서 다시 로드를 클릭합니다.
결과 추적에서 CSS가 다음에 대한 로드를 완료한 직후 FCP 마커가 배치된 것을 볼 수 있습니다.
즉, 브라우저는 화면에 단일 픽셀을 그리기 전에 모든 CSS가 로드되고 처리될 때까지 기다려야 합니다.
최적화 #
이 페이지를 최적화하려면 "중요"로 간주되는 클래스를 알아야 합니다. 이를 위해 Coverage Tool을 사용합니다.
- DevTools에서 {
Control+Shift+P또는Command+Shift+P(Mac)를 눌러 명령 메뉴를 엽니다. - "Coverage"를 입력하고 Show Coverage를 선택합니다.
- 페이지를 다시 로드하고 커버리지 캡처를 시작하려면 리로드 버튼을 클릭하십시오.
두 가지 색상으로 표시된 클래스를 보려면 보고서를 두 번 클릭하십시오.
두 가지 색상으로 표시된 클래스를 보려면 보고서를 두 번 클릭하십시오.
- 녹색(중요): 브라우저에서 표시되는 콘텐츠(제목, 부제목, 아코디언 버튼 등)를 렌더링하는 데 필요한 클래스입니다.
- 빨간색(중요하지 않음): 이 스타일은 아코디언 안의 단락과 같이 즉시 표시되지 않는 콘텐츠에 적용됩니다.
이 정보를 사용하여 브라우저가 페이지 로드 후 즉시 중요한 스타일을 처리하도록 CSS를 최적화하고 중요하지 않은 CSS는 나중에 처리하도록 합니다.
- Coverage 도구에서 얻은 보고서에서 녹색으로 표시된 클래스 정의를 추출하고 해당 클래스를 페이지 헤드의
<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>- 그다음, 다음과 같은 패턴을 적용하여 나머지 클래스를 비동기적으로 로드합니다.
<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가 로드될 때까지 기다릴 필요가 없습니다.
마지막 단계로 최적화된 페이지에서 Lighthouse를 실행합니다.
보고서에서 FCP 페이지가 0.2초 감소(20% 개선!)된 것을 볼 수 있습니다.
렌더링 차단 리소스 제거 제안은 더 이상 기회 아래에 없으며 이제 통과된 감사 섹션에 속합니다.
다음 단계 및 참조 #
이 가이드에서는 페이지에서 미사용 코드를 수동으로 추출하여 중요하지 않은 CSS를 연기하는 방법에 대해 배웠습니다. 이에 대한 보완책으로, 중요한 CSS 추출 가이드는 중요한 CSS를 추출하는 가장 인기 있는 도구 중 일부를 다루고 있으며 실제로 어떻게 작동하는지 확인할 수 있는 코드랩을 포함하고 있습니다.