카탈로그 이미지 크기 조정 우수 사례
스토어가 프로덕션으로 전환되기 전에 모든 카탈로그 이미지의 크기를 조정해야 합니다. 프로덕션 전에 이미지 크기를 조정하지 않으면 페이지 로드 중 이미지 크기가 조정되어 사이트 속도가 크게 감소하고 시작 후 첫 날부터 몇 주 동안 서버 로드가 증가합니다.
천천히 가는 길
기본 CLI 명령을 사용하여 모든 이미지 크기를 조정합니다.
bin/magento catalog:images:resize
이 접근 방식의 단점은 다음과 같습니다.
- 이 프로세스는 단일 스레드입니다
- 이 프로세스는 이미 크기가 조정된 이미지의 크기를 조정합니다
- 프로세스를 중단할 수 없으며 며칠이 걸릴 수 있습니다
빠른 방법
비동기 이미지 크기 조정은 Adobe Commerce 2.4에 도입되었으며 이미지 크기를 더 빠르게 조정할 수 있습니다.
-
모든 웹 서버에서 추가 큐 핸들러를 일시적으로 시작합니다(서버당 실제 프로세서 수의 두 배).
code language-bsh for i in {1.."$((2 * `nproc --all`))"};do bin/magento queue:consumers:start media.storage.catalog.image.resize &;done; -
큐 핸들러가 실행 중인지 확인합니다.
code language-shell pgrep -fl media.storage.catalog.image.resize -
모든 이미지 크기 조정 요청으로 큐를 채웁니다.
code language-shell bin/magento catalog:images:resize --async -
모든 이미지 크기를 조정한 후 프로세스를 종료합니다.
code language-shell pkill -f media.storage.catalog.image.resize
빠른 방법
프론트엔드를 사용하여 이미지 크기를 조정할 수 있는 다른 방법이 있습니다.
이 접근 방식의 장점은 다음과 같습니다.
- 프로세스가 다중 스레드됩니다.
- 프로세스는 다중 서버입니다(여러 웹 노드, 로드 밸런서 및
media/디렉터리에 대한 공유 디스크 공간이 있는 경우). - 이미 크기가 조정된 이미지는 건너뜁니다
이 방법은 8시간 이내에 이미지 100,000개의 크기를 조정하는 반면, CLI 명령은 완료하는 데 6일이 소요됩니다.
- 서버에 로그인.
pub/media/catalog/product(으)로 이동하여 해시 중 하나를 기록합니다(예: 0047d83143a5a3a4683afdf116df680).- 다음 예제에서는
www.example.com을(를) 저장소의 도메인으로 바꾸고 해시를 메모한 도메인으로 바꿉니다.
| code language-shell |
|---|
|
siege의 단점은 동시성이 10으로 설정된 경우 10번 동안 모든 URL을 방문한다는 것입니다.
| code language-shell |
|---|
|
| code language-shell |
|---|
|
-P 인수는 스레드 수를 결정합니다.
find/curl 예제의 단일 라이너입니다. 이미지가 있는 동일한 컴퓨터에서 curl을(를) 실행할 수 있는 경우:
| code language-shell |
|---|
|
다시 www.example.com을(를) 웹 사이트의 도메인으로 바꾸고 -P을(를) 서버가 충돌하지 않고 처리할 수 있는 스레드 수로 설정하십시오.
출력에서 스토어의 모든 제품 이미지 목록을 반환합니다. 모든 이미지(siege)를 사용할 수 있습니다. 다른 모든 웹 크롤러와 프로세서 코어를 사용하고 다른 접근 방식으로 크기 조정 캐시를 생성할 수 있습니다.
이미지 캐시 URL 하나를 방문하면 아직 존재하지 않는 경우 백그라운드에서 모든 이미지 크기가 생성됩니다. 또한 이미 크기가 조정된 파일을 건너뜁니다.
- 클라우드 인프라 프로젝트의 Adobe Commerce은 제품 이미지 크기 조정을 Fastly 서비스로 오프로드할 수 있습니다. 클라우드 가이드에서 딥 이미지 최적화를 참조하십시오.
- 원격 스토리지 모듈을 사용하는 경우 이미지 크기 조정을 nginx로 오프로드할 수도 있습니다. 구성 가이드에서 원격 저장소에 대한 이미지 크기 조정 구성을 참조하십시오.