Διόρθωση Core Web Vitals και 90+ Ταχύτητα

Οι νέοι επισκέπτες μιας ιστοσελίδας συνήθως περνούν λίγο χρόνο σε τοποθεσίες που τους είναι άγνωστες. Ανάμεσα στα λίγα που θα τους εντυπωθούν στη μνήμη είναι το πόσο γρήγορα φορτώνει η ιστοσελίδα. Και αυτή η εντύπωση θα κρίνει το αν θα επισκεφθούν και άλλες σελίδες του site (bounce rate), αν θα επιστρέψουν ή δε θα ξαναγυρίσουν. Η ταχύτητα της σελίδας επηρεάζει την εμπειρία του επισκέπτη. Αν η σελίδα είναι αργή, δε θα περιμένουν πότε θα φορτώσει η επόμενη σελίδα, δε θα κάνουν share το περιεχόμενο, δε θα εγγραφούν στη λίστα και δε θα αγοράσουν προϊόντα.

Αν η σελίδα είναι γρήγορη, μπορεί να περιηγηθούν και σε άλλες σελίδες (page views που κάνουν καλό στο SEO) ή να επιστρέψουν κάποια άλλη στιγμή. Οι πελάτες μπορούν να κάνουν έως και 7 επισκέψεις πριν αγοράσουν ή άλλο conversion.

Η ταχύτητα εξαρτάται από την απόσταση μεταξύ του server και της τοποθεσίας του επισκέπτη. Είναι σημαντικό να μετράμε την ταχύτητα της ιστοσελίδας όσο κοντύτερα γίνεται στην τοποθεσία του επισκέπτη π.χ. αναλόγως το εργαλείο μέτρησης, στο GTMetrix επιλέγουμε Λονδίνο, στο Webpagetest κεντρική Ευρώπη (Ζυρίχη, δε συνιστώ Ιταλία γιατί δεν υπάρχει ευθεία σύνδεση με Ελλάδα). Η απόσταση επηρεάζει το χρόνο φόρτωσης της σελίδας που μπορεί να διπλασιάζεται ή να πολλαπλασιάζεται σε απομακρυσμένες τοποθεσίες π.χ. ΗΠΑ ή Αυστραλία. Server στην Ελλάδα με τις ίδιες προδιαγραφές ενός server στη Γερμανία θα είναι γρηγορότερος σε απόλυτα μεγέθη. Συγκρίνοντας, όμως, τη διαθέσιμη συνδεσιμότητα και πόρους (CPU, μνήμη), ένας server στη Γερμανία ή στις ΗΠΑ μπορεί να είναι κατά πολύ γρηγορότερος από έναν ελληνικό ακόμη και στην Αθήνα.

Μια αξιόπιστη μέτρηση είναι το Time To First Byte (TTFB) που η Google συνιστά να κυμαίνεται μεταξύ 200-500 milliseconds. Ψηλότερες τιμές θεωρούνται πολύ αργές και χρειάζεται δουλειά, ενώ χαμηλότερες είναι ιδανικές.

Η ταχύτητα της σελίδας αποτελεί παράγοντα κατάταξης στα οργανικά αποτελέσματα (δείκτης Core Web Vitals ως παράγοντας κατάταξης από το 2021). Η Google δίνει προτεραιότητα στις κινητές συσκευές, κατά συνέπεια, θα πρέπει να έχουμε τη μέγιστη δυνατή ταχύτητα στα κινητά. Οι desktop συσκευές θα ωφεληθούν από αυτό και η εμπειρία έχει δείξει ότι πάντοτε επιτυγχάνουν καλύτερους χρόνους φόρτωσης σε σχέση με τα κινητά.

Η ταχύτητα φόρτωσης επηρεάζει το SEO και έμμεσα. Οι σελίδες που φορτώνουν γρήγορα κρατάνε τους επισκέπτες που βλέπουν περισσότερες σελίδες (page views) και δεν εγκαταλείπουν το site (bounce rate) απότομα. Αυτά τα ίχνη μετράει η Google μέσω των analytics, Chrome UX Report, clicks στη μηχανή για σελίδες (click-through rate) και επιστροφές, κλπ.

Χρησιμοποιώ δύο έγκυρα εργαλεία: Google Page Speed Insights και GTmetrix.com. Είναι πολύ αξιόπιστα για μετρήσεις πελατών. Αν χρειάζομαι περισσότερη ανάλυση μπορεί να ρίξω μια ματιά στο WebPageTest.org.

Οι μετρήσεις θα διαφέρουν πολύ μεταξύ κινητών και desktop συσκευών. Σε όλες τις περιπτώσεις τα κινητά έχουν περισσότερες απαιτήσεις, ενώ τα περισσότερα templates της αγοράς είναι κακοσχεδιασμένα (παρότι διαφημίζονται ως mobile-ready) και κρύβουν εκπλήξεις που συναντά μόνο όποιος ασχοληθεί με τον κώδικα (ποτέ δε θα τις βρει ο ιδιοκτήτης που νομίζει ότι αγόρασε το γρηγορότερο template). Το να αλλάξει το template του site είναι δραστική επιλογή που απαιτεί πολλή δουλειά, αλλά όταν η ταχύτητα είναι προτεραιότητα δεν υπάρχει άλλη επιλογή, γιατί τα templates βάζουν καπάκι στην ταχύτητα (κάτι σαν τον παλιό κόφτη στο τούρμπο). Η επιλογή είναι του πελάτη, το αν θα δουλέψει με το υπάρχον template χωρίς ελπίδες για ταχύτητα, χωρίς καλές επιδόσεις στο SEO λόγω των προβλημάτων στο δείκτη Core Web Vitals που πιθανότατα θα αποκλειστεί από την αναζήτηση, ή θα γυρίσει σε καθαρότερο κώδικα που προσφέρει μόνο πλεονεκτήματα.

Έκανα μια σύγκριση ελληνικών ιστοσελίδων (επαγγελματίες) που είτε διαφημίζουν ότι κατασκευάζουν γρήγορες σελίδες, είτε παρέχουν υπηρεσίες αύξησης ταχύτητας ιστοσελίδων, είτε δίνουν οδηγίες για το πως να κάνουμε ταχύτερο το site μας (δάσκαλε που δίδασκες...). Το πρώτο πορτοκαλί αποτέλεσμα είναι από την παρούσα σελίδα του site μου και τα υπόλοιπα των επαγγελματιών του χώρου. Συγκρίνει το mobile version γιατί εκεί φαίνεται πόσο καλός είναι ο βελτιωτής, μόνο 1 σελίδα είναι 90+ και κάτω από την επίδοσή μου 100/100 σε όλες τις συσκευές.

Κάθε τύπος ιστοσελίδας μπορεί να βελτιώσει την ταχύτητα, ηλεκτρονικό κατάστημα, Wordpress και Woocommerce, Joomla, Shopify, Drupal, CS-cart, Magento, Prestashop, HTML, PHP, κλπ. Απαραίτητη σημείωση εδώ: Όπως αναφέρθηκε ήδη παραπάνω, δε φτάνουν όλα τα websites σε επιδόσεις 90-100% εξαιτίας κακογραμμένων templates/themes, φορτωμένα με plugins, αρρύθμιστο server.

Τα περισσότερα templates σήμερα είναι στο ίδιο επίπεδο, τη μεγάλη ζημιά την κάνουν τα plugins και οι WYSIWG/Drag&Drop page builders. Για παράδειγμα αναφέρω, Divi, Visual Composer, Elementor, WP Bakery, Wolf, Beaver Builder, Themify Builder, Site Origin, Nimble Builder, κλπ., και τα πρόσθετα που κουβαλούν για να λειτουργήσουν (σαν να μην ήταν από μόνα τους αρκετά βαριά). Η ύπαρξη Page builder + μεγάλου αριθμού Plugins είναι η τέλεια καταιγίδα. Κάνε μια δοκιμή και κατέβασε το visual composer συν μερικά άχρηστα plugins, το site θα πηδήξει 40-60 πόντους αμέσως.

1. Να πιάσει μια τιμή πάνω από 80%, που είναι αξιόλογο επίτευγμα αν ξεκινά από πολύ χαμηλά. Συνήθως, τα sites των πελατών λόγω κακών σχεδιαστικών επιλογών βγάζουν 15-40%.

2. Να φορτώνει κάτω από τα 2 δευτερόλεπτα (σύσταση Google). Να μην έχει προβλήματα στα Core Web Vitals που αποτελούν κριτήριο στο SEO από το 2021.

Απαιτούνται αρκετές επεμβάσεις, αρχικά σε επίπεδο server για την επίτευξη της μέγιστης επίδοσης caching, και εν συνεχεία στον κώδικα του website. Ενεργοποίηση server caching, βελτίωση αρχείων συστήματος ιστοσελίδας (core files), μείωση αριθμού plugins, ομαδοποίηση CSS/JS, βελτίωση εικόνων, και πολλά άλλα μυστικά. Οι εργασίες δεν πρέπει να επηρεάζουν το αισθητικό αποτέλεσμα, τη λειτουργία της σελίδας και την αίσθηση του επισκέπτη.

✓ Προαιρετική επιλογή, δε την προτείνω σε πελάτες εκτός αν πέσω σε κάποια εξαίρεση π.χ. απελπιστικά αργό site, που έχει εξαντλήσει όλα τα περιθώρια βελτίωσης και είναι ξεκάθαρο ότι ο server το επιβραδύνει. Βρες πιο γρήγορο hosting: Δε χρειάζεται να αλλάξεις την κατηγορία του server, π.χ., Shared server, αλλά μένοντας στην ίδια τιμή, βρες ένα host που δε μοιράζει τους πόρους του server (RAM, CPU) με άλλους πελάτες ή αν το κάνει, φροντίζει να μη ξεμένουν οι πελάτες του. Επόμενη επιλογή είναι η αναβάθμιση σε VPS (Virtual Private Server), και μετά η ακριβότερη επιλογή του Dedicated (physical) server (μόνο για eshops). Μια καλή επιλογή είναι να νοικιάσεις χώρο σε cloud, που δίνει μεγάλη ευελιξία όταν απαιτούνται έξτρα πόροι, ενώ δε χρειάζεται συντήρηση γιατί δεν είναι μηχάνημα, και δεν έχει downtime γιατί βγαίνει από πολλούς κόμβους.

✓ Χρησιμοποίησε CDN (Content Delivery Network): Εικόνες και στατικά αρχεία αποθηκεύονται και προσφέρονται από μια συστάδα servers από τις κοντινότερες τοποθεσίες στους επισκέπτες της σελίδας. Το αποτέλεσμα είναι γρηγορότεροι χρόνοι φόρτωσης και καθόλου downtime (ίδια χαρακτηριστικά με το cloud).

✓ Website caching και συμπίεση: τα αρχεία αποθηκεύονται και συμπιέζονται σε επίπεδο server χωρίς να ζητούνται τοπικά. Το caching αποθηκεύει δυναμικό περιεχόμενο για γρήγορη απόκριση και οικονομία πόρων (δεν τραβά δεδομένα σε κάθε αίτημα επισκέπτη αλλά τα προσφέρει από την αποθήκη (cache) επειδή δεν υπάρχουν αλλαγές σε σχέση με τα τοπικά αρχεία. Τα αρχεία στην cache αλλάζουν μόνο όταν αλλάξει το περιεχόμενο τοπικά ή όταν λήξει η περίοδος caching. Αυτή η μέθοδος έχει εκπληκτικά αποτελέσματα, αλλά δεν προσφέρεται από όλους τους servers και οι περισσότεροι πελάτες που έρχονται έχουν αρρύθμιστο server caching γιατί απαιτεί πρόσβαση στο server control panel και τεχνογνωσία.

✓ Javascript και CSS optimization: μείωση των HTTP αιτημάτων στο server που ζητούνται από το κάθε ατομικό αρχείο JavaScript και CSS. Ομαδοποιώντας τα αρχεία JavaScript και CSS σε 2 ή περισσότερα (merging), γλιτώνουμε ισάριθμο αριθμό αιτημάτων πολλαπλασιαζόμενο επί το κάθε page view. Αν ένα page view βγάζει 100 αιτήματα (έχω δει ακόμη και 240), και κάθε επισκέπτης κάνει 2 page views, ενώ την ημέρα έχουμε 100 επισκέπτες, το σύνολο βγαίνει από 100*2*100 = 20.000 αιτήματα/ημέρα φόρτος στο server. Εδώ αρχίζουν τα προβλήματα. Κάποια αρχεία δεν πρέπει να τα ακουμπήσεις γιατί καθορίζουν συστημικές λειτουργίες ή συνθέτουν το template. Μόνο πολύ προχωρημένοι και με εμπειρία στα συγκεκριμένα templates μπορούν να κάνουν αυτή τη δουλειά. Συνήθως, οι ιδιοκτήτες δοκιμάζουν μερικά άχρηστα plugins π.χ. WP Rocket, Hummingbird, W3 Total Cache, Autooptimize, Minify, Fast Velocity, κ.ά. που θα δώσουν ίσως 10-20 πόντους αλλά δε θα λύσουν τα Core Web Vitals, ούτε θα ξεπεράσουν τη μέτρια ταχύτητα. Πέρα από την ομαδοποίηση, χρησιμοποιούμε τη σμίκρυνση (minify), μετακίνηση στο footer, Defer, Async, και DNS ή Link prefetching. Να σημειώσω ότι δεν υπάρχει σωστή μέθοδος εδώ που καλύπτει όλες τις περιπτώσεις. Χρειάζονται πάρα πολλές δοκιμές για να βγει η καλύτερη ταχύτητα.

✓ Γραμματοσειρές: τα templates συνηθίζουν να χρησιμοποιούν κομψές γραμματοσειρές που δε θα παίζουν σε όλες τις συσκευές και αυτό δεν το ξέρουν οι ιδιοκτήτες των σελίδων και τις στολίζουν άσκοπα ξοδεύοντας πόρους. Οι γραμματοσειρές ζητούνται από online αποθήκες π.χ. fonts.gstatic.com, fonts.googleapis.com, σε κάθε page view πολλαπλασιάζοντας τα αιτήματα στο server. Το κατέβασμα απαιτεί μερικά μικροδευτερόλεπτα ή ακόμη και δευτερόλεπτα που ρίχνουν τις επιδόσεις. Μπορείς να μειώσεις τον αριθμό των γραμματοσειρών, να καθυστερήσετε το κατέβασμά τους, να χρησιμοποιήσεις σύγχρονα format όπως το WOFF2, ή να τις προσφέρεις τοπικά.

✓ Image optimization: ένα παλιό πρόβλημα που δε λύνει κανείς και βρίσκουμε σήμερα τις εικόνες να αποτελούν σημαντικό παράγοντα καθυστέρησης. Πρόσφατα δούλεψα σε μια μεγάλου μήκους sales page (βλ. πρώτη εικόνα επάνω) που είχε 117 εικόνες και παρόλα αυτά τερμάτισε την ταχύτητα (98% στα κινητά, 100% desktop). Πρέπει να μειώσεις τον όγκο του αρχείου μέσω συμπίεσης και άλλων τεχνικών χωρίς απώλειες στην εμφάνιση. Οι τύποι των εικόνων παίζουν επίσης ρόλο, με το GPI να προωθεί το WEBP format που όμως δεν παίζει σε iOS συσκευές, παρόλα αυτά το GPI εξακολουθεί να κόβει πόντους όταν χρησιμοποιούμε JPG ή PNG. Ακόμα και τα άλλα formats που προτείνει πχ JPEG 2000, δεν έχουν υιοθετηθεί από όλους τους browsers. Με το lazy loading καθυστερούμε την εμφάνιση (φόρτωση) εικόνων που βρίσκονται έξω από το ορατό frame του επισκέπτη για εξοικονόμηση πόρων (server requests) και συνεπώς, περισσότερη ταχύτητα.

✓ Website Caching: Υπάρχουν αρκετές λύσεις για αύξηση ταχύτητας του Wordpress και άλλων CMS που όμως δεν υποστηρίζω γιατί αφενός δημιουργούν πλείστα όσα προβλήματα, και αφετέρου δεν αποδίδουν τη μέγιστη ταχύτητα συγκρίνοντας με το αποτέλεσμα να δουλέψω κατευθείαν σε αρχεία συστήματος/plugins. Επίσης, τα caching plugins όπως το WP Rocket είναι μια κοροϊδία για όσους το πληρώνουν, αφενός γιατί δεν έχουν κέρδη σε ταχύτητα, αφετέρου αναζητούν βοήθεια αλλά θέλουν να κρατήσουν το plugin που πλήρωσαν. Ουτοπικό.

✓ Database Optimization: Οι δυναμικές ιστοσελίδες από WordPress, Joomla, eCommerce sites, αποθηκεύουν δεδομένα στη βάση με τη μορφή πινάκων. Οι βάσεις δεδομένων είναι δομημένες με τεχνολογία 3 δεκαετιών πίσω, με πάρα πολλά προβλήματα στις επιδόσεις ταχύτητας. Κάθε plugin που βάζεις, δημιουργεί έναν ή περισσότερους πίνακες στη βάση και το εκπληκτικό είναι ότι θα τους αφήσει εκεί ακόμη και με την απεγκατάστασή του. Λίγα plugins διαγράφουν τους πίνακές τους. Αυτό σημαίνει ότι σε διάστημα μερικών μηνών η βάση θα έχει γίνει ένα παχύδερμο που χρειάζεται καθάρισμα. Επίσης, υπάρχουν άλλα προβλήματα όπως τα posts σε draft mode, comments, post revisions, transient data, που επιβαρύνουν τη βάση. Η βελτίωση μιας βάσης δεδομένων είναι ξεχωριστό project αλλά σημαντικό για την επίτευξη ταχύτητας γιατί στα δυναμικά sites ό,τι και να γίνει, θα περιμένει τη βάση να αποκριθεί προσφέροντας περιεχόμενο (γι'αυτό δουλεύουμε το CDN).

✓ Plugins: είναι δεδομένο ότι τα sites που έχουν πάνω από 10-15 plugins δε θα αποκτήσουν ποτέ ικανοποιητική ταχύτητα. Έχω δουλέψει με WP sites που είχαν 40, ακόμη και περισσότερα από 50 plugins, μια σκέτη τρέλα. Το μεγάλο πρόβλημα είναι τα eshops που έχουν και πολλά πρόσθετα όπως το Woocommerce για να υποστηρίξουν το κατάστημα. Αυτό είναι κλασικό παράδειγμα κακογραμμένων plugins που θα μπορούσαν να επιτελέσουν τις λειτουργίες με λιγότερο φόρτο αλλά δεν ενδιαφέρονται να εξοικονομήσουν πόρους. Ένα άλλο τραγικό παράδειγμα, βρήκα όταν δούλεψα σε ένα WP site που δεχόταν χορηγίες με το Give plugin. Ο developer αποφάσισε να μοιράσει τις λειτουργίες του σε μια σειρά άλλων αδελφών plugins και αντί για 1, είχαν εγκαταστήσει ακόμα 10 περίπου. Τραγική κατάσταση και δεν ήταν καν στο επίπεδο πολυπλοκότητας του Woocommerce. Ο developer υποστήριζε ότι δεν υπάρχει άλλος τρόπος να τρέξει ένα τόσο σημαντικό (sic) plugin χωρίς συμπαρομαρτούντα άχρηστα πρόσθετα.

✓ Redirects: τα redirects καταχωρούν άσκοπα HTTP requests που πέφτουν στο πουθενά. Αυτά μπορεί να οφείλονται σε κακογραμμένο template ή σε λάθη του χειριστή του site.

Η Google εισάγει τη σήμανση fast links labelling μέσω του link context menu στον Chrome (Android) για να προσφέρει καλή εμπειρία πλοήγησης στους χρήστες. Αυτό σημαίνει ότι οι γρήγορες ιστοσελίδες παίρνουν ειδική σήμανση και συνεπώς περισσότερο traffic από τις αργές που ενδεχομένως να μην πάρουν αρκετά κλικς χωρίς τη σήμανση. Η σήμανση βασίζεται σε δεδομένα από το δείκτη Core Web Vitals που ποσοτικοποιεί την εμπειρία του χρήστη βάσει input από χρήστες του Chrome (αυτό που λέγαμε ότι παρακολουθεί τα ίχνη του χρήστη και ποιες ιστοσελίδες είναι γρήγορες). Ο δείκτης Core Web Vitals μετρά χρόνο φόρτωσης, απόκρισης, σταθερότητα περιεχομένου καθώς φορτώνει η σελίδα (να μη φεύγουν σχεδιαστικά κομμάτια εκτός πλαισίου - Layout errors).