PrestaShop은 수천 개의 온라인 스토어에서 널리 사용되는 매우 인기 있는 플랫폼이므로, 이를 상당히 빠르게 만들 수 있는 기회를 제공하기로 결정했습니다.

이 전자상거래 플랫폼은 매우 동적이고 이미지로 가득 차 있습니다. 이미지가 너무 많아서 대부분의 페이지에서 5~10, 심지어 20메가바이트의 이미지를 다운로드합니다.

이미지는 이 플랫폼에서 매우 중요합니다. 사람들이 제품을 볼 때 가장 먼저 보는 것이기 때문입니다. 따라서 일반적으로 제품 조회를 유도하기 위해 많은 이미지를 업로드하고 싶을 것입니다.

이 때문에 쇼핑몰을 적절히 최적화하고 쾌적한 사용자 경험을 제공하기가 매우 어렵습니다.

PrestaShop을 위한 Image Resizing

Cloudflare Image Resizing이 무엇인지 모르신다면, 중복 콘텐츠를 만들지 않기 위해 여기서 다시 설명하지 않겠습니다. 공식 게시물 에서 확인해 주세요.

여기서 제가 한 것은 WordPress 용으로 만든 Worker를 가져와서 PrestaShop 에 맞게 적응시킨 것입니다.

처음에는 쉬운 작업처럼 들렸지만, 실제로 작업을 시작하니 엄청난 두통이 시작되었습니다.

Worker 계획 및 생성

우선, PrestaShop은 이미지 URL을 처리하는 방식이 매우 이상합니다. https://demo.prestashop.com/#/en/front 에 접속하면 클래식 테마를 볼 수 있습니다.

페이지 소스를 검사하면, 예를 들어 슬라이더를 보면 다음과 같습니다:

1<img src="https://ready-low.demo.prestashop.com/modules/ps_imageslider/images/sample-3.jpg" alt="sample-3" loading="lazy" width="1110" height="340">

이것은 나쁘지 않습니다. 이 URL을 쉽게 매칭하고 다시 쓸 수 있습니다. 하지만 아래로 스크롤하여 제품을 보면 다음과 같습니다:

1<img src="https://ready-low.demo.prestashop.com/1-home_default/hummingbird-printed-t-shirt.jpg" alt="Hummingbird printed t-shirt" loading="lazy" 
2	data-full-size-image-url="https://ready-low.demo.prestashop.com/1-large_default/hummingbird-printed-t-shirt.jpg" width="250" height="250">
3<img src="https://ready-low.demo.prestashop.com/21-home_default/brown-bear-printed-sweater.jpg" alt="Brown bear printed sweater" loading="lazy" 
4	data-full-size-image-url="https://ready-low.demo.prestashop.com/21-large_default/brown-bear-printed-sweater.jpg" width="250" height="250">
5
6<img src="https://ready-low.demo.prestashop.com/3-home_default/the-best-is-yet-to-come-framed-poster.jpg" alt="The best is yet to come' Framed poster" loading="lazy" 
7	data-full-size-image-url="https://ready-low.demo.prestashop.com/3-large_default/the-best-is-yet-to-come-framed-poster.jpg" width="250" height="250">

아야, 아프네요. 문제가 뭐냐고요? 문제는 이미지가 “폴더” 안에 있지 않고, 대신 Apache Rewrite를 통해 단순히 다시 쓰여진다는 것입니다.

이미지 URL을 자세히 보면 문제를 알 수 있습니다: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default 등등.

.htaccess를 검사하니 이것이 확인되었습니다:

 1# Images
 2
 3RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]_)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
 4RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]_)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
 5RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
 6RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
 7RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
 8RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
 9RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
10RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
11RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
12RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
13
14# AlphaImageLoader for IE and fancybox
15
16RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

솔직히 이것에 대해 자세히 다루고 싶지도 않습니다. 코멘트 없이 그냥 두겠습니다. 위의 내용은 아직 그렇게 나쁘지 않고 문제없이 다시 쓸 수 있습니다. 정규 표현식 에 대한 약간의 경험만 있으면 됩니다.

하지만 세상에 있는 다양한 테마들을 살펴보면, 상황이 훨씬 나빠집니다. 예를 들어, Monsterone 테마에서 찾은 Shopkart 를 살펴보겠습니다:

1<img src="https://demo4techies.com/prestashop/shopkart-lite/modules/ps_imageslider/images/8187e2cea6dcd5e1b98a1b1af132211cf94c9a8e_Slider-1.jpg" alt="">
2
3<img src="https://demo4techies.com/prestashop/shopkart-lite/1-home_default/casual-shoes-sneaker.jpg" alt="Casual Shoes Sneaker" 
4	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/1-large_default/casual-shoes-sneaker.jpg">
5
6<img src="https://demo4techies.com/prestashop/shopkart-lite/6-home_default/square-sunglasses-black-frame.jpg" alt="Square Sunglasses Black Frame" 
7	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/6-large_default/square-sunglasses-black-frame.jpg">
8
9<img src="https://demo4techies.com/prestashop/shopkart-lite/img/cms/testimonial-img-1.jpg" alt="testimonial1">

보시다시피, 테마가 기본 이미지 URL 구조를 변경하여 테마 이름을 포함시키기 때문에 훨씬 더 나쁩니다. 더 나쁜 것은 /img/cms와 같은 폴더도 가리킨다는 것입니다.

솔직히 이 시점에서 포기하고 싶었습니다. 이것을 지원하는 것은 엄청난 두통처럼 보였기 때문입니다. 하지만 제 망가진 머릿속의 무언가가 “절대 안 돼"라고 말하고 있었습니다.

그래서 테스트와 디버깅을 시작했고, 마침내 Classic 테마를 지원하게 되었습니다. 그런 다음 ETS 에서 무료 테마를 가져와 작업을 시작했습니다.

많은 시간이 지난 후, Worker가 다음을 지원하는 단계에 이르렀습니다:

  • PrestaShop Classic 테마
  • PrestaShop ETS (모든) 테마

이것만으로는 충분하지 않았습니다. 수정이 필요한 CSS도 발견했기 때문입니다. 그래서 CSS 재작성 지원을 테스트하고 디버깅하는 데 몇 시간이 더 걸렸습니다.

제품 “빠른 보기” 재작성

쇼핑몰 프론트 스토어나 카테고리를 방문하면, 작은 아이콘을 클릭하여 제품을 “빠른 보기"할 수 있는 옵션이 있습니다. 이것을 재작성하는 것은 약간의 도전이었지만 그럼에도 불구하고 충분히 가능했습니다.

몇 시간 더 이것저것 해보며 테스트하고 다시 디버깅한 끝에 이를 달성할 수 있었습니다.

Worker는 “빠른 보기” 모드에서 나타나는 모든 이미지를 즉석에서 재작성합니다.

악성 스크립트 제거

ETS 테마를 가지고 놀다가 이상한 것을 발견했습니다. 매우 이상하게 생긴 JavaScript 파일이 원격으로 로드하려고 시도하고 있었습니다.

다행히 스크립트 URL은 HTTP 404 (Not Found)를 반환했고, 불행히도 이것이 무엇인지 볼 수 없었습니다. 그래서 Web Archive로 가서 캐시된 버전 을 찾았습니다.

스크립트를 살펴보니 매우 의심스러워 보여서 조사를 빠르게 중단하고 대신 페이지에서 자동으로 제거하는 작은 스니펫을 작성했습니다.

Worker는 스크립트를 제거하고 방문자를 안전하게 보호합니다.

PrestaShop Image Resizing Worker 사용하기

다시 한번 기술적인 사람과 비기술적인 사람 모두에게 적합한 간단한 일회성 복사 붙여넣기 코드 스니펫을 만들기 위해 최선을 다했습니다.

하지만 이번에는 사용하는 테마에 따라 작은 편집을 해야 합니다. Worker 코드 상단에 다음이 표시됩니다:

 1// Edit the below as needed
 2// START EDIT -----------------------------------------------------
 3
 4// Set theme type
 5// 0 = Classic
 6// 1 = All themes by ETS (https://prestahero.com/brand/2-ets)
 7const PS_THEME = 0;
 8
 9// Speed: Set the image quality
10const IMAGE_QUALITY = 90;
11
12// Speed: Append lazy loading to images
13const IMAGE_LAZY_LOAD = true;
14
15// END EDIT -------------------------------------------------------
16// DO NOT EDIT BELOW THIS LINE.

꽤 자명합니다. PrestaShop Classic 테마를 사용하는 경우 PS_THEME를 0으로 두고, 그렇지 않으면 1로 설정하세요. 이미지 품질도 커스터마이즈할 수 있지만, 기본값을 유지하는 것을 권장합니다.

Worker 배포

examplestore.com/* 라우트 예시를 사용하여 웹사이트에 Worker를 배포하기만 하면 이점을 누릴 수 있습니다.

Worker 코드는 항상 그렇듯이 제 Github 에서 찾을 수 있습니다.

이 방법을 모르시면 지침이 포함된 WordPress용 다른 기사를 참조해 주세요.

이미지 품질

Image Resizing을 사용할 때는 일반적으로 Cloudflare가 리사이즈할 원본 이미지를 지정하고 싶을 것입니다. PrestaShop이 이미지를 이상한 방식으로 리사이즈하고 품질이 매우 나쁘기 때문입니다.

왜 이런 일이 일어나는지 확실하지 않습니다. 아마 성능 때문이었을 수도 있습니다. 요점은 원본 이미지를 Cloudflare에 전달해야 하지만, PrestaShop이 URL을 재작성하여 직접 접근할 수 없다는 것입니다.

Cloudflare 서비스는 이미지 해상도나 크기에 관계없이 이미지를 리사이즈하고 뛰어난 품질을 제공합니다. 그렇긴 하지만, 여전히 더 나은 품질과 압축을 얻을 수 있습니다.

지원

Worker를 다양한 테마에 맞게 적응시키는 것은 시간이 많이 걸리는 작업입니다. 시간이 있으면 더 많은 테마에 대한 지원을 추가할 수도 있지만 보장할 수는 없습니다.

유료 또는 커스텀 PrestaShop 테마가 있고 Worker를 쇼핑몰에 맞게 적응시키기를 원하시면, 상업적 지원을 제공할 수 있습니다.

상담 페이지를 사용하여 니즈에 대해 논의할 간단한 채팅을 예약해 주세요.

라이선스

WordPress에 대한 이전 기사에서 언급했듯이, 새로운 라이선스 모델은 Apache License 2.0이므로 제 작업을 재판매하지 마세요.

이것은 상업적 또는 개인적으로 사용하는 것에 영향을 미치지 않습니다.

유용한 링크

이 추가 기능으로 여러분의 스토어가 번창하기를 바랍니다.

아래에 의견을 남겨주세요.