Όταν ένα κατάστημα αργεί, σπάνια φταίει ένα πράγμα. Συνήθως φταίνε τρία, και το ένα κρύβει το άλλο. Πριν αγοράσεις μεγαλύτερο server, αξίζει να δεις πού πάει πραγματικά ο χρόνος.
Η καθυστέρηση έχει μια ύπουλη ιδιότητα: δεν εμφανίζεται πουθενά ως έξοδο. Δεν έρχεται τιμολόγιο «χαμένες παραγγελίες». Φαίνεται μόνο έμμεσα, σε καλάθια που εγκαταλείπονται, σε διαφημίσεις που ακριβαίνουν και σε πελάτες που ανοίγουν το κατάστημα στο κινητό, περιμένουν και κλείνουν. Αυτό το άρθρο είναι ο τρόπος που το ψάχνουμε εμείς σε κάθε eshop που παραλαμβάνουμε.
Πρώτα μέτρα, μετά διόρθωσε
Χωρίς μέτρηση, κάθε βελτίωση είναι εικασία. Χρειάζεσαι δύο πράγματα: μια εργαστηριακή μέτρηση (Lighthouse) και δεδομένα πραγματικών χρηστών (Chrome UX Report ή δικό σου tracking). Η πρώτη σου λέει τι μπορεί να πάει στραβά, η δεύτερη τι πάει στραβά για τους πελάτες σου, στο δικό τους δίκτυο και στα δικά τους κινητά.
Μέτρα τουλάχιστον τρεις σελίδες, όχι μόνο την αρχική: μια κατηγορία, ένα προϊόν και το ταμείο. Η αρχική είναι συνήθως η πιο περιποιημένη σελίδα του καταστήματος· οι πελάτες όμως μπαίνουν από το Google και τις διαφημίσεις κατευθείαν σε προϊόντα και κατηγορίες. Εκεί κρίνεται η πώληση. Για το τι σημαίνει κάθε δείκτης, δες τον οδηγό μας για τα Core Web Vitals.
Τα τρία σημεία που κρύβουν τον χρόνο
1Πάρα πολλά plugins που τρέχουν παντού
Ένα plugin κρατήσεων δεν χρειάζεται να φορτώνει στη σελίδα προϊόντος. Ένα slider δεν χρειάζεται στο ταμείο. Στην πράξη, τα περισσότερα φορτώνουν παντού επειδή κανείς δεν τους είπε το αντίθετο. Ο έλεγχος είναι απλός: απενεργοποίησε προσωρινά ένα-ένα σε δοκιμαστικό περιβάλλον και μέτρα ξανά.
Πρόσεξε ιδιαίτερα τα scripts τρίτων: chat, pop-up newsletter, widgets κριτικών, pixels διαφήμισης. Το καθένα μόνο του μοιάζει αθώο. Μαζί μπορεί να φορτώνουν περισσότερο κώδικα από το ίδιο το κατάστημα, και κυρίως να καθυστερούν την απόκριση όταν ο πελάτης πατάει κουμπιά.
2Εικόνες που κατεβαίνουν σε μέγεθος αφίσας
Μια φωτογραφία προϊόντος 3000 pixel που εμφανίζεται σε πλαίσιο 600 pixel είναι πέντε φορές περισσότερα δεδομένα από όσα χρειάζονται. Σύγχρονη συμπίεση (WebP ή AVIF), σωστά srcset και lazy loading για ό,τι δεν φαίνεται αμέσως λύνουν το μεγαλύτερο μέρος.
Υπάρχει και η αντίθετη παγίδα: lazy loading στην κεντρική εικόνα του προϊόντος. Η πρώτη εικόνα που βλέπει ο πελάτης πρέπει να φορτώνει αμέσως, με προτεραιότητα· όλες οι υπόλοιπες μπορούν να περιμένουν μέχρι να χρειαστούν.
3Ερωτήματα που τρέχουν σε κάθε φόρτωση
Υπολογισμοί αποθέματος, φίλτρα και «σχετικά προϊόντα» συχνά χτυπάνε τη βάση δεκάδες φορές ανά σελίδα. Ένα object cache (Redis) και σωστά ευρετήρια αλλάζουν την εικόνα δραματικά, αρκεί να μη γίνει cache και το καλάθι.
Εδώ ανήκει και ο συγχρονισμός με ERP. Αν τιμές και αποθέματα ενημερώνονται με εργασίες που τρέχουν την ώρα που ψωνίζουν οι πελάτες, το κατάστημα αργεί ακριβώς όταν έχει κίνηση. Οι ενημερώσεις πρέπει να τρέχουν σε ουρά, στο παρασκήνιο, με λογικό ρυθμό.
Πριν από όλα: είναι καθαρό το κατάστημα;
Ένα αργό eshop χωρίς εμφανή αιτία θέλει και έλεγχο ασφαλείας. Κακόβουλος κώδικας σε θέμα ή plugin συχνά φορτώνει κρυφά scripts, κάνει ανακατευθύνσεις ή στέλνει spam από τον server, και το πρώτο σύμπτωμα είναι η ταχύτητα. Έτσι ξεκίνησε η δουλειά μας στο Elixir Makeup: πρώτα καθαρισμός και θωράκιση, μετά ταχύτητα.
Τι να μην κάνεις
Μην βάζεις plugin βελτιστοποίησης πάνω σε plugin βελτιστοποίησης. Το ένα ακυρώνει το άλλο και μετά κανείς δεν ξέρει τι δουλεύει.
Μην κάνεις cache σελίδες με προσωπικά δεδομένα. Θα δει ο ένας πελάτης το καλάθι του άλλου.
Μην κυνηγάς το 100 στο Lighthouse. Κυνήγα το LCP κάτω από 2,5 δευτερόλεπτα σε κινητό, με πραγματικό δίκτυο.
Μην αλλάζεις hosting πριν μετρήσεις. Αν το πρόβλημα είναι στις εικόνες ή στα scripts, ο ακριβότερος server απλώς θα σερβίρει πιο γρήγορα τα ίδια βαριά αρχεία.
Τι κοστίζει η καθυστέρηση
Το κόστος δεν είναι θεωρητικό. Αν το ταμείο σου καθυστερεί δύο δευτερόλεπτα και έχεις χίλιες απόπειρες παραγγελίας τον μήνα, μια πτώση μετατροπής της τάξης του 5% σημαίνει πενήντα χαμένες παραγγελίες. Πολλαπλασίασε με τη μέση αξία καλαθιού και έχεις τον προϋπολογισμό που δικαιολογεί τη διόρθωση.
Υπάρχει και δεύτερο, λιγότερο ορατό κόστος: η διαφήμιση. Όταν πληρώνεις για κάθε κλικ, κάθε επισκέπτης που φεύγει πριν φορτώσει η σελίδα είναι χρήμα που δόθηκε για τίποτα. Γι' αυτό πριν ανεβάσουμε προϋπολογισμό σε καμπάνιες, ελέγχουμε πρώτα την ταχύτητα της σελίδας προορισμού και τη μέτρηση των μετατροπών.
Η σειρά που δουλεύουμε
- Μέτρηση σε αρχική, κατηγορία, προϊόν και ταμείο, σε κινητό.
- Έλεγχος ασφαλείας για κρυφό κώδικα και ύποπτα scripts.
- Εικόνες: σωστό μέγεθος, σύγχρονη μορφή, προτεραιότητα στην πρώτη.
- Plugins και scripts: ό,τι δεν χρειάζεται σε μια σελίδα, δεν φορτώνει σε αυτή.
- Βάση και cache: ευρετήρια, object cache, συγχρονισμοί στο παρασκήνιο.
- Νέα μέτρηση και σύγκριση με την αρχική, με νούμερα.
Αν θέλεις να δούμε το δικό σου κατάστημα, δες πώς δουλεύουμε στη δημιουργία και συντήρηση eshop ή στείλε μας τη διεύθυνσή του.
Συχνές ερωτήσεις
Πόσο γρήγορο πρέπει να είναι ένα eshop;
Ένας πρακτικός στόχος είναι το κύριο περιεχόμενο κάθε σελίδας να εμφανίζεται σε λιγότερο από 2,5 δευτερόλεπτα σε κινητό, για τη μεγάλη πλειονότητα των επισκεπτών. Αυτό είναι και το όριο «καλό» της Google για το LCP.
Αρκεί ένα plugin cache για να γίνει γρήγορο το WooCommerce;
Βοηθάει στις σελίδες που είναι ίδιες για όλους, όπως κατηγορίες και προϊόντα. Δεν λύνει βαριές εικόνες, περιττά scripts ή αργά ερωτήματα στη βάση, και δεν πρέπει να αγγίζει καλάθι, ταμείο και λογαριασμό πελάτη.
Χρειάζομαι ακριβότερο hosting;
Μερικές φορές ναι, αλλά σπάνια πρώτα. Αν ο server απαντά γρήγορα και η σελίδα αργεί να εμφανιστεί, το πρόβλημα είναι στο τι στέλνει, όχι στο πόσο γρήγορα το στέλνει. Η μέτρηση σου λέει ποιο από τα δύο ισχύει.
Επηρεάζει η ταχύτητα τη θέση στο Google;
Ναι, ως ένας από πολλούς παράγοντες, μέσω των δεδομένων πραγματικών χρηστών. Η μεγαλύτερη επίδραση όμως είναι στις πωλήσεις: ένα γρήγορο κατάστημα μετατρέπει καλύτερα την κίνηση που ήδη έχεις.
