Ταχύτητα
Όταν κάθεστε να φάτε σε ένα εστιατόριο ή πάτε σε ένα καφέ, αν ο σερβιτόρος αργεί να σας εξυπηρετήσει, αυτό συνήθως σας δυσαρεστεί και καταλήγετε να μην περνάτε ωραία, που είναι ο λόγος για τον οποίο πήγατε εξαρχής στο κατάστημα.
Στην περίπτωση που η ενόχληση είναι αρκετά μεγάλη η επίσκεψη αυτή μπορεί να συνοδευτεί και από μια αρνητική κριτική για το κατάστημα σε υπηρεσίες όπως το Google Business και το Tripadvisor, προκειμένου να διαβάσουν κι άλλοι υποψήφιοι πελάτες την εμπειρία σας και να αποθαρρυνθούν από το να το επιλέξουν.
Με τον ίδιο ακριβώς τρόπο, η χαμηλή ταχύτητα ενός ιστότοπου μπορεί να οδηγήσει σε κακή εμπειρία για τους επισκέπτες και να συνοδεύεται και από κακή κατάταξη στα αποτελέσματα των μηχανών αναζήτησης.
Η ταχύτητα (ή απόδοση) ιστότοπου (web speed ή web performance) αναφέρεται στο πόσο γρήγορα ένα πρόγραμμα περιήγησης (browser) μπορεί να φορτώσει πλήρως λειτουργικές επιμέρους ιστοσελίδες.
Οι ιστότοποι με κακή (αργή) απόδοση τείνουν να που απομακρύνουν τους χρήστες.
Αντίθετα, οι ιστότοποι που φορτώνουν γρήγορα λαμβάνουν συνήθως περισσότερη επισκεψιμότητα και έχουν καλύτερα ποσοστά μετατροπών.
Η ταχύτητα μετράει
Πολλές μελέτες έχουν δείξει ότι η ταχύτητα ιστότοπου επηρεάζει το ποσοστό μετατροπών (ή το ρυθμό με τον οποίο οι χρήστες ολοκληρώνουν μια επιθυμητή ενέργεια).
Όχι απλά περισσότεροι χρήστες παραμένουν σε γρήγορους ιστότοπους, αλλά επίσης οι τελευταίοι πετυχαίνουν μετατροπές με υψηλότερους ρυθμούς σε σύγκριση με πιο αργούς ιστότοπους.
Ορισμένες εταιρείες έχουν διαπιστώσει ότι η μείωση του χρόνου φόρτωσης της σελίδας κατά μερικά μόνο χιλιοστά του δευτερολέπτου αυξάνει τις μετατροπές:
Η Mobify για παράδειγμα, διαπίστωσε ότι η μείωση του χρόνου φόρτωσης της αρχικής σελίδας κατά 100 χιλιοστά του δευτερολέπτου (0,1 δευτερόλεπτο) είχε ως αποτέλεσμα +1,11% αύξηση στο ποσοστό μετατροπών.
Η εταιρεία λιανικής πώλησης AutoAnything παρουσίασε αύξηση 12-13% στις πωλήσεις μετά τη μείωση του χρόνου φόρτωσης της σελίδας στο μισό.
Η Walmart ανακάλυψε ότι η βελτίωση του χρόνου φόρτωσης της σελίδας κατά ένα δευτερόλεπτο αύξησε το ποσοστό μετατροπών κατά 2%.
Περί το 2006, η Amazon διαπίστωσε ότι κάθε 100ms καθυστέρησης φόρτωσης των σελίδων της, της κόστιζε περίπου 1% σε πωλήσεις.
Για να υπάρχει μια τάξη μεγέθους, το 1% αυτό θα στοίχιζε στην Amazon περίπου 107 εκ. δολάρια χρόνο, ενώ σήμερα το ποσό αυτό θα ανέρχονταν σε περίπου 3,8 δις δολάρια.
100ms καθυστέρησης θα στοίχιζαν 3,8 δις δολάρια το χρόνο!
Η Google βρήκε επίσης ότι επιπλέον 0,5 δευτερόλεπτα στον χρόνο δημιουργίας των σελίδων αποτελεσμάτων σε μια αναζήτηση μείωνε την επισκεψιμότητα στα αποτελέσματα κατά 20%.
Ένας μεσίτης στις Ηνωμένες Πολιτείες Αμερικής θα μπορούσε να χάσει 4 εκατομμύρια δολάρια σε έσοδα ανά χιλιοστό του δευτερολέπτου εάν η ηλεκτρονική πλατφόρμα συναλλαγών του είναι 5 χιλιοστά του δευτερολέπτου πίσω από τον ανταγωνισμό!
Fast forward 10 χρόνια αργότερα.
Μια μελέτη της Akamai του 2017 έδειξε ότι κάθε καθυστέρηση 100 χιλιοστών του δευτερολέπτου στο χρόνο φόρτωσης του ιστότοπου μπορεί να βλάψει τα ποσοστά μετατροπών κατά 7% -δηλαδή μια σημαντική πτώση στις πωλήσεις-.
To ebay σε ένα άρθρο που δημοσίευσε το 2019, ανακοίνωσε ότι για κάθε 100 χιλιοστά του δευτερολέπτου βελτίωση στον χρόνο φόρτωσης της σελίδας αναζήτησης, σημείωνε αύξηση 0,5% στον αριθμό εκείνων που πατούσαν “Προσθήκη στο καλάθι” για κάποιο από τα προϊόντα του.
Εικόνα 8.1: Κάθε 100ms αύξηση στην ταχύτητα φόρτωσης των σελίδων του Ebay προκαλεί αύξηση κατά 0,5% στο ποσοστό προσθήκης προϊόντων στο καλάθι (πηγή: ebay.com).
Η καθυστέρηση στην απόδοση φόρτωσης μιας ιστοσελίδας δεν αποτελεί σήμερα απλά επιλογή.
Είναι λόγος -από τους βασικούς- για την επιτυχία ή αποτυχία.
Το ποσοστό εγκατάλειψης (bounce rate), το ποσοστό δηλαδή των χρηστών που εγκαταλείπουν έναν ιστότοπο αφού δουν μόνο μία σελίδα και χωρίς να έχουν κάνει κάποια ενέργεια σε αυτήν, θα αυξηθεί δραματικά αν η σελίδα δεν είναι πλήρως λειτουργική σε λίγα μόνο δευτερόλεπτα.
Οι χρήστες είναι πιθανό να κλείσουν το παράθυρο ή να επιλέξουν κάποιον ανταγωνιστή.
Το BBC ανακάλυψε ότι έχασε το 10% των συνολικών χρηστών τους για κάθε επιπλέον δευτερόλεπτο που χρειαζόταν για τη φόρτωση των σελίδων του.
Επίσης, η ίδια η Google πριμοδοτεί γρήγορα site και τιμωρεί τα αργά, προβάλλοντας τα σε χαμηλότερες θέσεις στα αποτελέσματα των αναζητήσεών της.
Ποιοί όμως παράγοντες επηρεάζουν την ταχύτητα των σελίδων στο internet; Οι πιο βασικοί είναι οι εξής:
- Μέγεθος σελίδας: Κάθε σελίδα αποτελείται από μια σειρά αρχείων, τα οποία συνδυαζόμενα μεταξύ τους παρέχουν το τελικό αποτέλεσμα που βλέπουμε στις οθόνες μας.
Ο όγκος των πόρων αυτών που χρειάζεται μια σελίδα για να φορτώσει έχει τεράστιο αντίκτυπο στην απόδοση του ιστότοπου.
Μεγάλα αρχεία JavaScript, περιεχόμενο βίντεο, βαριά αρχεία CSS και εικόνες υψηλής ευκρίνειας προσθέτουν σημαντικό «βάρος» ή χρόνο φόρτωσης σε μια ιστοσελίδα.
Για να επιστρέψουμε στο παράδειγμα του εστιατορίου, ένας σερβιτόρος που παραδίδει 10 πιάτα σε ένα τραπέζι αντί για δύο ή τρία θα σερβίρει το τραπέζι πιο αργά.
Ομοίως, μια σελίδα που χρειάζεται περισσότερους πόρους για φόρτωση θα φορτώνει πιο αργά. - Δίκτυο: Ακόμα κι αν ένας ιστότοπος έχει σχεδιαστεί για να είναι ελαφρύς και αποδοτικός, ενδέχεται να μην φορτώνεται γρήγορα στα προγράμματα περιήγησης λόγω της βραδύτητας του δικτύου. Η τοπική δικτύωση και η ποιότητα των υπηρεσιών του ISP (π.χ. Cosmote, Vodafone κτλ.) επηρεάζουν τη συνδεσιμότητα του δικτύου.
Επιπλέον, οι κινητές συσκευές που χρησιμοποιούν 3G ή 4G αντί να συνδέονται στο Διαδίκτυο μέσω WiFi θα έχουν συνήθως πιο αργές συνδέσεις δικτύου.
Αν και αυτό είναι σε μεγάλο βαθμό εκτός του ελέγχου των προγραμματιστών, υπάρχουν σήμερα αρκετές τεχνικές για γρήγορη φόρτωση των πόρων, ακόμη και μέσω αργών συνδέσεων (π.χ. Συμπίεση αρχείων, φιλοξενία περιεχομένου με CDN κτλ). - Τοποθεσία φιλοξενίας (server). Εάν οι πόροι μιας σελίδας πρέπει να διανύσουν πολύ δρόμο για να φτάσουν στον προορισμό τους εκεί, αυτό θα έχει ως αποτέλεσμα μεγάλο λανθάνοντα χρόνο δικτύου (latency).
Για παράδειγμα, εάν τα αρχεία HTML και CSS ενός ιστότοπου φιλοξενούνται σε ένα κέντρο δεδομένων στο Οχάιο και οι εικόνες του φιλοξενούνται σε ένα κέντρο δεδομένων στη Γερμανία, ένας χρήστης στην Ευρώπη θα πρέπει να περιμένει όσο όλα αυτά τα αρχεία ταξιδεύουν χιλιάδες μίλια πριν φτάσουν στη συσκευή τους.
Φυσικά υπάρχουν πολλά εργαλεία και τρόποι για τους επαγγελματίες σχεδιασμού και προγραμματισμού ιστοσελίδων προκειμένου να κάνουν γρήγορες σελίδες.
Αν και αυτά που ακολουθούν στο κεφάλαιο αυτό απευθύνονται κυρίως σε νέους ή άπειρους προγραμματιστές που θα θελήσουν να μάθουν τι εργαλεία μπορούν να χρησιμοποιήσουν για να αξιολογήσουν ένα site και με ποιους τρόπους μπορούν να το βελτιστοποιήσουν, επιχειρηματίες και ιδιοκτήτες μικρών και μεσαίων sites μπορούν επίσης να βρουν χρήσιμες πληροφορίες για να ελέγξουν και ενδεχομένως να αναθέσουν μια εργασία βελτιστοποίησης της ταχύτητας του site τους.
Οι βασικές αρχές που αναφέρθηκαν παραπάνω ισχύουν για όλους και πηγάζουν από τους νόμους της φυσικής και της επιστήμης των υπολογιστών: οι απαιτούμενοι πόροι που απαιτούνται για να “ζωγραφιστεί” μια σελίδα στο κινητό μας πρέπει να ζητηθούν, να μεταφερθούν και να αποκωδικοποιηθούν.
Ας δούμε αρχικά πως μπορεί κάποιος σήμερα να αξιολογήσει την ταχύτητα μιας σελίδας: να σας συστήσω τα Web Vitals!
Web Vitals
Τον Μάιο του 2020, η Google ανακοίνωσε ένα project με το οποίο θα αξιολογεί στο εξής την απόδοση των σελίδων, το οποίο ονόμασε Core Web Vitals (web.dev/vitals).
Τα Core Web Vitals αποτελούν ένα σετ μετρήσεων εστιασμένων στους χρήστες, που σχεδιάστηκαν για να μετρούν την “υγεία” μιας σελίδας όσον αφορά την παροχή μιας ομαλής και απρόσκοπτης εμπειρίας.
Σύμφωνα με την Google, η βελτιστοποίηση για την ποιότητα της εμπειρίας χρήστη είναι το κλειδί για τη μακροπρόθεσμη επιτυχία οποιουδήποτε ιστότοπου στο internet.
Είτε είστε ιδιοκτήτης επιχείρησης, έμπορος ή προγραμματιστής κτλ, τα Web Vitals μπορούν να σας βοηθήσουν να ποσοτικοποιήσετε την εμπειρία του ιστότοπού σας και να εντοπίσετε ευκαιρίες βελτίωσης.
Τα Web Vitals είναι μια πρωτοβουλία της Google για την παροχή ενοποιημένης καθοδήγησης για ποιοτικά σήματα, που είναι απαραίτητα για την παροχή μιας εξαιρετικής εμπειρίας χρήστη στον ιστό.
Μέχρι τα Web Vitals, υπήρχαν μια σειρά από εργαλεία για τη μέτρηση και την αναφορά της απόδοσης ιστοσελίδων.
Αν και ορισμένοι, κυρίως προγραμματιστές, ήταν ειδικοί στη χρήση τέτοιων εργαλείων, ωστόσο υπήρχαν αρκετοί που θεωρούσαν ότι η αφθονία τόσο των εργαλείων όσο και των μετρήσεων δεν βοηθούσε στο να υπάρχει ένας κοινός αποδεκτός ορισμός του τι είναι καλό και τι όχι.
Οι ιδιοκτήτες ιστοτόπων δεν πρέπει να είναι γκουρού απόδοσης ιστοσελίδων προκειμένου να κατανοήσουν την ποιότητα της εμπειρίας που προσφέρουν στους χρήστες τους.
Η πρωτοβουλία Web Vitals είχε ως στόχο να απλοποιήσει το τοπίο και να βοηθήσει ώστε όλοι να εστιάσουν στις μετρήσεις που έχουν μεγαλύτερη σημασία.
Τα Core Web Vitals είναι το υποσύνολο των Web Vitals που ισχύουν για όλες τις ιστοσελίδες, θα πρέπει να μετρώνται από όλους τους κατόχους ιστότοπων και εμφανίζονται σε όλα τα εργαλεία της Google.
Κάθε ένα από τα Core Web Vitals αντιπροσωπεύει μια ξεχωριστή πτυχή της εμπειρίας του χρήστη, είναι μετρήσιμο στο πεδίο και αντικατοπτρίζει την πραγματική εμπειρία ενός κρίσιμου αποτελέσματος με επίκεντρο τον χρήστη.
Το τρέχον σύνολο των Core Web Vitals σήμερα εστιάζει σε τρεις πτυχές της εμπειρίας χρήστη: φόρτωση, διαδραστικότητα και οπτική σταθερότητα, και περιλαμβάνει τις ακόλουθες μετρήσεις (και τα αντίστοιχα όριά τους):
Εικόνα 8.2: Core Web Vitals.
- Largest Contentful Paint (LCP) - ζωγράφισμα μεγαλύτερης περιοχής περιεχομένου: μετρά την ταχύτητα φόρτωσης.
Για να παρέχεται μια καλή εμπειρία χρήστη, το LCP (πρακτικά, το μεγαλύτερο στοιχείο περιεχομένου της σελίδας όπως απεικονίζεται στην οθόνη) θα πρέπει να εμφανίζεται εντός 2,5 δευτερολέπτων από την πρώτη έναρξη της φόρτωσης της σελίδας. - First Input Delay (FID) - καθυστέρηση πρώτης εισαγωγής: μετρά τη διαδραστικότητα, δηλαδή τον χρόνο μέχρι η σελίδα να μπορεί να αποκριθεί στην ενέργεια (π.χ. κλικ) ενός επισκέπτη.
Για να παρέχουν μια καλή εμπειρία χρήστη, οι σελίδες θα πρέπει να έχουν FID 100 χιλιοστών του δευτερολέπτου ή λιγότερο. - Content Layout Shift (CLS) - αθροιστική μετατόπιση διάταξης (CLS): μετρά την οπτική σταθερότητα.
Για να παρέχουν μια καλή εμπειρία χρήστη, οι σελίδες θα πρέπει να διατηρούν CLS 0,1 ή λιγότερο.
Για καθεμία από τις παραπάνω μετρήσεις, για να διασφαλίσετε ότι επιτυγχάνετε τον προτεινόμενο στόχο για τους περισσότερους χρήστες σας, ένα καλό όριο για μέτρηση είναι το 75ο εκατοστημόριο των φορτώσεων σελίδων, τμηματοποιημένο σε κινητές συσκευές και επιτραπέζιους υπολογιστές (στην στατιστική, το 75ο εκατοστημόριο ενός συνόλου δεδομένων είναι η τιμή στην οποία το 75% των δεδομένων είναι κάτω από αυτή).
Ενώ τα Core Web Vitals είναι οι κρίσιμες μετρήσεις για την κατανόηση και την παροχή μιας εξαιρετικής εμπειρίας χρήστη, υπάρχουν και κάποιες ακόμη ζωτικής σημασίας μετρήσεις.
Αυτά τα άλλα Web Vitals συχνά χρησιμεύουν ως συμπληρωματικές μετρήσεις προς τα Core Web Vitals, για να βοηθήσουν στην αποτύπωση μεγαλύτερου μέρους της εμπειρίας ή για να βοηθήσουν στη διάγνωση ενός συγκεκριμένου ζητήματος.
Για παράδειγμα, οι μετρήσεις Time to First Byte (TTFB) και First Contentful Paint (FCP) είναι και οι δύο ζωτικής σημασίας πτυχές της εμπειρίας φόρτωσης και είναι χρήσιμες για τη διάγνωση προβλημάτων με το LCP (αργοί χρόνοι απόκρισης διακομιστή ή πόροι αποκλεισμού απόδοσης, αντίστοιχα).
Ομοίως, μετρήσεις όπως ο συνολικός χρόνος αποκλεισμού - Total Blocking Time (TBT) και ο χρόνος έως τη διάδραση - Time to Interaction (TTI) είναι εργαστηριακές μετρήσεις που είναι ζωτικής σημασίας για τη διάγνωση πιθανών ζητημάτων αλληλεπίδρασης που θα επηρεάσουν το FID. Ωστόσο, δεν αποτελούν μέρος του συνόλου Core Web Vitals επειδή δεν είναι μετρήσιμα σε πεδίο, ούτε αντικατοπτρίζουν ένα αποτέλεσμα με επίκεντρο τον χρήστη.
Η Google πιστεύει ότι τα Core Web Vitals είναι κρίσιμα για όλες τις εμπειρίες ιστού.
Ως αποτέλεσμα, εμφανίζει αυτές τις μετρήσεις σε όλα τα δημοφιλή εργαλεία της (π.χ. Search Console) και ταυτόχρονα συλλέγει ανώνυμα, πραγματικά δεδομένα για κάθε Core Web Vital και για κάθε site που έχει στις βάσεις δεδομένων της, προκειμένου να τα χρησιμοποιήσει για να αξιολογήσει και να κατατάξει κάθε ένα από αυτά.
Αυτά τα δεδομένα συλλέγονται και παρουσιάζονται μέσα από εργαλεία όπως το Chrome User Experience Report (CrUX) και δίνουν τη δυνατότητα στους κατόχους ιστότοπων να αξιολογούν γρήγορα την απόδοσή τους χωρίς να απαιτείται από αυτούς να ορίζουν χειροκίνητα αναλυτικά στοιχεία στις σελίδες τους.
Ας εξετάσουμε 3 από τα εργαλεία που έχει αναπτύξει η Google για να αποτυπώνουν την απόδοση ενός ιστοτόπου με βάση τα Core Web Vitals.
1. CrUX Dashboard on Data Studio.
Για να ξεκινήσετε, μεταβείτε στη διεύθυνση g.co/chromeuxdash.
Αυτό θα σας μεταφέρει στη σελίδα σύνδεσης CrUX, όπου μπορείτε να παρέχετε την διεύθυνση του site σας για το οποίο θα δημιουργηθεί ένας πίνακας εργαλείων.
Αφού συνδεθείτε με έναν Google λογαριασμό (gmail) καταλήγετε σε μια σελίδα όπως στην παρακάτω εικόνα (8.3), όπου θα πρέπει να βάλετε 1. το origin URL, δηλαδή την κεντρική διεύθυνση του site σας (δηλαδή https://arahova-pansion.gr, όχι υποσελίδα όπως https://arahova-pansion.gr/diamoni) και 2. να πατήσετε το Connect.
Εικόνα 8.3: Αρχική οθόνη σεταρίσματος site στο Chrome UX Report.
Εάν υπάρχει το όνομα προέλευσης (domain), θα μεταφερθείτε στη σελίδα σχήματος για τον πίνακα ελέγχου.
Αυτό σας δείχνει όλα τα πεδία που περιλαμβάνονται όπως τύπος σύνδεσης, ο μήνας του συνόλου δεδομένων κτλ.
Δεν χρειάζεται να κάνετε ή να αλλάξετε τίποτα σε αυτήν τη σελίδα, απλώς κάντε κλικ στην επιλογή Δημιουργία αναφοράς για να συνεχίσετε.
Εικόνα 8.4: Σελίδα πεδίων δεδομένων Chrome UX Report.
Αυτό ήταν.
Οδηγείστε στην επόμενη σελίδα όπου βλέπετε την αναφορά του site σας σχετικά με την απόδοση των Core Web Vitals, καθώς και κάποιες επιλογές για τη διάταξη των στοιχείων της αναφοράς.
Επιλέγετε απλά το View και έχετε την αναφορά σας, όπως στην παρακάτω εικόνα (για το site μου arahova-pansion.gr).
Εικόνα 8.5: Αναφορά Chrome UX Report για το site arahova-pansion.gr.
Στην αριστερή στήλη υπάρχει ένα menu πλοήγησης για κάθε ένα Web Vital χωριστά, ενώ η 1η επιλογή είναι τα 3 βασικά Web Vitals: LCP, FID, CLS.
Αν και τα κριτήρια της αλληλεπίδρασης (FID) και σταθερότητας (CLS) είναι καλά, παρατηρώ ότι το κριτήριο του χρόνου απόκρισης (LCP) ενδεχομένως χρήζει βελτίωσης, καθώς ένα αρκετά μεγάλο ποσοστό των επισκεπτών είναι σε πορτοκαλί και κόκκινη περιοχή (χρήζει βελτίωσης και κακή εμπειρία αντίστοιχα).
Εικόνα 8.6: Αναφορά LCP Chrome UX Report για το site arahova-pansion.gr: το LCP χρειάζεται βελτίωση.
Μπορώ να δω περισσότερες λεπτομέρειες για τη μετρική αυτή αν επιλέξω από το menu αριστερά το Largest Contentful Page (LCP), όπου θα δω την εξέλιξη του LCP στο χρόνο και επίσης μπορώ να επιλέξω μεταξύ των smartphone - laptop - desktop αν θέλω να δω περαιτέρω πληροφορίες για το που ακριβώς το arahova-pansion.gr χρειάζεται βελτίωση.
Εικόνα 8.7: Επιμέρους αναφορά LCP Chrome UX Report ανά μήνα για το site arahova-pansion.gr: το LCP χρειάζεται βελτίωση αν και παρουσιάζει βελτίωση από τον 02/2021.
Με τον τρόπο αυτό, κάποιος χωρίς να έχει καθόλου τεχνικές γνώσεις μπορεί να δει την απόδοση του site του σε σχέση με τα Core Web Vitals και να αποφασίσει αν χρειάζεται να αναθέσει σε κάποιον ειδικό μια εργασία βελτίωσης της απόδοσης.
Ακόμη κι αν αυτό συμβεί, ξέροντας ο ιδιοκτήτης ακριβώς ποια μετρική έχει πρόβλημα, θα μπορούσε να είναι πιο συγκεκριμένος σε μια πιθανή ανάθεση καθώς και να παρακολουθεί πως μια συγκεκριμένη εργασία απέδωσε στη διάρκεια του χρόνου και πόσο βελτίωσε την απόδοση του site του.
2. Search Console.
Το δεύτερο εργαλείο είναι το Google Search Console, για το οποίο έχουμε αναφέρει τη διαδικασία υποβολής και βασικής παρακολούθησης ενός site στο Κεφάλαιο 5: “Search Engines: υποβολή & παρακολούθηση”.
Από το menu αριστερά επιλέγουμε το Core Web Vitals και μεταφερόμαστε στη σελίδα παρουσίασης της απόδοσης του site.
Εκεί υπάρχουν 2 βασικές ενότητες - διαγράμματα για την απόδοση συνολικά των Web Vitals σε Mobile (κινητές συσκευές) και Desktop (σταθεροί υπολογιστές), όπως φαίνεται στην παρακάτω εικόνα.
Εικόνα 8.8: Βασική σελίδα παρακολούθησης Core Vitals στο Google Search Console.
Από τα γραφήματα μπορώ να δω ότι για το arahova-pansion.gr υπάρχουν 89 URLs (σελίδες) που μπορούν να βελτιωθούν. Επίσης δεν υπάρχουν σελίδες με καλή και σελίδες με κακή απόδοση με βάση τα Web Vitals.
Για να δούμε που ακριβώς οι 89 αυτές σελίδες χρήζουν βελτίωσης επιλέγουμε ένα από τα Open Report στις κάρτες Mobile - Desktop και μεταφερόμαστε στη σελίδα απόδοσης για τις κινητές συσκευές.
Εικόνα 8.9: Σελίδα παρακολούθησης Core Web Vitals σε κινητές συσκευές στο Google Search Console.
Στη σελίδα αυτή βλέπουμε την εξέλιξη απόδοσης σε κινητές συσκευές των σελίδων στο χρόνο ανάλογα με το χαρακτηρισμό τους ως καλές, χρειάζονται βελτίωση και κακές. Στο συγκεκριμένο παράδειγμα του arahova-pansion.gr και οι 89 σελίδες χρήζουν βελτίωσης, όπως είχαμε δει και από την προηγούμενη οθόνη.
Εδώ όμως μπορούμε να δούμε και ακριβώς σε ποια μετρική υπάρχει το πρόβλημα καθώς και την έκταση του προβλήματος.
Όπως φαίνεται στην παραπάνω εικόνα, οι 89 σελίδες έχουν θέμα με το LCP, για το οποίο χρειάζονται περισσότερο από 2 δευτερόλεπτα.
Εάν επιλέξουμε και κλικάρουμε την γραμμή με την αναφορά αυτή του προβλήματος οδηγούμαστε σε μια 3η οθόνη όπως στην παρακάτω εικόνα, όπου βλέπουμε κάποια παραδείγματα από σελίδες με αυτή την απόδοση, το μέσο LCP αυτού του σετ των σελίδων, που στη συγκεκριμένη περίπτωση είναι 3,1 δευτερόλεπτα, καθώς και ένα κουμπί Validate fix, το οποίο μπορούμε να πατήσουμε προκειμένου η Google να γνωρίζει ότι έχουμε αντιμετωπίσει και επιλύσει το ζήτημα και θα έπρεπε να το επαναξιολογήσει.
Εικόνα 8.10: Σελίδα παρακολούθησης LCP Web Vital σε κινητές συσκευές στο Google Search Console.
Και σε αυτό το εργαλείο, όπως και στο προηγούμενο, μπορεί κάποιος χωρίς να διαθέτει τεχνικές γνώσεις να καταλάβει πόσο καλό είναι το site του από πλευράς ταχύτητας και απόδοσης στους επισκέπτες του και να δρομολογήσει, εφόσον το επιθυμεί μια εργασία βελτιστοποίησης σε συγκεκριμένα τμήματα του site, αλλά και για συγκεκριμένες μετρικές (ταχύτητα, αλληλεπίδραση, σταθερότητα).
3. PageSpeed Insights.
Τα 2 προηγούμενα εργαλεία που αναλύσαμε, Chrome UX Report και Search Console Core Web Vitals Report αφορούν την γενική εικόνα ενός domain (κεντρική διεύθυνση τομέα) και κάποια στοιχεία για επιμέρους σελίδες ενός site, που είναι δειγματοληπτικά.
Ας δούμε κι ένα ακόμη εργαλείο για το πως μπορεί κάποιος να αναλύσει μια συγκεκριμένη σελίδα του site.
Το εργαλείο αυτό είναι το PageSpeed Insights της Google και μπορεί κάποιος να το δει στη διεύθυνση https://pagespeed.web.dev.
Επιλέγουμε ένα έγκυρο URL μιας ιστοσελίδας και τον εισάγουμε στην φόρμα της σελίδας του PageSpeed Insights και στη συνέχεια πατάμε Ανάλυση.
Για το παράδειγμα επιλέγω το URL arahova-pansion.gr/plirofories-axiotheata, μια αρκετά δημοφιλή σελίδα του site arahova-pansion.gr.
Εικόνα 8.11: Αρχική σελίδα αξιολόγησης PageSpeed Insights.
Το εργαλείο αναλαμβάνει να αναλύσει την συγκεκριμένη σελίδα.
Έχουμε 2 επιλογές που παρουσιάζονται ακριβώς κάτω από τη φόρμα: 1. Ανάλυση σε Κινητό τηλέφωνο και 2. Ανάλυση σε σταθερό υπολογιστή.
Για το συγκεκριμένο παράδειγμα αφήνω την προεπιλογή “Κινητό τηλέφωνο” καθώς οι περισσότεροι επισκέπτες του arahova-pansion.gr το επισκέπτονται από κινητές συσκευές.
Η ιστοσελίδα αναλύεται σε πραγματικό χρόνο από το εργαλείο και σε λίγο εμφανίζονται τα αποτελέσματα, όπως φαίνεται στην παρακάτω εικόνα.
Εικόνα 8.12: Σελίδα αξιολόγησης PageSpeed Insights.
Αρχικά υπάρχει η επιλογή να διαλέξει κάποιος το συγκεκριμένο URL (αυτό το URL) ή να δει τα συγκεντρωτικά στοιχεία για όλο το site (προέλευση). Αφήνω την προεπιλογή για το συγκεκριμένο URL μιας κι έχω ήδη δει την γενική κατάσταση από τα 2 προηγούμενα εργαλεία.
Στην κορυφή των αποτελεσμάτων υπάρχει η γενική αξιολόγηση ως προς τα Core Web Vitals (η συγκεκριμένη σελίδα έχει αποτύχει να περάσει τα τεστς).
Αμέσως μετά είναι τα αποτελέσματα για τα 3 βασικά Web Vitals (LCP, FID, CLS) και για το First Contentful Paint (FCP).
Εικόνα 8.13: Σελίδα αξιολόγησης Web Vitals PageSpeed Insights.
Φαίνεται πως η σελίδα χρειάζεται βελτίωση στο LCP καθώς βρίσκεται στην πορτοκαλί ζώνη, και το μεγαλύτερο τμήμα της οθόνης “ζωγραφίζεται” στις κινητές συσκευές μετά από 3,2 δευτερόλεπτα.
Βέβαια, ήδη γνωρίζουμε από τα 2 εργαλεία που έχουν αξιολογήσει το arahova-pansion.gr ότι το βασικό ζήτημα είναι στο συγκεκριμένο Web Vital, LCP. Εδώ ωστόσο, φαίνεται ότι και το First Contentful Paint (FCP), δηλαδή το πρώτο στοιχείο της σελίδας που “ζωγραφίζεται” στις κινητές συσκευές είναι εξίσου αργό, και χρειάζεται κατά μέσο όρο 2,3 δευτερόλεπτα.
Φαίνεται ότι είτε υπάρχουν πολλοί πόροι (αρχεία) τα οποία είναι απαραίτητα για να ξεκινήσει να “ζωγραφίζεται” η σελίδα και καθυστερούν την αρχική φόρτωση, είτε ενδεχομένως ότι υπάρχει θέμα στο δίκτυο ή στο πόσο γρήγορα απαντάει με την αποστολή των απαιτούμενων αρχείων ο server.
Πιο κάτω υπάρχει η γενική βαθμολογία της σελίδας και κάποια βασικά μεγέθη των μετρήσεων, όπως το First Contentful Page, το Time to Interaction, το Cumulative Layout Shift αλλά και μεγέθη όπως το Speed Index, ένα παλιότερο κριτήριο της απόδοσης των σελίδων κ.α. Επίσης υπάρχει μια εικόνα του τι είδε το εργαλείο όταν ανέλυσε το συγκεκριμένο URL (screenshot).
Εικόνα 8.14: Σελίδα αξιολόγησης Web Vitals PageSpeed Insights.
Ακόμη πιο κάτω είναι περισσότερο λεπτομερή στοιχεία για τους λόγους για τους οποίους βαθμολογήθηκε έτσι η σελίδα αλλά και ευκαιρίες που υπάρχουν προκειμένου να βελτιωθεί.
Τα στοιχεία αυτά είναι τρομερά χρήσιμα για τους προγραμματιστές που θα αναλάβουν να κάνουν τη σελίδα πιο γρήγορη και αποδοτική.
Αλλά ταυτόχρονα, είναι χρήσιμα και για κάποιον που δεν έχει τεχνικές γνώσεις καθώς μπορεί να αναθέσει και να παρακολουθεί την πρόοδο των εργασιών για την βελτιστοποίηση των σελίδων του site του.
Εικόνα 8.15: Σελίδα διαγνωστικών στοιχείων και ευκαιριών Web Vitals PageSpeed Insights.
Σε κάθε μια ευκαιρία μπορεί κανείς να κλικάρει ώστε να δει περισσότερες λεπτομέρειες, και επίσης στα δεξιά κάθε ευκαιρίας παρουσιάζεται και κατά προσέγγιση πόσο θα μπορούσε να κερδίσει η σελίδα εφόσον υλοποιούταν η συγκεκριμένη ευκαιρία.
Στο συγκεκριμένο παράδειγμα, βλέπω ότι εάν σέρβιρα τις εικόνες της σελίδας σε μορφές επόμενης γενιάς, όπως WebP και Avif θα μπορούσα να κερδίσω έως περίπου 4 δευτερόλεπτα στον ολικό χρόνο φόρτωσης της.
Εικόνα 8.16: Ευκαιρίες εικόνων PageSpeed Insights για τη σελίδα του arahova-pansion.gr.
Εάν επιλέξω να δω τα διαγνωστικά στοιχεία και τις ευκαιρίες για το συγκεκριμένο πρόβλημα που χρήζει βελτίωσης, δηλαδή το LCP, βλέπω τα στοιχεία της παρακάτω εικόνας, όπου φαίνεται ότι η σελίδα είναι αρκετά βαριά (3.218KB), το κείμενο δεν είναι άμεσα ορατό λόγω της χρήσης συγκεκριμένων γραμματοσειρών ενώ ευκαιρίες βελτίωσης αποτελούν η μείωση στοιχείων Javascript και CSS που δεν χρησιμοποιείται στη συγκεκριμένη σελίδα και η εξάλειψη πόρων που αποκλείουν την απόδοση.
Εικόνα 8.17: Διαγνωστικά και ευκαιρίες LCP για τη σελίδα του arahova-pansion.gr.
Ξέροντας αυτά, θα μπορούσα να αναθέσω σε κάποιον τη συγκεκριμένη εργασία και θα μπορούσα να παρακολουθήσω την πρόοδό της (στο ερώτημα γιατί δεν το φτιάχνω ο ίδιος, μιας και γνωρίζω και τι φταίει και πώς να το βελτιώσω, προς το παρόν μπορώ απλά να δικαιολογηθώ λέγοντας ότι δεν έχω βρει ακόμη το χρόνο να το κάνω 🙂).
Η απόδοση ενός site, όσον αφορά την ταχύτητα φόρτωσης, την απόκριση στις ενέργειες των επισκεπτών και την σταθερότητα της διάταξης, είναι μετρικές που μπορούν να καθορίσουν την επιτυχία ή αποτυχία στην μετατροπή ενός επισκέπτη σε πελάτη.
Κάθε δέκατο του δευτερολέπτου είναι κρίσιμο για το αν ένας επισκέπτης του website σας θα προχωρήσει στο επόμενο βήμα, μέχρι την τελική μετατροπή σε πελάτη ή θα εγκαταλείψει, προς έναν ανταγωνιστή ή ακόμη και προς την τελική εγκατάλειψη της προσπάθειας που ξεκίνησε στο να βρει και να εκτελέσει κάτι χρήσιμο για εκείνον.
Τα Web Vitals αντιπροσωπεύουν τα καλύτερα διαθέσιμα σήματα που υπάρχουν σήμερα για να μετρήσει κάποιος την ποιότητα της εμπειρίας στον ιστό.
Μελλοντικές βελτιώσεις ή προσθήκες στα Web Vitals θα πρέπει να αναμένονται καθώς πρόκειται για ένα σχετικά νέο project, ωστόσο οι υφιστάμενες μετρικές και τα διαθέσιμα εργαλεία είναι παραπάνω από επαρκή.
Σήμερα, μπορεί ένας που δεν έχει τεχνικές γνώσεις γύρω από την δημιουργία ιστοσελίδων να αξιολογήσει την απόδοση ενός ιστοτόπου. Πολύ περισσότερο, οι προγραμματιστές μπορούν εύκολα να διορθώσουν και να παρακολουθήσουν πως η δουλειά τους επηρεάζει πραγματικούς χρήστες των ιστοσελίδων.
Εκτός από τις προτάσεις που παρουσιάζονται στα εργαλεία αξιολόγησης που είδαμε παραπάνω, υπάρχουν σήμερα αρκετές πηγές που μπορούν οι προγραμματιστές να μπουν σε βάθος, και να κατανοήσουν και να ενημερωθούν σχετικά.
Για κάθε ένα από τα βασικά Web Vitals, οι επίσημες πηγές της Google είναι οι εξής:
Επίσης, στο Engineering blog του Skroutz.gr (engineering.skroutz.gr/tags/#performance) υπάρχουν κάποια άρθρα για προγραμματιστές που θέλουν να διαβάσουν πως διαχειρίστηκε και έλυσε προβλήματα απόδοσης ένα site υπερ-υψηλής επισκεψιμότητας, για το οποίο κάθε επισκέπτης είναι πολύ σημαντικός και πρέπει να έχει μια σπουδαία εμπειρία.
Σήμερα μπορούν όλοι να προσφέρουν γρήγορες ιστοσελίδες.
Σήμερα μπορούν όλοι να προσφέρουν υπέροχη εμπειρία στο internet.
Ως χρήστες οι ίδιοι, και πολύ περισσότερο ως δημιουργοί και ιδιοκτήτες τομέων, θέλουμε να χρησιμοποιούμε και να παρέχουμε σπουδαίες εμπειρίες!
Πράγματα που πρέπει να έχεις υπόψη:
- Κάθε εκατοστό δευτερολέπτου στην ταχύτητα φόρτωσης μιας σελίδας μετράει. Λίγα μόνο εκατοστά δευτερολέπτου μπορεί να κοστίσουν εκατοντάδες ή χιλιάδες ευρώ.
- Τα web vitals είναι ένας κοινός αποδεκτός τρόπος αξιολόγησης της ταχύτητας σελίδων, με βάση την εμπειρία των επισκεπτών.
- Σήμερα υπάρχουν πολλά αξιόπιστα δωρεάν εργαλεία αξιολόγησης της ταχύτητας φορτωσης. Δε χρειάζεται να είναι κανείς ειδικός για να τα χρησιμοποιήσει. Τέτοια είναι το Chrome User Experience Report, το Search Console και το Pagespeed Insights.
Cover image source: Unsplash.com