pooq.gr: Μετάβαση, απόδοση και commerce engineering

Η κατάσταση

Το pooq.gr είναι ελληνικό e-shop με αξεσουάρ κινητών, και οι περισσότεροι πελάτες του ψωνίζουν από το κινητό. Έτρεχε σε αργό shared server. Συνεργαζόμαστε μήνες: έφτιαξα τον importer προϊόντων και τα plugins αποστολής του, συντηρώ το gateway πληρωμών του, και από τον Αύγουστο ανέλαβα όλη την πλατφόρμα.

Ένα γρηγορότερο κατάστημα

Μετέφερα το κατάστημα σε δικό του server και ελάφρυνα κάθε σελίδα. Ο χρόνος μέχρι να αρχίσει να φορτώνει μια σελίδα μειώθηκε κατά 40 έως 51%, κάτι που μετράει περισσότερο στο κινητό.

Χρόνος έως το πρώτο byte (TTFB), στα ίδια endpoints πριν και μετά τη μετάβαση

Μέτρηση	Πριν	Μετά	Αλλαγή
Αρχική	1,072 s	0,611 s	1,8x γρηγορότερα
Σελίδα προϊόντος	1,101 s	0,627 s	1,8x γρηγορότερα
Καλάθι	0,894 s	0,475 s	1,9x γρηγορότερα
API καταστήματος, 100 προϊόντα	2,237 s	0,159 s	14,1x γρηγορότερα
Ενημέρωση καλαθιού (AJAX)	0,699 s	0,342 s	2,0x γρηγορότερα

Πώς λειτουργεί

• Server: dedicated server με Debian, OpenLiteSpeed, PHP 8.3, MariaDB και Redis object cache, με deploy μέσω SSH και WP-CLI αντί για FTP.
• Γραμματοσειρές: icon fonts μόνο με τα εικονίδια που χρησιμοποιούνται (από 383 KB σε 13 KB) και η ελληνική γραμματοσειρά self-hosted, χωρίς αιτήματα σε τρίτους.
• CSS και JavaScript: 15 stylesheets ενώθηκαν σε 1 και τα render-blocking scripts μειώθηκαν από 13 σε 6.
• Σταθερή σελίδα: layout shift στις κατηγορίες από 0,144 σε 0,064· η αρχική στο κινητό από 8.609 px σε 6.375 px ύψος.
• Importer: το ίδιο REST API που επιταχύνθηκε κάνει τις μαζικές εισαγωγές να τελειώνουν σε δευτερόλεπτα αντί για λεπτά.

Πιο εύκολες αγορές

Πώς λειτουργεί

• Τα πλακίδια κατηγοριών της αρχικής ξανασχεδιάστηκαν: τα προϊόντα που φτάνει κανείς από αυτά ανέβηκαν από 204 σε 367.
• Cross-sell ανά συσκευή αντί για γενικά σχετικά προϊόντα, με γραμμή συμβατότητας στη σελίδα προϊόντος.
• Λίστες με 24 προϊόντα ανά σελίδα, φόρτωση περισσότερων, φίλτρα-κουμπιά και ταξινόμηση κατά δημοτικότητα.
• Alt text σε 228 εικόνες προϊόντων που δεν είχαν, ορατό focus ring και μεγαλύτερες περιοχές αφής.

Ορατό στη Google

Η Google διαβάζει πλέον πλήρη και έγκυρα στοιχεία για κάθε προϊόν: τιμή, διαθεσιμότητα, αποστολή, επιστροφές και μάρκα, όπου υπάρχει. Διορθώθηκαν 82 προϊόντα που είχε επισημάνει.

Πώς λειτουργεί

• Κάθε σελίδα προϊόντος εκδίδει ένα ενιαίο γράφημα JSON-LD: Organization, WebSite, ItemPage, Product με Offer που περιέχει αποστολή και πολιτική επιστροφών, και ελληνικό BreadcrumbList.
• Το γράφημα του SEO plugin επεκτείνεται αντί να αντικατασταθεί: μάρκα από τον όρο μάρκας κάθε προϊόντος (με τη μάρκα του καταστήματος στα bundles), αναγνωριστικό στα bundles και αφαίρεση εσωτερικών δεδομένων του feed του προμηθευτή από 235 προϊόντα.
• Το πρόβλημα με τις κατηγορίες αφορούσε 82 προϊόντα, γιατί η Google φαίνεται να δέχεται μόνο τμήματα κατηγορίας με λατινικό γράμμα. Αποδείχθηκε με το Rich Results Test πριν αλλάξει οτιδήποτε.

Φτιαγμένο για το ελληνικό e-commerce

Αποστολές με ACS και BOX NOW, πληρωμές μέσω Τράπεζας Πειραιώς, ένας importer που φέρνει τους καταλόγους των προμηθευτών και ένα XML feed για το Skroutz.

Τι έφτιαξα

woo-importer

In-house

Εφαρμογή σε TypeScript και React που μετατρέπει τον κατάλογο ενός προμηθευτή σε προϊόντα WooCommerce: αντιστοιχίζει τις γραμμές με τον υπάρχοντα κατάλογο, συμπληρώνει εικόνες και χαρακτηριστικά και στέλνει το αποτέλεσμα μέσω του REST API.

1. CSV
2. Αντιστοίχιση
3. Scraping
4. Εμπλουτισμός
5. Έλεγχος
6. Αποστολή

• 7 εργαλεία σε μία εφαρμογή
• Πολλαπλοί προμηθευτές
• Μαζικές ενημερώσεις σε δευτερόλεπτα

ACS Courier for WooCommerce

Open source

Vouchers, λίστες παραλαβής και tracking από την οθόνη της παραγγελίας, μαζί με παραλαβή από lockers και καταστήματα ACS σε χάρτη με αναζήτηση και κανόνες αντικαταβολής ανά σημείο.

• Vouchers, λίστες παραλαβής, tracking
• ACS Points σε χάρτη
• Αντικαταβολή ανά σημείο

Repository ↗: ACS Courier for WooCommerce

Custom Case builder

In-house

Ο πελάτης διαλέγει μάρκα και μοντέλο κινητού, ανεβάζει φωτογραφία και τη βλέπει πάνω στη θήκη πριν παραγγείλει· το σχέδιο συνοδεύει την παραγγελία στο WooCommerce.

• 383 mockups συσκευών, 11 μάρκες
• Ζωντανή προεπισκόπηση
• Σε αναμονή κυκλοφορίας

BOX NOW Delivery for WooCommerce

Open source

Open-source επανεγγραφή της επίσημης ενσωμάτωσης BOX NOW: επιλογή locker και στα δύο checkout, vouchers και tracking, με δέκα διορθωμένα σφάλματα του αρχικού plugin.

• 10 διορθωμένα σφάλματα
• Θυρίδα ανά δέμα
• Σε αναμονή ενεργοποίησης

Repository ↗: BOX NOW Delivery for WooCommerce

Piraeus Bank gateway

Maintained fork

Fork που συντηρώ του gateway της Papaki (βασισμένου στο plugin της emspace.gr) για το Paycenter της Τράπεζας Πειραιώς: πληρωμές με κάρτα, Google Pay και IRIS, λογότυπα καρτών στο checkout και επαληθευμένο callback της τράπεζας.

• Έλεγχος callback με HMAC-SHA256
• Λογότυπα καρτών
• Προστασία από upstream αντικατάσταση

Repository ↗: Piraeus Bank gateway

Ασφαλές και εύκολο στη λειτουργία

Κάθε νύχτα κρατιέται backup της βάσης και ελέγχεται, και η επαναφορά δοκιμάστηκε στην πράξη. Η κακόβουλη κίνηση μπλοκάρεται και κάθε αλλαγή μπορεί να αναιρεθεί.

Πώς λειτουργεί

• Τα αιτήματα των scanners απορρίπτονται στον web server και το CrowdSec αποκλείει καταχρηστική κίνηση μέσω nftables· οι αλλαγές σε αρχεία παρακολουθούνται.
• Backups με διατήρηση grandfather-father-son, που επαληθεύονται πριν σβηστούν τα παλιά αντίγραφα.
• Το WP-Cron τρέχει από systemd timer αντί για αιτήματα επισκεπτών.
• Ο custom κώδικας ζει σε πάνω από δύο δωδεκάδες mu-plugins υπό version control, το καθένα με δικό του διακόπτη· κάθε deploy έχει backup και γραμμένο rollback.

Πώς δουλεύω

• Μετράω πριν και μετά, στα ίδια σημεία, και κρατάω τα νούμερα.
• Επεκτείνω ό,τι υπάρχει αντί να το αντικαθιστώ.
• Κάθε αλλαγή αναιρείται, με backup και σχέδιο επαναφοράς.

Παρόμοια έργα

• Heartbeat Pharmacy: πλήρης headless αντικατάσταση του WooCommerce, ενώ εδώ το WooCommerce επεκτείνεται
• Kleidarakos B2B: headless B2B commerce σε Medusa