Aufgrund der großen Beliebtheit von PrestaShop, das von Tausenden von Online-Shops genutzt wird, habe ich mich entschlossen, Ihnen die Möglichkeit zu geben, es erheblich zu beschleunigen.

Diese E-Commerce-Plattform ist sehr dynamisch und voller Bilder. So voller Bilder, dass die meisten auf jeder Seite zwischen 5 und 10 oder sogar 20 Megabyte an Bildern herunterladen.

Bilder sind für diese Plattform entscheidend, denn das ist es, was die Leute sehen, wenn sie Ihr Produkt betrachten. Daher möchten Sie normalerweise viele Bilder hochladen, um Produktaufrufe anzuziehen.

Aus diesem Grund ist es sehr schwierig, Ihren Shop richtig zu optimieren und ein angenehmes Benutzererlebnis zu bieten.

Image Resizing für PrestaShop

Falls Sie nicht wissen, was Cloudflare Image Resizing ist, werde ich es hier nicht wiederholen, um duplizierte Inhalte zu vermeiden. Bitte lesen Sie darüber im Offiziellen Beitrag .

Was ich hier getan habe, ist den Worker, den ich für WordPress erstellt habe, zu nehmen und ihn für PrestaShop anzupassen.

Anfangs klang es wie eine einfache Aufgabe, aber als ich anfing daran zu arbeiten, bekam ich massive Kopfschmerzen.

Planung und Erstellung des Workers

Zunächst einmal hat PrestaShop eine äußerst seltsame Art, Bild-URLs zu verwalten. Wenn Sie zu https://demo.prestashop.com/#/en/front navigieren, können Sie das klassische Theme sehen.

Wenn wir den Quellcode der Seite inspizieren und zum Beispiel den Slider betrachten, sehen wir Folgendes:

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

Das ist nicht schlecht, wir können diese URL leicht abgleichen und umschreiben. Wenn wir jedoch weiter nach unten zu den Produkten scrollen, sehen wir Folgendes:

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

Autsch, das tut weh. Was ist das Problem, fragen Sie sich vielleicht? Das Problem ist, dass die Bilder nicht in einem „Ordner" liegen, sondern einfach über Apache Rewrite umgeschrieben werden.

Wenn Sie sich die Bild-URLs genau ansehen, können Sie das Problem erkennen: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default und so weiter.

Die Inspektion der .htaccess bestätigte dies:

 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]

Ehrlich gesagt möchte ich nicht einmal darauf eingehen. Ich lasse es einfach ohne Kommentar stehen. Das Obige ist immer noch nicht so schlimm und wir können es problemlos umschreiben, wir brauchen nur ein wenig Erfahrung mit Regulären Ausdrücken .

Wenn man sich jedoch verschiedene Themes da draußen ansieht, wird es viel schlimmer. Schauen wir uns zum Beispiel Shopkart an, das ich auf Monsterone Themes gefunden habe:

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

Wie Sie sehen können, ist es viel schlimmer, weil Themes offenbar die Standard-Bild-URL-Struktur ändern, indem sie den Theme-Namen darin einfügen. Um es noch schlimmer zu machen, verweisen sie auch auf Ordner wie /img/cms und so weiter.

Ehrlich gesagt wollte ich an diesem Punkt aufgeben, weil es einfach nach massiven Kopfschmerzen aussah, dies zu unterstützen, aber etwas in meinem verdorbenen Kopf sagte mir „auf keinen Fall".

Also begann ich zu testen und zu debuggen, bis ich schließlich das Classic-Theme unterstützte. Dann schnappte ich mir ein kostenloses Theme von ETS und arbeitete daran weiter.

Nach vielen Stunden war ich an dem Punkt, an dem mein Worker unterstützt:

  • PrestaShop Classic Theme
  • PrestaShop ETS (jedes) Theme

Das war noch nicht genug, da ich auch auf CSS stieß, das geändert werden musste. Also noch ein paar Stunden mehr zum Testen und Debuggen der CSS-Umschreibungsunterstützung.

Umschreiben der Produkt-„Schnellansicht"

Wenn Sie einen Shop oder eine Kategorie besuchen, haben Sie die Möglichkeit, ein Produkt durch Klicken auf ein kleines Symbol in der „Schnellansicht" anzuzeigen. Das Umschreiben davon war eine kleine Herausforderung, aber dennoch sehr gut möglich.

Nachdem ich noch ein paar Stunden herumexperimentiert, getestet und debuggt hatte, gelang es mir.

Der Worker schreibt im laufenden Betrieb alle Bilder um, die im „Schnellansicht"-Modus angezeigt werden.

Entfernung eines schädlichen Skripts

Beim Experimentieren mit dem ETS-Theme fiel mir etwas Seltsames auf. Eine sehr merkwürdig aussehende JavaScript-Datei versuchte, remote zu laden.

Glücklicherweise gab die Skript-URL HTTP 404 (Nicht gefunden) zurück, und leider konnte ich nicht sehen, worum es sich handelte. Also ging ich zum Web Archive und fand eine zwischengespeicherte Version .

Bei der Betrachtung des Skripts sieht es für mich sehr verdächtig aus, also brach ich die Untersuchung schnell ab und schrieb stattdessen ein kleines Snippet, um es automatisch von der Seite zu entfernen.

Der Worker entfernt das Skript und hält Ihre Besucher sicher.

Verwendung des PrestaShop Image Resizing Workers

Wieder einmal habe ich mein Bestes getan, um ein einfaches, einmaliges Copy-Paste-Code-Snippet zu erstellen, das sowohl für technische als auch für nicht-technische Personen geeignet ist.

Diesmal müssen Sie jedoch eine kleine Bearbeitung vornehmen, je nachdem welches Theme Sie verwenden. Am Anfang des Worker-Codes sehen Sie:

 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.

Es ist ziemlich selbsterklärend; wenn Sie das PrestaShop Classic Theme verwenden, lassen Sie PS_THEME auf 0, andernfalls setzen Sie es auf 1. Sie können auch die Bildqualität anpassen, aber ich empfehle, die Standardeinstellung beizubehalten.

Bereitstellung des Workers

Stellen Sie den Worker einfach auf Ihrer Website bereit, mit dem Routenbeispiel: examplestore.com/* und genießen Sie die Vorteile.

Den Worker-Code finden Sie wie gewohnt auf meinem Github .

Wenn Sie nicht wissen, wie das geht, lesen Sie bitte meinen anderen Artikel für WordPress, der Anleitungen enthält.

Bildqualität

Bei der Verwendung von Image Resizing möchten Sie normalerweise das Originalbild für Cloudflare zum Skalieren verwenden, da PrestaShop die Bilder auf seltsame Weise skaliert und die Qualität einfach schlecht ist.

Ich bin mir nicht sicher, warum das so ist, vielleicht war der Grund Performance oder was auch immer. Der Punkt ist, dass wir das Originalbild an Cloudflare weiterleiten sollten, aber das können wir nicht, weil PrestaShop die URLs so umschreibt, dass sie nicht direkt zugänglich sind.

Der Cloudflare-Dienst skaliert Bilder und liefert eine außergewöhnliche Qualität, unabhängig davon, wie hoch die Bildauflösung oder -größe ist. Trotzdem werden Sie immer noch eine bessere Qualität und Komprimierung erzielen.

Support

Die Anpassung des Workers an verschiedene Themes ist eine zeitaufwändige Aufgabe. Ich werde möglicherweise Unterstützung für weitere Themes hinzufügen, wenn ich freie Zeit habe, aber es ist nicht garantiert.

Wenn Sie ein kostenpflichtiges oder benutzerdefiniertes PrestaShop-Theme haben und möchten, dass ich den Worker für Ihren Shop anpasse, stehe ich für kommerziellen Support zur Verfügung.

Bitte nutzen Sie die Beratungsseite und buchen Sie ein kurzes Gespräch, um Ihre Bedürfnisse zu besprechen.

Lizenz

Wie im vorherigen Artikel für WordPress erwähnt, ist das neue Lizenzmodell Apache License 2.0, bitte verkaufen Sie meine Arbeit nicht weiter.

Dies hindert Sie nicht daran, es kommerziell oder privat zu nutzen.

Ich hoffe, dass Ihr Shop mit dieser Ergänzung aufblühen wird.

Lassen Sie mich Ihre Meinung unten wissen.