리소스 파일 최적화
보다 반응형 Commerce 사이트의 경우 CSS 및 JavaScript(JS) 리소스 파일을 최적화하고 렌더링 차단 리소스를 제거합니다.
- CSS 및 JS 파일 최적화 - 별도의 파일을 하나의 파일로 병합, 축소 및 번들로 설정하도록 Adobe Commerce을 구성하여 CSS 및 JavaScript(JS) 파일을 로드하는 데 필요한 시간을 줄입니다.
- 렌더링 차단 리소스 제거 - 중요한 JS 및 CSS 기능을 인라인으로 제공하고 중요하지 않은 모든 JS/CSS 스타일을 지연하는 것이 좋습니다. 자세한 내용은 렌더링 차단 리소스 제거를 참조하십시오.
영향을 받는 제품 및 버전
- 클라우드 인프라의 Adobe Commerce
- Adobe Commerce 온-프레미스
CSS 파일 병합 또는 축소
별도의 파일을 단일 파일로 병합, 축소 및 번들링하여 CSS 및 JavaScript(JS) 파일을 로드하는 데 걸리는 시간을 줄일 수 있습니다.
배포에서 HTTP/2를 사용하는 경우 파일을 병합하거나 번들로 묶지 마십시오. HTTP/2는 정적 파일을 비동기식으로 다운로드합니다. 브라우저는 파일 컨텐츠를 처리하기 전에 병합된 파일 전체를 다운로드해야 합니다.
관리자 사용
CSS 병합 또는 축소를 활성화하려면 관리자 > 스토어 > 설정 > 구성 > 고급 > 개발자 > CSS 설정 으로 이동하십시오.
명령줄 사용
클라우드 인프라에서 Adobe Commerce의 CSS 병합을 활성화하려면 다음을 수행하십시오.
-
이 명령을 로컬에서 실행합니다.
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
app/etc/config.php파일에 변경 내용을 커밋하고 다시 배포합니다.
클라우드 인프라에서 Adobe Commerce의 CSS 축소를 활성화하려면:
-
이 명령을 로컬에서 실행합니다.
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
app/etc/config.php파일에 변경 내용을 커밋하고 다시 배포합니다.
JS 파일 축소
관리자 사용
관리자 사이드바에서 스토어 > 설정 > 구성 > 고급 > 개발자 > JavaScript 설정(으)로 이동합니다.
명령줄 사용
클라우드 인프라에서 Adobe Commerce의 JS 축소를 활성화하려면 다음을 수행하십시오.
-
이 명령을 로컬에서 실행합니다.
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
app/etc/config.php파일에 변경 내용을 커밋하고 다시 배포합니다.
JS 파일 병합 및 번들
Commerce 관리에서 병합 또는 번들링을 켤 수 있습니다(병합과 번들링을 동시에 활성화할 수 없음). 스토어 > 설정 > 구성 > 고급 > 개발자 > JavaScript 설정.
명령줄에서 Adobe Commerce 기본 제공 번들링(기본 번들링)을 활성화할 수도 있습니다.
php -f bin/magento config:set dev/js/enable_js_bundling 1