Do sự phổ biến rộng rãi của PrestaShop, được sử dụng bởi hàng nghìn cửa hàng trực tuyến, tôi đã quyết định mang đến cho bạn cơ hội để tăng tốc đáng kể cho nó.

Nền tảng thương mại điện tử này rất năng động và đầy hình ảnh. Đầy hình ảnh đến mức hầu hết các trang tải xuống từ 5 đến 10 và thậm chí 20 megabyte hình ảnh trên mỗi trang.

Hình ảnh rất quan trọng đối với nền tảng này, bởi vì đó là những gì mọi người nhìn thấy khi họ xem sản phẩm của bạn. Do đó, thông thường bạn muốn tải lên nhiều hình ảnh để thu hút lượt xem sản phẩm.

Vì điều này, rất khó để bạn tối ưu hóa đúng cách cửa hàng của mình và mang lại trải nghiệm người dùng dễ chịu.

Image Resizing cho PrestaShop

Nếu bạn không biết Cloudflare Image Resizing là gì, tôi sẽ không lặp lại ở đây để tránh tạo nội dung trùng lặp. Vui lòng đọc về nó trong Bài viết Chính thức .

Những gì tôi đã làm ở đây là lấy worker mà tôi đã tạo cho WordPress và điều chỉnh nó cho PrestaShop .

Ban đầu nó nghe có vẻ như một nhiệm vụ dễ dàng, tuy nhiên khi tôi bắt đầu làm việc với nó, một cơn đau đầu khổng lồ ập đến.

Lập kế hoạch và tạo worker

Trước hết, PrestaShop có một cách xử lý URL hình ảnh cực kỳ kỳ lạ. Nếu bạn truy cập https://demo.prestashop.com/#/en/front , bạn có thể thấy giao diện cổ điển.

Kiểm tra mã nguồn trang, nhìn vào slider chẳng hạn, chúng ta có thể thấy như sau:

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">

Điều này không tệ, chúng ta có thể dễ dàng khớp URL này và viết lại nó. Tuy nhiên, khi chúng ta cuộn xuống phần sản phẩm, chúng ta có thể thấy như sau:

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">

Ôi, thật đau đớn. Vấn đề là gì, bạn có thể hỏi? Vấn đề là các hình ảnh không nằm trong một “thư mục”, mà thay vào đó chỉ đơn giản được viết lại thông qua Apache Rewrite.

Nếu bạn nhìn kỹ vào URL của hình ảnh, bạn có thể thấy vấn đề: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default và vân vân.

Kiểm tra .htaccess đã xác nhận điều này:

 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]

Thành thật mà nói, tôi thậm chí không muốn đi sâu vào nó. Tôi sẽ để nguyên không bình luận. Phần trên vẫn chưa quá tệ và chúng ta có thể viết lại nó mà không gặp vấn đề gì, chúng ta chỉ cần một chút kinh nghiệm về Biểu thức chính quy .

Tuy nhiên, nhìn vào các giao diện khác nhau ngoài kia, mọi thứ trở nên tồi tệ hơn nhiều. Ví dụ, hãy xem Shopkart mà tôi tìm thấy trên các giao diện Monsterone :

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">

Như bạn có thể thấy, nó tệ hơn nhiều vì rõ ràng các giao diện đang thay đổi cấu trúc URL hình ảnh mặc định bằng cách bao gồm tên giao diện bên trong nó. Để làm cho mọi thứ tệ hơn nữa, chúng còn trỏ đến các thư mục như /img/cms và vân vân.

Thật lòng mà nói, tại thời điểm này tôi muốn bỏ cuộc vì nó có vẻ như là một cơn đau đầu khổng lồ để hỗ trợ điều này, nhưng một điều gì đó trong bộ não hỏng hóc của tôi nói với tôi “không thể nào”.

Vì vậy, tôi bắt đầu kiểm tra và gỡ lỗi cho đến khi cuối cùng tôi hỗ trợ được giao diện Classic. Sau đó tôi lấy một giao diện miễn phí từ ETS và bắt đầu làm việc với nó.

Sau nhiều giờ, tôi đã đạt đến điểm mà worker của tôi hỗ trợ:

  • Giao diện Classic của PrestaShop
  • Giao diện ETS (bất kỳ) của PrestaShop

Điều này vẫn chưa đủ khi tôi gặp phải CSS cũng cần được sửa đổi. Vì vậy, lại thêm vài giờ nữa để kiểm tra và gỡ lỗi hỗ trợ viết lại CSS.

Viết lại “xem nhanh” sản phẩm

Khi bạn truy cập trang cửa hàng hoặc danh mục, bạn có tùy chọn “xem nhanh” một sản phẩm bằng cách nhấp vào một biểu tượng nhỏ. Việc viết lại điều này hơi khó khăn nhưng vẫn hoàn toàn khả thi.

Sau khi thử nghiệm thêm vài giờ, kiểm tra và gỡ lỗi lại một lần nữa, tôi đã đạt được kết quả.

Worker sẽ viết lại ngay lập tức tất cả các hình ảnh xuất hiện trong chế độ “xem nhanh”.

Loại bỏ script độc hại

Trong khi thử nghiệm với giao diện ETS, tôi nhận thấy một điều kỳ lạ. Một tệp JavaScript trông rất đáng ngờ đang cố tải từ xa.

May mắn thay, URL của script trả về HTTP 404 (Không tìm thấy), và tiếc là tôi không thể xem nội dung của nó. Vì vậy tôi đã đến Web Archive và tìm thấy một phiên bản được lưu trong bộ nhớ đệm .

Nhìn vào script, nó trông rất đáng ngờ đối với tôi nên tôi nhanh chóng từ bỏ việc điều tra và thay vào đó viết một đoạn mã nhỏ để tự động loại bỏ nó khỏi trang.

Worker sẽ loại bỏ script và giữ cho khách truy cập của bạn an toàn.

Sử dụng worker Image Resizing cho PrestaShop

Một lần nữa, tôi đã cố gắng hết sức để tạo ra một đoạn mã đơn giản, chỉ cần sao chép và dán một lần, phù hợp cho cả người kỹ thuật và không kỹ thuật.

Tuy nhiên, lần này bạn cần thực hiện một chỉnh sửa nhỏ, dựa trên giao diện bạn sử dụng. Ở đầu mã worker, bạn sẽ thấy:

 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.

Khá tự giải thích; nếu bạn sử dụng giao diện Classic của PrestaShop, hãy để PS_THEME ở giá trị 0, nếu không hãy đặt thành 1. Bạn cũng có thể tùy chỉnh chất lượng hình ảnh, nhưng tôi khuyến nghị giữ giá trị mặc định.

Triển khai worker

Chỉ cần triển khai worker trên trang web của bạn, sử dụng ví dụ route: examplestore.com/* và tận hưởng các lợi ích.

Bạn có thể tìm thấy mã worker trên Github của tôi như thường lệ.

Nếu bạn không biết cách thực hiện, vui lòng tham khảo bài viết khác của tôi cho WordPress có chứa hướng dẫn.

Chất lượng hình ảnh

Khi sử dụng thay đổi kích thước hình ảnh, thông thường bạn muốn trỏ đến hình ảnh gốc để Cloudflare thay đổi kích thước, bởi vì PrestaShop thay đổi kích thước hình ảnh theo cách kỳ lạ và chất lượng rất tệ.

Tôi không chắc tại sao điều này xảy ra, có lẽ lý do của họ là hiệu suất hoặc bất cứ điều gì. Vấn đề là chúng ta nên trỏ hình ảnh gốc đến Cloudflare nhưng không thể vì PrestaShop viết lại các URL nên chúng không thể truy cập trực tiếp.

Dịch vụ Cloudflare thay đổi kích thước hình ảnh và cung cấp chất lượng vượt trội, bất kể độ phân giải hoặc kích thước hình ảnh cao đến đâu. Với điều đó, bạn vẫn sẽ có được chất lượng và nén tốt hơn.

Hỗ trợ

Việc điều chỉnh worker cho các giao diện khác nhau là một nhiệm vụ tốn thời gian. Tôi có thể thêm hỗ trợ cho nhiều giao diện hơn nếu có thời gian rảnh nhưng không đảm bảo.

Nếu bạn có giao diện PrestaShop trả phí hoặc tùy chỉnh và muốn tôi điều chỉnh worker cho cửa hàng của bạn, tôi sẵn sàng cung cấp hỗ trợ thương mại.

Vui lòng sử dụng trang Tư vấn và đặt lịch trò chuyện nhanh để thảo luận về nhu cầu của bạn.

Giấy phép

Như đã đề cập trong bài viết trước cho WordPress, mô hình Giấy phép mới được sử dụng là Apache License 2.0, vì vậy xin đừng bán lại công việc của tôi.

Điều này không ảnh hưởng đến việc bạn sử dụng nó cho mục đích thương mại hoặc cá nhân.

Liên kết Hữu ích

Tôi hy vọng rằng với sự bổ sung này, cửa hàng của bạn sẽ phát triển thịnh vượng.

Hãy cho tôi biết suy nghĩ của bạn bên dưới.