Πώς το Skroutz.gr βελτίωσε την ταχύτητα και την εμπειρία χρήσης μέσα από τεχνικές βελτιστοποίησης

Η πλατφόρμα επέφερε μετρήσιμες αυξήσεις στην ταχύτητα φόρτωσης και τη σταθερότητα, επηρεάζοντας θετικά τους χρήστες και το SEO.

Το Skroutz.gr, μία από τις μεγαλύτερες ελληνικές πλατφόρμες ηλεκτρονικού εμπορίου, ολοκλήρωσε μια εκτενή προσπάθεια βελτίωσης των επιδόσεων της ιστοσελίδας του. Η πρωτοβουλία αυτή ξεκίνησε πριν περίπου ένα χρόνο και είχε στόχο να κάνει την εμπειρία χρήστη πιο γρήγορη και ομαλή, κάτι που επηρεάζει άμεσα την ευχαρίστηση του επισκέπτη, την κατάταξη στη Google αλλά και πιθανόν τις πωλήσεις.

Η ομάδα του Skroutz.gr μείωσε σημαντικά τις αρχικές αιτήσεις εικόνων στη σελίδα προϊόντος, σχεδόν κατά το ήμισυ, και έως 30 λιγότερες ανά σελίδα καταλόγου. Αυτή η αλλαγή οδήγησε σε βελτίωση των ταχύτητας αναπαραγωγής περιεχομένου κατά περίπου 4,5%, μετρημένη σε ειδικούς δείκτες όπως ο Speed Index που δείχνουν πόσο γρήγορα γίνεται ορατό το περιεχόμενο στον χρήστη.

Ένα ακόμα πρόβλημα που αντιμετώπισε η ομάδα ήταν το μέγεθος της δομής DOM (Document Object Model) της σελίδας, που σε κάποιες περιπτώσεις έφτανε τους 8.000 κόμβους, πολύ πάνω από όσο προτείνει η Google για καλή απόδοση. Με τη χρήση της τεχνολογίας IntersectionObserver, που επιτρέπει να φορτώνονται στοιχεία μόνο όταν πλησιάζουν να εμφανιστούν στο ορατό μέρος της οθόνης, μείωσαν τους κόμβους κατά 45%, αυξάνοντας τη βαθμολογία στην ανάλυση Lighthouse κατά περίπου 10 μονάδες. Αυτό σημαίνει πιο γρήγορη και ομαλή περιήγηση χωρίς υπερβολικό φόρτο για τον browser.

Η μείωση του μεγέθους του κύριου JavaScript πακέτου, που αρχικά ήταν 312 KB συμπιεσμένο (1,2 MB ακατέργαστο), έγινε μέσα από επιλεκτική εισαγωγή βιβλιοθηκών και αφαίρεση περιττού κώδικα, οδηγώντας σε μείωση κατά 9%. Μια προσπάθεια επιπλέον διαχωρισμού κώδικα για βελτίωση φόρτωσης εγκαταλείφθηκε λόγω μικρής αποτελεσματικότητας.

Στην προσπάθεια για γρήγορο φόρτωμα εικόνων, το απλό χαρακτηριστικό HTML 'loading' δεν ήταν αρκετά υποστηριζόμενο σε διάφορους browsers. Έτσι, το Skroutz.gr υιοθέτησε μια πιο αξιόπιστη λύση βασισμένη στην τεχνολογία React και το API IntersectionObserver, που διασφαλίζει ότι οι εικόνες φορτώνονται μόνο όταν είναι πραγματικά απαραίτητο.

Τα προβλήματα που προκαλούσαν αστάθεια στην εμφάνιση της σελίδας, όπως οι μετατοπίσεις κειμένου (Cumulative Layout Shift) λόγω εικόνων και σταθερών κεφαλίδων, αντιμετωπίστηκαν επιτυχώς. Αυτό είχε ως αποτέλεσμα τη βελτίωση περίπου 45% στον αριθμό των σελίδων με καλή βαθμολογία σε αυτό το βασικό μέτρο των Core Web Vitals της Google, που αξιολογεί τη σταθερότητα και ομαλότητα της σελίδας κατά τη φόρτωσή της.

Μια προσπάθεια να μειωθεί η φόρτωση κριτικών χρηστών με λιγότερα κείμενα να φορτώνονται αρχικά έδειξε σημάδια βελτίωσης στην απόδοση, αλλά δεν υπάρχουν διαθέσιμα επίσημα στοιχεία για την επίδραση στην εμπειρία και τα αποτελέσματα μετατροπών.

Από το 2021, το Skroutz εφαρμόζει real-time παρακολούθηση των Core Web Vitals, εξασφαλίζοντας ότι οι βελτιώσεις διατηρούνται και αναγνωρίζονται από τους αλγόριθμους της Google, ενώ παράλληλα ενημερώνουν τις επόμενες τεχνικές παρεμβάσεις.

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