PrestaShop向けCloudflare Image Resizing

PrestaShopは非常に人気があり、何千ものオンラインストアで広く使用されているため、大幅に高速化する機会を提供することにしました。

このeコマースプラットフォームは非常に動的で画像に溢れています。画像が非常に多いため、ほとんどのページで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ですので、私の作品を再販しないでください。

これは商用または個人的に使用することを妨げるものではありません。

便利なリンク

WordPress向けImage Resizing：https://mecanik.dev/en/posts/cloudflare-image-resizing-for-wordpress/
PrestaShop マーケットプレイス：https://addons.prestashop.com/en/

この追加により、あなたのストアが繁栄することを願っています。

下にご意見をお聞かせください。