[PaaS만]{class="badge informative" title="Adobe Commerce 온 클라우드 프로젝트(Adobe 관리 PaaS 인프라) 및 온프레미스 프로젝트에만 적용됩니다."}

카탈로그 이미지 크기 조정 우수 사례

스토어가 프로덕션으로 전환되기 전에 모든 카탈로그 이미지의 크기를 조정해야 합니다. 프로덕션 전에 이미지 크기를 조정하지 않으면 페이지 로드 중 이미지 크기가 조정되어 사이트 속도가 크게 감소하고 시작 후 첫 날부터 몇 주 동안 서버 로드가 증가합니다.

천천히 가는 길

기본 CLI 명령을 사용하여 모든 이미지 크기를 조정합니다.

bin/magento catalog:images:resize

이 접근 방식의 단점은 다음과 같습니다.

  • 이 프로세스는 단일 스레드입니다
  • 이 프로세스는 이미 크기가 조정된 이미지의 크기를 조정합니다
  • 프로세스를 중단할 수 없으며 며칠이 걸릴 수 있습니다

빠른 방법

비동기 이미지 크기 조정은 Adobe Commerce 2.4에 도입되었으며 이미지 크기를 더 빠르게 조정할 수 있습니다.

  1. 모든 웹 서버에서 추가 큐 핸들러를 일시적으로 시작합니다(서버당 실제 프로세서 수의 두 배).

    code language-bsh
    for i in {1.."$((2 * `nproc --all`))"};do bin/magento queue:consumers:start media.storage.catalog.image.resize &;done;
    
  2. 큐 핸들러가 실행 중인지 확인합니다.

    code language-shell
    pgrep -fl media.storage.catalog.image.resize
    
  3. 모든 이미지 크기 조정 요청으로 큐를 채웁니다.

    code language-shell
    bin/magento catalog:images:resize --async
    
  4. 모든 이미지 크기를 조정한 후 프로세스를 종료합니다.

    code language-shell
    pkill -f media.storage.catalog.image.resize
    

빠른 방법

프론트엔드를 사용하여 이미지 크기를 조정할 수 있는 다른 방법이 있습니다.

이 접근 방식의 장점은 다음과 같습니다.

  • 프로세스가 다중 스레드됩니다.
  • 프로세스는 다중 서버입니다(여러 웹 노드, 로드 밸런서 및 media/ 디렉터리에 대한 공유 디스크 공간이 있는 경우).
  • 이미 크기가 조정된 이미지는 건너뜁니다

이 방법은 8시간 이내에 이미지 100,000개의 크기를 조정하는 반면, CLI 명령은 완료하는 데 6일이 소요됩니다.

  1. 서버에 로그인.
  2. pub/media/catalog/product(으)로 이동하여 해시 중 하나를 기록합니다(예: 0047d83143a5a3a4683afdf116df680).
  3. 다음 예제에서는 www.example.com을(를) 저장소의 도메인으로 바꾸고 해시를 메모한 도메인으로 바꿉니다.
sed
code language-shell
cd pub/
find ./media/catalog/product -path ./media/catalog/product/cache -prune -o -type f -print | sed 's~./media/catalog/product/~https://www.example.com/media/catalog/product/cache/0047d83143a5a3a4683afdf1116df680/~g' > images.txt
siege

siege의 단점은 동시성이 10으로 설정된 경우 10번 동안 모든 URL을 방문한다는 것입니다.

code language-shell
siege --file=./images.txt --user-agent="image-resizer" --no-follow --no-parser --concurrent=10 --reps=once
curl
code language-shell
xargs -0 -n 1 -P 10 curl -X HEAD -s -w "%{http_code} %{time_starttransfer} %{url_effective}\n" < <(tr \\n \\0 <images.txt)

-P 인수는 스레드 수를 결정합니다.

bash one-liner

find/curl 예제의 단일 라이너입니다. 이미지가 있는 동일한 컴퓨터에서 curl을(를) 실행할 수 있는 경우:

code language-shell
find ./media/catalog/product -path ./media/catalog/product/cache -prune -o -type f -print | sed 's~./media/catalog/product/~https://www.example.com/media/catalog/product/cache/0047d83143a5a3a4683afdf1116df680/~g' | xargs -n 1 -P 10 curl -X HEAD -s -w "%{http_code} %{time_starttransfer} %{url_effective}\n"

다시 www.example.com을(를) 웹 사이트의 도메인으로 바꾸고 -P을(를) 서버가 충돌하지 않고 처리할 수 있는 스레드 수로 설정하십시오.

출력에서 스토어의 모든 제품 이미지 목록을 반환합니다. 모든 이미지(siege)를 사용할 수 있습니다. 다른 모든 웹 크롤러와 프로세서 코어를 사용하고 다른 접근 방식으로 크기 조정 캐시를 생성할 수 있습니다.

이미지 캐시 URL 하나를 방문하면 아직 존재하지 않는 경우 백그라운드에서 모든 이미지 크기가 생성됩니다. 또한 이미 크기가 조정된 파일을 건너뜁니다.

NOTE
  • 클라우드 인프라 프로젝트의 Adobe Commerce은 제품 이미지 크기 조정을 Fastly 서비스로 오프로드할 수 있습니다. 클라우드 가이드​에서 딥 이미지 최적화를 참조하십시오.
  • 원격 스토리지 모듈을 사용하는 경우 이미지 크기 조정을 nginx로 오프로드할 수도 있습니다. 구성 가이드​에서 원격 저장소에 대한 이미지 크기 조정 구성을 참조하십시오.
recommendation-more-help
754cbbf3-3a3c-4af3-b6ce-9d34390f3a60