Lighthouse 보고서 목록의 기회 섹션 축소되지 않은 모든 CSS 파일과 또한 잠재적인 절감 효과(키비바이트(KiB))를 파일 크기가 축소되면 다음과 같이 됩니다.
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 플러그인을 사용하면 스타일을 연결, 축소, 압축함으로써 사이트를 개선할 수 있습니다 기타 추천 가능한 경우 빌드 프로세스를 사용하여 축소 작업을 수행할 수 있습니다