Data la grande popolarità di PrestaShop, ampiamente utilizzato da migliaia di negozi online, ho deciso di darvi l’opportunità di velocizzarlo considerevolmente.

Questa piattaforma e-commerce è molto dinamica e piena di immagini. Così piena di immagini che la maggior parte scarica tra 5 e 10 e persino 20 megabyte di immagini su ogni pagina.

Le immagini sono cruciali per questa piattaforma, perché è ciò che le persone vedono quando guardano il vostro prodotto. Per questo motivo, normalmente vorrete caricare molte immagini per attirare la visualizzazione dei prodotti.

Per questo motivo è molto difficile ottimizzare correttamente il vostro negozio e offrire un’esperienza utente piacevole.

Image Resizing per PrestaShop

Se non sapete cos’è Cloudflare Image Resizing, non lo ripeterò qui per non creare contenuti duplicati. Per favore leggete a riguardo nel Post Ufficiale .

Quello che ho fatto qui è stato prendere il worker che ho creato per WordPress e adattarlo per PrestaShop .

Inizialmente sembrava un compito facile, tuttavia una volta che ho iniziato a lavorarci è arrivato un enorme mal di testa.

Pianificazione e creazione del worker

Prima di tutto, PrestaShop ha un modo estremamente strano di gestire gli URL delle immagini. Se navigate su https://demo.prestashop.com/#/en/front potete vedere il tema classico.

Ispezionando il codice sorgente della pagina, guardando ad esempio lo slider, possiamo vedere quanto segue:

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

Beh, questo non è male, possiamo facilmente abbinare questo URL e riscriverlo. Tuttavia, scorrendo verso il basso verso i prodotti possiamo vedere quanto segue:

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

Ahia, questo fa male. Qual è il problema, potreste chiedervi? Il problema è che le immagini non sono all’interno di una “cartella”, e invece sono semplicemente riscritte tramite Apache Rewrite.

Se guardate attentamente l’URL delle immagini, potete vedere il problema: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default e così via.

L’ispezione del .htaccess ha confermato questo:

 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]

Francamente, non voglio nemmeno addentrarmi. Lo lascerò semplicemente senza commenti. Quanto sopra non è ancora così male e possiamo riscriverlo senza problemi, abbiamo solo bisogno di un po’ di esperienza nelle Espressioni regolari .

Tuttavia, guardando diversi temi là fuori in natura, diventa molto peggio. Per esempio, guardiamo Shopkart che ho trovato sui temi di 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">

Come potete vedere, è molto peggio perché apparentemente i temi stanno cambiando la struttura URL predefinita delle immagini includendo il nome del tema al suo interno. Per renderlo ancora peggiore, puntano anche a cartelle come /img/cms e così via.

Onestamente a questo punto volevo arrendermi perché sembrava semplicemente un enorme mal di testa supportare tutto ciò, ma qualcosa nella mia mente corrotta mi diceva “impossibile”.

Così ho iniziato a testare e fare debug fino a quando finalmente ho supportato il tema Classic. Poi ho preso un tema gratuito da ETS e ho iniziato a lavorarci.

Dopo molte ore, ero al punto in cui il mio worker supporta:

  • Tema Classic di PrestaShop
  • Tema ETS (qualsiasi) di PrestaShop

Questo non era sufficiente poiché ho incontrato anche CSS che doveva essere modificato. Quindi ancora un paio d’ore in più per testare e fare debug del supporto alla riscrittura CSS.

Riscrittura della “visualizzazione rapida” dei prodotti

Quando visitate un negozio o una categoria, avete l’opzione di “visualizzare rapidamente” un prodotto cliccando su una piccola icona. Riscrivere questo è stata una piccola sfida ma comunque molto possibile.

Dopo aver giocato ancora per un paio d’ore, testando e facendo debug di nuovo, sono riuscito a farlo.

Il worker riscriverà al volo tutte le immagini che appaiono nella modalità “visualizzazione rapida”.

Rimozione di script malevolo

Mentre giocavo con il tema ETS, ho notato qualcosa di strano. Un file JavaScript dall’aspetto molto strano stava cercando di caricarsi da remoto.

Fortunatamente l’URL dello script restituiva HTTP 404 (Non trovato), e sfortunatamente non potevo vedere di cosa si trattasse. Così mi sono diretto al Web Archive e ho trovato una versione cache .

Guardando lo script mi sembra molto sospetto, quindi ho rapidamente abbandonato l’indagine e invece ho scritto un piccolo snippet per rimuoverlo automaticamente dalla pagina.

Il worker rimuoverà lo script e manterrà i vostri visitatori al sicuro.

Utilizzo del worker Image Resizing per PrestaShop

Ancora una volta ho fatto del mio meglio per creare un semplice snippet di codice da copiare e incollare una sola volta, adatto sia a persone tecniche che non tecniche.

Tuttavia questa volta dovete fare una piccola modifica, in base al tema che utilizzate. In cima al codice del worker vedrete:

 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.

È abbastanza autoesplicativo; se usate il tema Classic di PrestaShop lasciate PS_THEME a 0, altrimenti impostatelo a 1. Potete anche personalizzare la qualità dell’immagine, ma vi consiglio di lasciare quella predefinita.

Distribuzione del worker

Semplicemente distribuite il worker sul vostro sito web, usando l’esempio di route: examplestore.com/* e godetevi i benefici.

Potete trovare il codice del worker sul mio Github come al solito.

Se non sapete come fare, vi prego di fare riferimento al mio altro articolo per WordPress che contiene le istruzioni.

Qualità dell’immagine

Quando utilizzate il ridimensionamento delle immagini normalmente volete puntare l’immagine originale affinché Cloudflare la ridimensioni, perché PrestaShop ridimensiona le immagini in modo strano e la qualità è semplicemente pessima.

Non sono sicuro del perché questo accada, forse il loro ragionamento era la performance o qualsiasi altra cosa. Il punto è che dovremmo puntare l’immagine originale a Cloudflare ma non possiamo perché PrestaShop riscrive gli URL in modo che non siano accessibili direttamente.

Il servizio Cloudflare ridimensiona le immagini e offre una qualità eccezionale, indipendentemente dalla risoluzione o dalle dimensioni dell’immagine. Detto ciò, otterrete comunque una migliore qualità e compressione.

Supporto

Adattare il worker a diversi temi è un compito che richiede tempo. Potrei aggiungere supporto per più temi se avrò tempo libero, ma non è garantito.

Se avete un tema PrestaShop a pagamento o personalizzato e vorreste che adatti il worker per il vostro negozio, sono disponibile per supporto commerciale.

Per favore utilizzate la pagina Consultazione e prenotate una rapida chat per discutere le vostre esigenze.

Licenza

Come menzionato nell’articolo precedente per WordPress, il nuovo modello di licenza utilizzato è Apache License 2.0, quindi per favore non rivendete il mio lavoro.

Questo non vi impedisce di utilizzarlo commercialmente o personalmente.

Spero che con questa aggiunta il vostro negozio fiorirà.

Fatemi sapere cosa ne pensate qui sotto.