Lighthouse 보고서 목록의 기회 섹션 축소되지 않은 모든 CSS 파일과 또한 잠재적인 절감 효과(키비바이트(KiB))를 파일 크기가 축소되면 다음과 같이 됩니다.
![Lighthouse Minify CSS 감사 스크린샷](https://developer.chrome.com/static/docs/lighthouse/performance/unminified-css/image/a-screenshot-the-lightho-9935f05e8c4cd.png?authuser=19&hl=ko)
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는 현재 상태를 기준으로
비용을 절감할 수 있는
주석 및 공백 문자를
수명으로 정의합니다.
이는 보수적인 추정치입니다.
앞서 언급했듯이,
축소기가 현명한 최적화를 수행할 수 있습니다 (예: #000000
를 #000
로 축소).
파일 크기를 더 줄일 수 있습니다.
축소기를 사용하면
Lighthouse에서 보고한 것보다 더 많은 절감액을 확인할 수 있습니다.
CSS 축소기를 사용하여 CSS 코드 축소하기
자주 업데이트하지 않는 소규모 사이트의 경우 온라인 서비스를 사용하여 파일을 수동으로 축소할 수 있습니다. CSS를 서비스의 UI에 붙여넣으면 축소된 버전의 코드가 반환됩니다.
전문 개발자의 경우 CSS를 자동으로 축소하는 자동 워크플로를 설정하는 것이 좋습니다. 테스트할 수 있습니다 이 작업은 일반적으로 Gulp 또는 Webpack과 같은 빌드 도구를 사용하여 수행합니다.
CSS 축소에서 CSS 코드를 축소하는 방법을 알아보세요.
스택별 안내
Drupal
관리에서 CSS 파일 집계를 사용 설정합니다. 구성 > 개발. 고급 집계 옵션을 구성할 수도 있습니다. 추가 모듈을 통해 CSS를 연결, 축소, 압축하여 사이트 속도 향상 있습니다.
Joomla
다양한 Joomla 확장 프로그램 CSS를 연결, 축소, 압축하여 사이트 속도를 높일 수 있음 있습니다. 이 기능을 제공하는 템플릿도 있습니다.
Magento
CSS 파일 축소 옵션을 사용 설정합니다. 를 선택합니다.
React
빌드 시스템이 CSS 파일을 자동으로 축소하는 경우 프로덕션 빌드 배포 애플리케이션의 성능을 극대화할 수 있습니다 React 개발자 도구에서 확인할 수 있습니다 확장자가 포함됩니다.
WordPress
다양한 WordPress 플러그인을 사용하면 스타일을 연결, 축소, 압축함으로써 사이트를 개선할 수 있습니다 기타 추천 가능한 경우 빌드 프로세스를 사용하여 축소 작업을 수행할 수 있습니다