由於 PrestaShop 非常受歡迎，被數以千計的在線商店廣泛使用，我決定給您機會大大加快它的速度。

這個電子商務平台非常有活力並且充滿了圖像。 圖片如此之多，以至於他們中的大多數人在每個頁面上下載大約 5 到 10 甚至 20 兆字節的圖片。

圖片對於這個平台至關重要，因為這是人們在查看您的產品時看到的內容。 因此，您通常希望上傳許多圖片以吸引產品瀏覽。

因此，您很難正確優化您的商店並提供愉快的用戶體驗。

PrestaShop 的圖像大小調整

如果你不知道 Cloudflare Image Resizing 是什麼，我就不再在這裡重複創建重複的內容。 請在官方帖子 上進行討論。

我在這裡所做的是，採用我為 WordPress 創建的 worker 並將其改編為 [PrestaShop](https: //www.prestashop.com/en).

最初這聽起來像是一項簡單的任務，但是一旦我開始著手處理它，我就感到非常頭疼。

規劃和創建工人

首先，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	
4<img src="https://ready-low.demo.prestashop.com/21-home_default/brown-bear-printed-sweater.jpg" alt="Brown bear printed sweater" loading="lazy" 
5	data-full-size-image-url="https://ready-low.demo.prestashop.com/21-large_default/brown-bear-printed-sweater.jpg" width="250" height="250">
6
7<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" 
8	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
 2RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
 3RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
 4RewriteRule ^([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]
 5RewriteRule ^([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]
 6RewriteRule ^([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]
 7RewriteRule ^([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]
 8RewriteRule ^([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]
 9RewriteRule ^([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]
10RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
11RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
12# AlphaImageLoader for IE and fancybox
13RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

坦率地說，我什至不想進入它。 我將不做任何評論就離開它。 上面的還算不錯，我們可以毫無問題地重寫它，我們只需要一點正則表達式 的經驗。

然而，看看野外的不同主題，情況會變得更糟。 例如，讓我們看看我在 [Monsterone](https://monsterone.com/cms-templates/prestashop-themes /) 主題：

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 中獲取了一個免費主題並開始研究它。

幾個小時後，我到了我的工人支持的地步：

  • PrestaShop 經典主題
  • PrestaShop ETS（任何）主題

這還不夠，因為我還遇到了需要更改的 CSS。 所以又花了幾個小時來測試和調試支持 CSS 重寫。

重寫產品“快速瀏覽”

當您訪問店面商店或類別時，您可以選擇通過單擊小圖標“快速查看”產品。 重寫它有點挑戰，但仍然很有可能。

在玩了幾個小時之後，再次測試和調試我設法實現了它。

工作人員將即時重寫以“快速查看”模式顯示的所有圖像。

刪除惡意腳本

在研究 ETS 主題時，我注意到了一些奇怪的事情。 一個看起來很奇怪的 JavaScript 文件試圖遠程加載。

幸運的是腳本 URL 返回 HTTP 404（未找到），不幸的是我看不出這是什麼意思。 所以我前往 Web Archive 並找到了 緩存版本 。

查看腳本對我來說非常可疑，所以我很快放棄了調查，而是寫了一個小片段來自動將其從頁面中刪除。

工作人員將刪除腳本並確保您的訪客安全。

使用 PrestaShop 圖像調整工作器

我再次盡力製作了一個簡單的一次性複制粘貼代碼片段，它既適合技術人員，也適合非技術人員。

但是這次您需要根據您使用的主題進行一些小的編輯。 在工作人員代碼的頂部，您將看到：

 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。您還可以自定義圖像質量，但我建議保留默認值。

部署工人

只需在您的網站上部署工作人員，使用路由示例：examplestore.com/* 並享受好處。

您可以像往常一樣在 my Github 上找到工作代碼。

如果您不知道如何執行此操作，請參閱我的另一篇有關 WordPress 的文章，其中包含說明。

畫面質量

當使用圖像調整大小時，您通常希望將原始圖像指向 Cloudflare 以調整大小，因為 PrestaShop 以一種奇怪的方式調整圖像大小並且質量很糟糕。

我不確定為什麼會這樣，也許他們的推理是性能或其他原因。 重點是我們應該將原始圖像指向 Cloudflare，但我們不能，因為 PrestaShop 重寫了 URL，因此無法直接訪問它們。

Cloudflare 服務可調整圖像大小並提供卓越的質量，無論圖像分辨率或尺寸有多高。 話雖如此，您仍然會獲得更好的質量和壓縮。

支持

使工作人員適應不同的主題是一項耗時的任務。 如果我有空閒時間，我可能會添加對更多主題的支持，但不能保證。

如果您有付費或自定義的 PrestaShop 主題，並且希望我為您的商店調整工作人員，我可以提供商業支持。

請使用諮詢 頁面並預約快速聊天以討論您的需求。

執照

正如上一篇關於 WordPress 的文章中提到的，使用的新許可模型是 Apache License 2.0，所以請不要轉售我的作品。

這不會影響您將其用於商業或個人用途。

有用的鏈接

  • WordPress 圖像大小調整：https://mecanik.dev/en/posts/cloudflare-image-resizing-for-wordpress/
  • PrestaShop 市場：https://addons.prestashop.com/en/

我希望有了這個添加，您的商店會蓬勃發展。

請在下方告訴我您的想法。