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

중요한 CSS 추출

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

밀리카 미하즐리야

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

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

렌더링 시간을 개선하면 특히 네트워크 상태가 좋지 않을 때 인지되는 성능에 큰 차이를 만들 수 있습니다. 모바일 네트워크에서는 대역폭과 상관없이 긴 지연 시간이 문제입니다.

콘텐츠가 포함된 첫 페인트 (FCP)가 부족하고 Lighthouse 감사에서 '렌더링 차단 리소스 제거' 기회가 표시되면 중요한 CSS를 사용해 보는 것이 좋습니다.

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

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

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

도구 개요

페이지의 중요한 CSS를 자동으로 결정할 수 있는 유용한 도구가 많이 있습니다. 이 작업은 지루한 작업이기 때문에 좋은 소식입니다. 표시 영역의 각 요소에 적용되는 스타일을 확인하려면 전체 DOM을 분석해야 합니다.

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

그 과정에서 많은 생각을 들여야 하는 간단한 도구입니다. 스타일시트를 지정할 필요도 없습니다. '중요'에서 자동으로 이를 감지합니다. 또한 여러 화면 해상도에 맞는 중요한 CSS를 추출할 수 있습니다.

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

중요한 CSS를 인라인 처리하거나 축소하는 옵션은 없지만, 중요한 CSS에 실제로 속하지 않는 규칙을 강제 포함할 수 있으며 @font-face 선언을 포함하는 것을 더 세부적으로 제어할 수 있습니다.

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

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