A PrestaShop nagy népszerűsége miatt, amelyet több ezer webáruház használ, úgy döntöttem, hogy lehetőséget adok Önnek, hogy jelentősen felgyorsítsa azt.

Ez az e-kereskedelmi platform nagyon dinamikus és tele van képekkel. Annyira tele képekkel, hogy a legtöbb oldal 5-10, sőt akár 20 megabájt képet tölt le oldalanként.

A képek létfontosságúak ezen a platformon, mert ez az, amit az emberek látnak, amikor a terméket nézik. Ezért általában sok képet szeretne feltölteni, hogy vonzza a termékmegtekintéseket.

Emiatt nagyon nehéz megfelelően optimalizálni a webáruházát és kellemes felhasználói élményt nyújtani.

Image Resizing PrestaShop-hoz

Ha nem tudja, mi a Cloudflare Image Resizing, nem fogom itt megismételni, hogy ne hozzak létre duplikált tartalmat. Kérem, olvassa el a Hivatalos Bejegyzést .

Amit itt tettem, az az, hogy vettem a WordPress -hez készített workert és adaptáltam PrestaShop -hoz.

Kezdetben egyszerű feladatnak tűnt, azonban amint elkezdtem dolgozni rajta, hatalmas fejfájás tört rám.

A worker tervezése és létrehozása

Mindenekelőtt, a PrestaShop rendkívül furcsa módon kezeli a kép URL-eket. Ha navigál a https://demo.prestashop.com/#/en/front oldalra, láthatja a klasszikus sablont.

Az oldal forráskódjának vizsgálatakor, például a slider-t nézve, a következőt láthatjuk:

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

Nos, ez nem rossz, könnyedén egyeztethetjük ezt az URL-t és átírhatjuk. Azonban, ahogy lejjebb görgetünk a termékekhez, a következőt láthatjuk:

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

Jaj, ez fáj. Mi a probléma, kérdezheti? A probléma az, hogy a képek nincsenek egy „mappában", hanem egyszerűen Apache Rewrite segítségével lettek átírva.

Ha közelebbről megnézi a képek URL-jét, láthatja a problémát: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default és így tovább.

A .htaccess vizsgálata megerősítette ezt:

 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]

Őszintén szólva, nem is akarok belemenni. Egyszerűen kommentár nélkül hagyom. A fenti még nem annyira rossz, és problémamentesen átírhatjuk, csak egy kis tapasztalat kell a Reguláris kifejezésekben .

Azonban ha megnézzük a különböző sablonoktakat odakint a vadonban, sokkal rosszabb lesz. Nézzük meg például a Shopkart sablont, amelyet a Monsterone sablonoknál találtam:

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

Mint láthatja, sokkal rosszabb, mert a sablonok láthatóan megváltoztatják az alapértelmezett kép URL struktúrát azáltal, hogy a sablon nevét belefoglalják. Hogy még rosszabb legyen, olyan mappákra is hivatkoznak, mint /img/cms és így tovább.

Őszintén szólva, ezen a ponton fel akartam adni, mert egyszerűen masszív fejfájásnak tűnt ezt támogatni, de valami a meghibásodott agyamban azt mondta, „nem lehet".

Szóval elkezdtem tesztelni és debugolni, amíg végül támogattam a Classic sablont. Aztán fogtam egy ingyenes sablont az ETS -től és azon dolgoztam tovább.

Sok óra után ott tartottam, hogy a workerem támogatja:

  • PrestaShop Classic sablon
  • PrestaShop ETS (bármely) sablon

Ez még nem volt elég, mert CSS-sel is találkoztam, amit módosítani kellett. Szóval még néhány óra tesztelés és debugolás a CSS átírások támogatásához.

A termékek „gyors megtekintésének" átírása

Amikor meglátogat egy webáruház főoldalát vagy kategóriáját, lehetősége van egy termék „gyors megtekintésére" egy kis ikonra kattintva. Ennek átírása kissé kihívást jelentett, de ennek ellenére nagyon is lehetséges volt.

Miután még néhány órát játszadoztam, teszteltem és debugoltam, sikerült megvalósítanom.

A worker menet közben átírja az összes képet, ami a „gyors megtekintés" módban jelenik meg.

Rosszindulatú szkript eltávolítása

Miközben az ETS sablonnal kísérleteztem, valami furcsát vettem észre. Egy nagyon furcsa kinézetű JavaScript fájl próbált távolról betöltődni.

Szerencsére a szkript URL-je HTTP 404 (Nem található) választ adott, és sajnos nem tudtam megnézni, miről van szó. Ezért a Web Archive-hoz fordultam és találtam egy gyorsítótárazott verziót .

A szkriptet átnézve nagyon gyanúsnak tűnik számomra, ezért gyorsan felhagytam a vizsgálattal, és ehelyett írtam egy kis kódrészletet, amely automatikusan eltávolítja azt az oldalról.

A worker eltávolítja a szkriptet és biztonságban tartja a látogatóit.

A PrestaShop Image Resizing worker használata

Ismét mindent megtettem, hogy egy egyszerű, egyszeri másolás-beillesztés kódrészletet készítsek, amely mind technikai, mind nem technikai személyek számára alkalmas.

Azonban ezúttal egy kis szerkesztést kell végeznie, attól függően, hogy melyik sablont használja. A worker kód tetején a következőt fogja látni:

 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.

Elég magától értetődő; ha a PrestaShop Classic sablont használja, hagyja a PS_THEME értékét 0-n, ellenkező esetben állítsa 1-re. A képminőséget is testreszabhatja, de azt javaslom, hogy hagyja az alapértelmezettet.

A worker telepítése

Egyszerűen telepítse a workert a weboldalára, az útvonal példával: examplestore.com/* és élvezze az előnyöket.

A worker kódot a szokásos módon megtalálja a Github-omon .

Ha nem tudja, hogyan kell ezt megtenni, kérem olvassa el a másik WordPress-hez írt cikkemet, amely tartalmazza az utasításokat.

Képminőség

Az Image Resizing használatakor általában az eredeti képet szeretné megadni a Cloudflare-nek az átméretezéshez, mert a PrestaShop furcsa módon méretezi át a képeket, és a minőség egyszerűen rossz.

Nem vagyok biztos, hogy miért van ez, talán a teljesítmény volt az oka vagy bármi más. A lényeg az, hogy az eredeti képet kellene a Cloudflare-nek átadnunk, de nem tudjuk, mert a PrestaShop úgy írja át az URL-eket, hogy azok közvetlenül nem elérhetők.

A Cloudflare szolgáltatás átméretezi a képeket és kivételes minőséget szállít, függetlenül attól, milyen magas a képfelbontás vagy méret. Ezzel együtt még mindig jobb minőséget és tömörítést fog elérni.

Támogatás

A worker adaptálása különböző sablonokhoz időigényes feladat. Lehet, hogy több sablon támogatását is hozzáadom, ha van szabad időm, de ez nem garantált.

Ha fizetős vagy egyedi PrestaShop sablonnal rendelkezik, és szeretné, hogy adaptáljam a workert az Ön webáruházához, elérhető vagyok kereskedelmi támogatásra.

Kérem, használja a Konzultáció oldalt és foglaljon egy gyors beszélgetést igényeinek megbeszéléséhez.

Licenc

Ahogy az előző WordPress-hez írt cikkben említettem, az új licencmodell az Apache License 2.0, ezért kérem, ne adja tovább a munkámat.

Ez nem akadályozza meg abban, hogy kereskedelmi vagy személyes célokra használja.

Hasznos Linkek

Remélem, hogy ezzel a kiegészítéssel az Ön webáruháza virágozni fog.

Ossza meg véleményét lent.