중요한 CSS 추출

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

May 29, 2019

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

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

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

FCP(First Contentful Paint)가 불량하고 Lighthouse 감사에서 "렌더링 차단 리소스 제거" 기회가 표시되는 경우 중요 CSS를 사용하는 것이 좋습니다.

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

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

도구 개요 #

페이지의 중요한 CSS를 자동으로 결정할 수 있는 훌륭한 도구가 많이 있습니다. 이 작업을 수동으로 수행하는 것은 지루한 프로세스이기 때문에 이것은 좋은 소식입니다. 뷰포트의 각 요소에 적용되는 스타일을 결정하려면 전체 DOM을 분석해야 합니다.

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

프로세스에서 많은 생각을 필요로 하는 간단한 도구입니다. 스타일시트를 지정할 필요도 없습니다. Critical은 자동으로 스타일시트를 감지합니다. 또한 여러 화면 해상도에 대해 중요한 CSS 추출을 지원합니다.

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

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

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

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