Datorită popularității mari a PrestaShop, fiind utilizat pe scară largă de mii de magazine online, am decis să vă ofer oportunitatea de a-l accelera considerabil.

Această platformă de e-commerce este foarte dinamică și plină de imagini. Atât de plină de imagini încât majoritatea descarcă între 5 și 10, ba chiar 20 de megaocteți de imagini pe fiecare pagină.

Imaginile sunt cruciale pentru această platformă, deoarece asta văd oamenii când se uită la produsul dvs. Ca atare, în mod normal doriți să încărcați multe imagini pentru a atrage vizualizarea produselor.

Din această cauză este foarte greu să vă optimizați corespunzător magazinul și să oferiți o experiență plăcută utilizatorilor.

Image Resizing pentru PrestaShop

Dacă nu știți ce este Cloudflare Image Resizing, nu voi repeta aici pentru a nu crea conținut duplicat. Vă rog citiți despre aceasta în Postarea Oficială .

Ceea ce am făcut aici este să iau worker-ul pe care l-am creat pentru WordPress și să-l adaptez pentru PrestaShop .

Inițial suna ca o sarcină ușoară, însă odată ce am început să lucrez la ea, a apărut o durere de cap imensă.

Planificarea și crearea worker-ului

În primul rând, PrestaShop are un mod extrem de ciudat de a gestiona URL-urile imaginilor. Dacă navigați la https://demo.prestashop.com/#/en/front puteți vedea tema clasică.

Inspectând sursa paginii, uitându-ne la slider de exemplu, putem vedea următoarele:

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

Ei bine, acest lucru nu este rău, putem potrivi ușor acest URL și îl putem rescrie. Totuși, pe măsură ce derulăm mai jos la produse, putem vedea următoarele:

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

Au, asta doare. Care este problema, vă puteți întreba? Problema este că imaginile nu sunt într-un „folder", ci sunt pur și simplu rescrise prin Apache Rewrite.

Dacă vă uitați cu atenție la URL-ul imaginilor, puteți vedea problema: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default și așa mai departe.

Inspectarea .htaccess a confirmat acest lucru:

 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]

Sincer, nici nu vreau să intru în detalii. Voi lăsa pur și simplu fără comentarii. Cele de mai sus nu sunt încă atât de rele și le putem rescrie fără probleme, avem nevoie doar de puțină experiență în Expresii regulate .

Totuși, uitându-ne la diferite teme de acolo, devine mult mai rău. De exemplu, să ne uităm la Shopkart pe care l-am găsit pe temele 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">

După cum puteți vedea, este mult mai rău deoarece aparent temele schimbă structura implicită a URL-ului imaginilor incluzând numele temei în interior. Pentru a face lucrurile și mai rele, ele indică și spre foldere precum /img/cms și așa mai departe.

Sincer, în acest moment am vrut să renunț pentru că părea o durere de cap masivă să suport acest lucru, dar ceva din mintea mea coruptă îmi spunea „în niciun caz".

Așa că am început să testez și să fac debug până când am reușit în cele din urmă să suport tema Classic. Apoi am luat o temă gratuită de la ETS și am început să lucrez la ea.

După multe ore, am ajuns la punctul în care worker-ul meu suportă:

  • Tema Classic PrestaShop
  • Tema ETS (orice) PrestaShop

Acest lucru nu a fost suficient deoarece am întâlnit și CSS care trebuia modificat. Așa că încă câteva ore în plus pentru testare și debug la suportul pentru rescrierea CSS.

Rescrierea „vizualizării rapide" a produselor

Când vizitați un magazin sau o categorie, aveți opțiunea de a „vizualiza rapid" un produs făcând clic pe o pictogramă mică. Rescrierea acesteia a fost o mică provocare, dar cu toate acestea foarte posibilă.

După ce m-am mai jucat câteva ore, testând și făcând debug din nou, am reușit să o realizez.

Worker-ul va rescrie din mers toate imaginile care apar în modul „vizualizare rapidă".

Eliminarea scriptului malițios

În timp ce mă jucam cu tema ETS, am observat ceva ciudat. Un fișier JavaScript cu aspect foarte suspect încerca să se încarce de la distanță.

Din fericire, URL-ul scriptului returna HTTP 404 (Not Found), iar din păcate nu puteam vedea despre ce era vorba. Așa că m-am îndreptat către Web Archive și am găsit o versiune cache .

Analizând scriptul, mi se pare foarte suspect, așa că am abandonat rapid investigația și în schimb am scris un mic snippet pentru a-l elimina automat din pagină.

Worker-ul va elimina scriptul și va păstra vizitatorii dvs. în siguranță.

Utilizarea worker-ului Image Resizing pentru PrestaShop

Încă o dată, am făcut tot posibilul pentru a crea un simplu snippet de cod de tip copiază-lipește o singură dată, care este potrivit atât pentru persoanele tehnice, cât și pentru cele non-tehnice.

Cu toate acestea, de data aceasta trebuie să faceți o mică editare, în funcție de tema pe care o folosiți. În partea de sus a codului worker-ului veți vedea:

 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.

Este destul de clar; dacă folosiți tema Classic PrestaShop lăsați PS_THEME la 0, altfel setați la 1. Puteți personaliza și calitatea imaginii, dar recomand să lăsați valoarea implicită.

Implementarea worker-ului

Pur și simplu implementați worker-ul pe site-ul dvs. web, folosind exemplul de rută: examplestore.com/* și bucurați-vă de beneficii.

Puteți găsi codul worker-ului pe Github-ul meu ca de obicei.

Dacă nu știți cum să faceți acest lucru, vă rog consultați celălalt articol al meu pentru WordPress care conține instrucțiuni.

Calitatea imaginii

Când folosiți redimensionarea imaginilor, în mod normal doriți să indicați imaginea originală pentru ca Cloudflare să o redimensioneze, deoarece PrestaShop redimensionează imaginile într-un mod ciudat, iar calitatea este pur și simplu proastă.

Nu sunt sigur de ce se întâmplă acest lucru, poate raționamentul lor a fost performanța sau altceva. Ideea este că ar trebui să indicăm imaginea originală către Cloudflare, dar nu putem pentru că PrestaShop rescrie URL-urile astfel încât nu sunt accesibile direct.

Serviciul Cloudflare redimensionează imaginile și oferă o calitate excepțională, indiferent de cât de mare este rezoluția sau dimensiunea imaginii. Cu toate acestea, veți obține în continuare o calitate și compresie mai bune.

Suport

Adaptarea worker-ului la diferite teme este o sarcină consumatoare de timp. S-ar putea să adaug suport pentru mai multe teme dacă am timp liber, dar nu este garantat.

Dacă aveți o temă PrestaShop plătită sau personalizată și doriți să adaptez worker-ul pentru magazinul dvs., sunt disponibil pentru suport comercial.

Vă rog folosiți pagina de Consultanță și rezervați o discuție rapidă pentru a vă discuta nevoile.

Licență

Așa cum am menționat în articolul anterior pentru WordPress, noul model de licență utilizat este Apache License 2.0, așa că vă rog nu revindeți munca mea.

Acest lucru nu vă împiedică să o folosiți comercial sau personal.

Linkuri Utile

Sper că cu această adăugare magazinul dvs. va înflori.

Spuneți-mi părerile dvs. mai jos.