Core Web Vitals

Core Web Vitals τι είναι

Core Web Vitals – Όλα όσα πρέπει να γνωρίζετε

 

Core Web Vitals τι είναι | Core Web Vitals – Όλα όσα πρέπει να γνωρίζετε : H εργασία αυτή εκπονήθηκε από τον κο Παππά Χρήστο  στα πλαίσια του προγράμματος Ειδικός Προώθησης Ιστοσελίδων. SEO Expert που διοργάνωσε το ΚΕΔΙΒΙΜ του Παν. Αιγαίου σε συνεργασία με το Εργαστήριο ΤΠΕ Ήρων και την υποστήριξη της dreamweaver.gr

Περιεχόμενα

  • Γιατί δεν μπορείς να αγνοήσεις τα Core Web Vitals
  • Τι είναι όμως τα Core Web Vitals?
  • Τι σημαίνει το κάθε ένα από αυτά?
  • Το LCP μετράει
  • Το FID μετράει
  • Το CLS μετράει
  • Τι επηρεάζει όμως τα Core Web Vitals?
  • Παράγοντες που επηρεάζουν το LCP
  • Παράγοντες που επηρεάζουν το FID
  • Παράγοντες που επηρεάζουν το CLS

 

Γιατί δεν μπορείς να αγνοήσεις τα Core Web Vitals

Η Google έχει ανακοινώσει ότι από τον Μάιο του 2021 η εμπειρία του χρήστη (Google Page Experience) στην ιστοσελίδα θα συμπεριλαμβάνεται ως συντελεστής για την κατάταξη της ιστοσελίδας. Τα Core Web Vitals είναι ένα μέρος αυτού μαζί με τους είδη υπάρχων συντελεστές κατάταξης που είναι: mobile friendliness, safe browsing, intrusive interstitial guidelines και HTTPS security.

Πλέον δεν αρκεί απλά η ιστοσελίδα μας να είναι γρήγορη ή να προσφέρουμε μια καλή εμπειρία στον χρήστη, αλλά πρέπει να εστιάσουμε στην διατήρηση καις την αύξηση της οργανικής εμφάνισης της ιστοσελίδας μας. Για αυτό τον λόγο δεν πρέπει να αγνοήσουμε τα Core Web Vitals.

Τι είναι όμως τα Core Web Vitals?

Τα Core Web Vitals εστιάζουν στο πως η απόδοση της ιστοσελίδα μας συνδέεται με την προσφορά υψηλής εμπειρίας χρήστη. Για παράδειγμα στους χρήστες είναι υψίστης σημασίας το πόσο γρήγορα μπορούν να αλληλεπιδράσουν με την ιστοσελίδα μας, και μέσω των Core Web Vitals μετράμε ακριβώς αυτό.

Προς το παρόν υπάρχουν 3 δείκτες των Core Web Vitals:

1) Largest Contentful Paint (LCP) (απόδοση χρόνου φόρτωσης)
2) Cumulative Layout Shift (CLS) (οπτική σταθερότητα)
3) First Input Delay (FID) (διαδραστικότητα)

Core Web Vitals – Όλα όσα πρέπει να γνωρίζετε

Τι σημαίνει το κάθε ένα από αυτά?

Το LCP μετράει το πόσο χρειάζεται για να φορτώσει το πιο σημαντικό περιεχόμενο της σελίδας μας, το οποίο μπορεί να διαφέρει από σελίδα σε σελίδα ( κείμενο , εικόνα κλπ). Σύμφωνα με την Google , αυτός ο χρόνος επηρεάζει την αντίληψη των χρηστών για το πόσο γρήγορα φορτώνει η σελίδα μας.

Για παράδειγμα: Μπαίνουμε σε μια ιστοσελίδα και η αρχική εικόνα αργεί να φορτώσει και δεν εμφανίζεται κατευθείαν. Σχεδόν όλοι οι χρήστες θα ενοχληθούν από αυτό με μεγάλο ποσοστό να εγκαταλείπει την ιστοσελίδα κατευθείαν.

Για αυτό το λόγο το LCP είναι πιο σημαντικό από το συνολικό χρόνο που χρειάζεται να φορτώσει η σελίδα μας.

Χρόνοι LCP < 2.5 s είναι καλοί ενώ χρόνοι > 2,5 s χρειάζονται βελτίωση.

Το FID μετράει τον χρόνο μεταξύ, όταν ένας χρήστης αλληλεπιδράει με κάτι στην ιστοσελίδα μας (π.χ. ένα κουμπί) και όταν ο φυλλομετρητής του χρήστη μπορεί να ξεκινήσει να επεξεργάζεται αυτό το αίτημα.

Για παράδειγμα: Εάν κάνουμε κλικ σε ένα κουμπί για να μας εμφανίζει μια ενότητα πόσος χρόνος χρειάζεται για να μας την εμφανίζει?

Χρόνοι FID < 100 ms θεωρούνται καλοί ενώ χρόνοι > 100 ms χρειάζονται βελτίωση.

Το CLS μετράει κατά πόσο το περιεχόμενο της σελίδας μας μετακινείται η αλλάζει καθώς φορτώνει. Πρακτικά μετράει το πόσο σταθερή παραμένει η σελίδα μας.

Για παράδειγμα: Είμαστε σε μια ιστοσελίδα και πάμε να πατήσουμε ένα κουμπί και “αστοχούμε” γιατί καθώς φόρτωνε η σελίδα το κουμπί άλλαξε θέση ή ακόμη μπορεί και να πατήσουμε το λάθος κουμπί. Αυτό οδηγεί σε εκνευρισμό και μειώνει σημαντικά την εμπειρία μας στην ιστοσελίδα.

Χρόνοι CLS < 0,1 s θεωρούνται καλοί ενώ χρόνοι > 0,1 s χρειάζονται βελτίωση.

Τι επηρεάζει όμως τα Core Web Vitals?

Παράγοντες που επηρεάζουν το LCP

1) Αργή ανταπόκριση από τον server

Ο φυλλομετρητής κάνει κάποιο αίτημα στον server και ο server αργεί να ανταποκριθεί με αποτέλεσμα το επιθυμητό περιεχόμενο να αργεί να εμφανιστεί στην οθόνη μας.

Διορθώνεται με: βελτίωση του Time to First Byte και χρησιμοποιώντας CDN.

2) Render-blocking JavaScript και CSS

Ο φυλλομετρητής έχει στείλει το αίτημα στον server και έχει παραλάβει το περιεχόμενο. Σε αυτό το σημείο για να αποδώσει το περιεχόμενο πρέπει πρώτα να αναλύσει την HTML από την σελίδα και να την κάνει αναγνώσιμη. Μετά από αυτό το περιεχόμενο θα εμφανίζεται πλήρως εκτός και εάν κάποιο JavaScript (JS) ή stylesheets μπλοκάρουν την ανάλυση της HTML με αποτέλεσμα η εμφάνιση του περιεχομένου να καθυστερήσει.

Διορθώνεται με: Αφαιρώντας αρχεία JS που δεν χρησιμοποιούνται.

3) Αργός χρόνος φόρτωσης πόρων

Αρχεία όπως εικόνες, βίντεο και block-level elements σαν HTML και CSS μπορούν να επηρεάσουν τον χρόνο φόρτωσης.

Διορθώνεται με: βελτιστοποιώντας τις εικόνες και συμπιέζοντας αρχεία CSS, JS, HTML.

Παράγοντες που επηρεάζουν το FID

Κατά κύριο λόγο η απόδοση στο FID επηρεάζεται από την εκτέλεση JS αρχείων. Όταν ο φυλλομετρητής είναι απασχολημένος να επεξεργαστεί βαριά αρχεία JS δεν μπορεί να επεξεργαστεί άλλα αιτήματα συμπεριλαμβανομένου και αυτά του χρήστη. Αποτέλεσμα ο χρόνος εκτέλεσης των αιτημάτων να αυξάνεται.

Αφού λοιπόν τα αρχεία JS είναι το κλειδί για την βελτίωση του FID θα πρέπει να προσέξουμε τυχόν περιττά plugins που έχουμε προσθέσει στην ιστοσελίδα μας και ιδίως αυτά που είναι βασισμένα σε JS.

Θα πρέπει να αποφύγουμε και να αφαιρέσουμε οτιδήποτε μη απαραίτητο. Επίσης και τα βαριά θέματα (π.χ. WordPress themes) μπορούν να επηρεάσουν τους χρόνους FID. Όσο πιο περίπλοκο και περισσότερα JS αρχεία χρησιμοποιεί ένα θέμα τόσο περισσότερο επηρεάζει την απόδοση της σελίδας μας. Για αυτό πλέον πρέπει να  προτιμούνται απλά θέματα ενώ μπορείτε να διαβάσετε σχετικό άρθρο μας εδώ

Παράγοντες που επηρεάζουν το CLS

1) Εικόνες και Βίντεο χωρίς διαστάσεις

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

Διορθώνεται με: Προκαθορίζοντας το μήκος και ύψος των στοιχείων αυτών.

2) Ads, Embeds, και Iframes χωρίς διαστάσεις

Το ίδιο πρόβλημα με τις διαστάσεις όπως και στις εικόνες και βίντεο το συναντάμε και στα ads, embeds και iframes.

Διορθώνεται με: Προκαθορίζοντας το μήκος και ύψος των στοιχείων αυτών.

3) Animations και δυναμικό περιεχόμενο

Animations και δυναμικό περιεχόμενο όπως banners, ads ή feeds από το Instagram μπορούν να προκαλέσουν μετακινήσεις στην σελίδα. Για μια ακόμη φορά το πρόβλημα είναι ο μη αρκετός χώρος για τέτοια στοιχεία.

Πλέον καταλαβαίνουμε πόσο σημαντικό είναι να προκαθορίζουμε τον χώρο στην σελίδα μας για τέτοια αρχεία.

4) Γραμματοσειρές

Ακόμη και οι γραμματοσειρές μπορούν να προκαλέσουν κακή εμπειρία χρήστη και έχει να κάνει με το πόσο γρήγορα φορτώνουν. Συνήθως συναντάμε δύο προβλήματα: Flash of Unstyled text (FOUT) ή Flash of invisible text (FOIT).

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

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

Διορθώνεται με: το να φορτώσουμε από πριν τις γραμματοσειρές.

Σημείωση από dreamweaver.gr : Αντιλαμβάνεστε τον καθοριστικό ρόλο τον οποίο πλέον διαδραματίζει η κατασκευή της ιστοσελίδας στην διαδικασία προώθησης μιας ιστοσελίδας στο google και στις άλλες μηχανές αναζήτησης.