CSS 축소

Lighthouse 보고서의 기회 섹션에는 축소되지 않은 모든 CSS 파일과 이러한 파일이 축소되었을 때 절감할 수 있는 키비바이트 (KiB)가 표시됩니다.

Lighthouse Minify CSS 감사 스크린샷

CSS 파일을 축소하여 성능을 개선하는 방법

CSS 파일을 축소하면 페이지 로드 성능을 개선할 수 있습니다. CSS 파일은 필요 이상으로 큰 경우가 많습니다. 예를 들면 다음과 같습니다.

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

다음과 같이 줄일 수 있습니다.

h1,
h2 {
  background-color: #000000;
}

브라우저의 관점에서 이 두 코드 샘플은 기능적으로 동일하지만 두 번째 예는 바이트를 더 적게 사용합니다. 축소기는 공백을 제거하여 바이트 효율성을 더욱 개선할 수 있습니다.

h1,
h2 {
  background-color: #000000;
}

일부 축소기는 바이트를 최소화하기 위해 영리한 기법을 사용합니다. 예를 들어 색상 값 #000000을 약칭인 #000로 더 줄일 수 있습니다.

Lighthouse는 CSS에서 발견된 주석과 공백 문자를 기반으로 잠재적 절감액을 예측합니다. 이 값은 보수적인 추정치입니다. 앞서 언급했듯이 축소기는 영리한 최적화를 실행 (예: #000000#000로 축소)하여 파일 크기를 더 줄일 수 있습니다. 따라서 최소화기를 사용하면 Lighthouse에서 보고하는 것보다 더 많은 비용을 절감할 수 있습니다.

CSS 축소기를 사용하여 CSS 코드 축소

자주 업데이트하지 않는 소규모 사이트의 경우 온라인 서비스를 사용하여 수동으로 파일을 축소할 수 있습니다. CSS를 서비스의 UI에 붙여넣으면 축소된 버전의 코드가 반환됩니다.

전문 개발자의 경우 업데이트된 코드를 배포하기 전에 CSS를 자동으로 축소하는 자동화된 워크플로를 설정할 수 있습니다. 이 작업은 일반적으로 Gulp 또는 Webpack과 같은 빌드 도구를 사용하여 수행합니다.

CSS 축소에서 CSS 코드를 축소하는 방법을 알아보세요.

스택별 안내

Drupal

관리 > 구성 > 개발에서 CSS 파일 집계를 사용 설정합니다. 추가 모듈을 통해 고급 집계 옵션을 구성하여 CSS 스타일을 연결, 축소, 압축하여 사이트 속도를 높일 수도 있습니다.

Joomla

다양한 Joomla 확장 프로그램을 사용하면 CSS 스타일을 연결, 축소, 압축하여 사이트 속도를 높일 수 있습니다. 이 기능을 제공하는 템플릿도 있습니다.

Magento

스토어의 개발자 설정에서 Minify CSS Files 옵션을 사용 설정합니다.

React

빌드 시스템이 CSS 파일을 자동으로 축소하는 경우 애플리케이션의 프로덕션 빌드를 배포해야 합니다. React 개발자 도구 확장 프로그램으로 이를 확인할 수 있습니다.

WordPress

다양한 WordPress 플러그인이 스타일을 연결, 축소, 압축하여 사이트 속도를 높일 수 있습니다. 가능한 경우 빌드 프로세스를 사용하여 축소 작업을 미리 실행할 수도 있습니다.

자료