이 페이지는 Cloud Translation API를 통해 번역되었습니다.

중요한 CSS 추출

중요한 CSS 기법을 사용하여 렌더링 시간을 개선하는 방법을 알아보세요.

Milica Mihajlija

브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 하므로 CSS가 렌더링 차단 리소스가 됩니다. CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹페이지가 렌더링되는 데 걸리는 시간이 크게 증가할 수 있습니다.

HTML 문서의 <head>에서 추출된 스타일을 인라인 처리하면 이러한 스타일을 가져오기 위해 추가로 요청할 필요가 없습니다. CSS의 나머지 부분은 비동기식으로 로드될 수 있습니다.

렌더링 시간을 개선하면 특히 열악한 네트워크 조건에서 인지된 성능에 큰 차이를 만들 수 있습니다. 모바일 네트워크에서는 대역폭에 관계없이 지연 시간이 길어집니다.

콘텐츠가 포함된 첫 페인트 (FCP) 수준이 낮으며 '렌더링 차단 리소스 제거'가 표시되는 경우 중요한 CSS를 사용해 보는 것이 좋습니다.

'렌더링 차단 리소스 제거'로 Lighthouse 감사 또는 '사용하지 않는 CSS 연기' 기회

첫 렌더링을 위한 왕복 수를 최소화하려면 스크롤 없이 볼 수 있는 부분의 콘텐츠를 14KB (압축) 미만으로 유지하는 것을 목표로 합니다.

이 기법을 사용할 때 달성할 수 있는 실적 영향은 웹사이트의 유형에 따라 다릅니다. 일반적으로 사이트에 CSS가 많을수록 인라인 CSS의 영향도 커집니다.

도구 개요

페이지의 주요 CSS를 자동으로 파악할 수 있는 훌륭한 도구가 많이 있습니다. 이 작업은 수동으로 하면 지루한 프로세스가 될 수 있으므로 좋은 소식입니다. 표시 영역의 각 요소에 적용되는 스타일을 결정하려면 전체 DOM을 분석해야 합니다.

중요: 스크롤 없이 볼 수 있는 부분의 CSS를 추출, 축소, 인라인 처리하며 npm 모듈로 사용할 수 있습니다. Gulp (직접) 또는 Grunt (플러그인으로)와 함께 사용할 수 있으며 webpack 플러그인도 있습니다.

매우 간단한 도구로, 프로세스에서 많은 요소를 고려해야 합니다. 스타일시트를 지정할 필요도 없습니다. 심각에서는 해당 스타일시트를 자동으로 감지합니다. 또한 다양한 화면 해상도에 중요한 CSS를 추출할 수도 있습니다.

CriticalCSS는 스크롤 없이 볼 수 있는 CSS를 추출하는 또 다른 npm 모듈입니다. 또한 CLI로도 사용할 수 있습니다.

중요한 CSS를 인라인으로 표시하고 축소할 수 있는 옵션은 없지만, 이 도구를 사용하면 중요한 CSS에 실제로 속하지 않는 규칙을 강제 포함하고 @font-face 선언을 포함하는 것을 더 세부적으로 제어할 수 있습니다.

Penthouse는 DOM에 동적으로 삽입되는 (Angular 앱에서 흔히 사용되는) 스타일 또는 스타일이 사이트 또는 앱에 많은 경우에 적합합니다. 내부적으로 Puppeteer를 사용하며 온라인 호스팅 버전도 제공합니다.

Penthouse는 스타일시트를 자동으로 감지하지 않으므로 중요한 CSS를 생성할 HTML 및 CSS 파일을 지정해야 합니다. 이점은 많은 작업을 병렬로 실행하는 데 능숙하다는 것입니다.