Τα Core Web Vital για την εμπειρία χρήστη έχουν ως εξής:
- Μεγαλύτερο περιεχόμενο περιεχομένου (LCP): Αυτή η μέτρηση μετρά το χρόνο που χρειάζεται για να εμφανιστεί στους χρήστες το κύριο περιεχόμενο μιας ιστοσελίδας. Η Google προτείνει ένα LCP κάτω των 2,5 δευτερολέπτων.
- First Input Delay (FID): Το FID μετρά τον χρόνο απόκρισης της ιστοσελίδας σας όταν ένας χρήστης αλληλεπιδρά με τη σελίδα για πρώτη φορά. Αυτό περιλαμβάνει κλικ συνδέσμου, πατήματα κουμπιών και προσαρμοσμένες ενέργειες JavaScript. Η Google συνιστά FID κάτω των 100 χιλιοστών του δευτερολέπτου.
- Αθροιστική αλλαγή διάταξης (CLS): Μετρά τον αριθμό των αλλαγών διάταξης που μετακινούν απροσδόκητα το κύριο περιεχόμενο της ιστοσελίδας. Αυτές οι αλλαγές επηρεάζουν την ικανότητα του χρήστη να διαβάσει το περιεχόμενο και να αλληλεπιδράσει σωστά με τη σελίδα. Η Google συνιστά βαθμολογία CLS 0,1 ή μικρότερη.
Εργαλεία για τη μέτρηση βασικών Web Vital
Η Google έχει ενσωματώσει το Core Web Vital σε πολλά από τα κορυφαία εργαλεία για προγραμματιστές και webmasters, ξεκινώντας από την Αναφορά εμπειρίας χρήστη του Chrome .
Αυτή η αναφορά συλλέγει πραγματικά δεδομένα από χρήστες καθώς περιηγούνται στον ιστό και, στη συνέχεια, τα κοινοποιεί σε προγραμματιστές μέσω εργαλείων όπως το PageSpeed Insights και το Google Search Console.
Το PageSpeed Insights αναλύει την απόδοση της ιστοσελίδας σας και προτείνει πώς να αυξήσετε την ταχύτητά του. Ελέγχει και τα τρία Core Web Vital τόσο σε προγράμματα περιήγησης για κινητά όσο και σε επιτραπέζιους υπολογιστές. Τα δεδομένα πεδίου αναφέρονται στα πραγματικά δεδομένα χρήστη από την Αναφορά εμπειρίας χρήστη του Chrome.
Στο Google Search Console , θα βρείτε Core Web Vital για τις ιστοσελίδες σας. Το Google Search Console χρησιμοποιεί τα δεδομένα από την Αναφορά εμπειρίας χρήστη του Chrome για να σας δείξει ζητήματα σε ολόκληρο τον ιστότοπό σας.
Η επέκταση Chrome Web Vital σας επιτρέπει να βλέπετε το Core Web Vital κατά την περιήγησή σας στον ιστό ή καθώς κάνετε αλλαγές στις ιστοσελίδες σας.
Η επέκταση μπορεί επίσης να ελέγξει τις τρέχουσες βαθμολογίες των ανταγωνιστών σας. Χρησιμοποιεί τη βιβλιοθήκη web-vitals μαζί με δεδομένα πεδίου από την Αναφορά εμπειρίας χρήστη του Chrome.
Κάθε ένα από αυτά τα εργαλεία σάς επιτρέπει να προβάλετε τα LCP, FID και CLS για τον ιστότοπό σας. Σε ιστότοπους με πολύ λίγη επισκεψιμότητα ενδέχεται να λείπουν ορισμένες μετρήσεις, κυρίως στο Google Search Console.
Για μια γρήγορη ανασκόπηση του Core Web Vital, μπορείτε να ξεκινήσετε ένα έργο για τον ιστότοπό σας στο Semrush . Χρησιμοποιώντας το εργαλείο ελέγχου ιστότοπου, μπορείτε να δείτε το LCP και το CLS για οποιεσδήποτε 10 σελίδες της επιλογής σας:
Δεν θα μπορείτε να ελέγξετε το FID σας με το εργαλείο ελέγχου ιστότοπου, αλλά παρακολουθεί μια παρόμοια μέτρηση: Συνολικός χρόνος αποκλεισμού (TBT). Διαβάστε περισσότερα σχετικά με το πώς λειτουργεί αυτή η μέτρηση με τον οδηγό της Semrush για τη μέτρηση του CWV με το εργαλείο Site Audit.
Εύρεση και επίλυση σφαλμάτων χάρτη ιστότοπου
με το Εργαλείο ελέγχου ιστότοπου
Μπορείτε να δείτε το Core Web Vital τόσο για επιτραπέζια όσο και για κινητά προγράμματα περιήγησης, αλλά θα πρέπει να δημιουργήσετε ένα έργο για κάθε συσκευή. Όταν εκτελείτε ξανά τον έλεγχό σας, το εργαλείο επιστρέφει οποιεσδήποτε αλλαγές στα vitals σας από τον τελευταίο έλεγχο. Αυτό μπορεί να είναι χρήσιμο εάν ενημερώνετε πολλές σελίδες ταυτόχρονα για απόδοση.
Γιατί έχει σημασία το Core Web Vital
Η Google πρόσθεσε επίσημα το Core Web Vital στον αλγόριθμο αναζήτησης . Η πλήρης διάθεση της ενημέρωσης εμπειρίας σελίδας θα πρέπει να έχει ολοκληρωθεί έως τον Αύγουστο του 2021 .
Η βελτίωση του LCP, του FID και του CLS θα μπορούσε να επηρεάσει θετικά τους χρήστες και την κατάταξή σας στις σελίδες αποτελεσμάτων αναζήτησης για κινητά. Η αύξηση ακόμη και μιας θέσης στην πρώτη σελίδα των αποτελεσμάτων αναζήτησης μπορεί να οδηγήσει σε σημαντική αύξηση της επισκεψιμότητας.
Το ίδιο ισχύει και για την εμπειρία χρήστη. Εάν μπορείτε να βελτιώσετε την εμπειρία χρήστη, μπορεί να οδηγήσει σε μια σημαντική αύξηση της επιχείρησης από θετικές παραπομπές από στόμα σε στόμα, κριτικές και επαναλαμβανόμενες εργασίες.
Η παροχή κακής εμπειρίας χρήστη με τη μορφή ιστότοπου με αργή φόρτωση μπορεί να οδηγήσει σε δυσμενή αύξηση του ποσοστού εγκατάλειψης. Το υψηλότερο ποσοστό εγκατάλειψης μπορεί να σημαίνει ότι οι χρήστες εγκαταλείπουν τον ιστότοπό σας χωρίς κύλιση, κλικ ή, το σημαντικότερο, μετατροπή.
Η Google διαπίστωσε ότι το ποσοστό εγκατάλειψης για μια ιστοσελίδα που διαρκεί ένα έως πέντε δευτερόλεπτα για τη φόρτωση αυξάνεται κατά 90%.
Πώς να βελτιώσετε το Core Web Vital
Τώρα που γνωρίζετε τι είναι το Core Web Vital και πώς να τα μετρήσετε στον ιστότοπό σας, ας δούμε μερικές προτάσεις για τη βελτίωση αυτών και την εμπειρία του χρήστη σας.
Το επίπεδο ελέγχου που έχετε στον ιστότοπο και τον διακομιστή σας εξαρτάται από την πλατφόρμα που χρησιμοποιείτε για τον ιστότοπό σας (WordPress, Shopify κ.λπ.) και την εταιρεία φιλοξενίας ιστοσελίδων.
Πώς να βελτιώσετε τη μεγαλύτερη περιεχομένη βαφή
Η Google προσφέρει πολλές συμβουλές για τη βελτιστοποίηση του ιστότοπού σας και τη βελτίωση της μέτρησης Μεγαλύτερης περιεκτικότητας χρωμάτων για τις ιστοσελίδες σας. Ξεκινήστε με τον διακομιστή ιστού σας. Εάν αντιμετωπίζετε σοβαρές καθυστερήσεις, ίσως είναι καιρός να αναβαθμίσετε τη φιλοξενία Ιστού σας από κοινόχρηστο σε ειδικό διακομιστή.
Εξετάστε τυχόν διαδικασίες που ενδέχεται να εκτελούνται στον ιστότοπό σας που μπορούν να απενεργοποιηθούν ή να βελτιστοποιηθούν καλύτερα για απόδοση. Σε έναν ιστότοπο WordPress, για παράδειγμα, μπορείτε να μειώσετε τον αριθμό των διεργασιών που χειρίζονται η βάση δεδομένων σας, καταργώντας παλιές ή αχρησιμοποίητες προσθήκες.
Η δεύτερη συμβουλή που προσφέρει η Google είναι να χρησιμοποιήσει ένα δίκτυο παράδοσης περιεχομένου (CDN). Οι υπηρεσίες CDN μερικές φορές περιλαμβάνονται σε προγράμματα φιλοξενίας σε επιχειρηματικό επίπεδο.
Εάν όχι, μπορείτε να αναζητήσετε υπηρεσίες όπως το Google Cloud ή το Cloudflare για να αυξήσετε τους χρόνους φόρτωσης, διανέμοντας το περιεχόμενό σας σε διακομιστές σε ολόκληρο τον κόσμο. Οι υπηρεσίες CDN διασφαλίζουν ότι ο ιστότοπός σας φορτώνεται γρήγορα, ανεξάρτητα από το πόσο μακριά βρίσκονται οι χρήστες του διακομιστή ιστού σας.
Στη συνέχεια, προσωρινά αποθηκεύστε το περιεχόμενό σας, ώστε οι σελίδες HTML να προβάλλονται πρώτα ως προσωρινή μνήμη. Όταν το στατικό σας περιεχόμενο HTML αποθηκεύεται προσωρινά, δεν χρειάζεται να φορτώνεται κάθε φορά που ένας χρήστης επισκέπτεται την ιστοσελίδα σας.
Οι κάτοχοι ιστότοπων του WordPress μπορούν να χρησιμοποιούν πρόσθετα προσωρινής αποθήκευσης, όπως το W3 Total Cache ή το WP Fastest Cache, για να αποθηκεύουν αυτόματα το περιεχόμενό σας για ταχύτερη φόρτωση.
Εάν χρησιμοποιείτε άλλη υπηρεσία, ενδέχεται να έχει ρυθμίσεις προσωρινής αποθήκευσης που μπορείτε να διαμορφώσετε ώστε να αποθηκεύει προσωρινά το περιεχόμενό σας. Σημειώστε ότι οι υπηρεσίες προσωρινής αποθήκευσης δεν μπορούν να χειριστούν αιτήματα διακομιστή από υπηρεσίες τρίτων όπως το Facebook.
Οι προεπιλογές μπορούν επίσης να βελτιώσουν τις ταχύτητες φόρτωσης. Αυτά είναι απαραίτητα όταν φορτώνετε περιεχόμενο που προέρχεται από τομέα διαφορετικό από τον δικό σας. Αντί να φορτώνουν νέα στοιχεία από άλλους τομείς σε ολόκληρη τη σελίδα, χρησιμοποιήστε το pronnect ως εξής στην ενότητα HEAD του HTML της ιστοσελίδας σας:
<link rel="preconnect" href="http://domain.com">
<link rel="dns-prefetch" href="http://domain.com"> Καθορίζοντας αυτές τις συνδέσεις εκ των προτέρων, η σελίδα σας δεν θα χρειαστεί να σταματήσει στο μερικώς φορτωμένο κύριο περιεχόμενο για να παραδώσει εικόνες ή άλλους πόρους στους επισκέπτες του ιστότοπού σας.
Μπορείτε επίσης να προφορτώσετε εξωτερικούς πόρους όπως CSS και JavaScript με τον ακόλουθο κώδικα:
<link rel="preload" as="style" > href="style.css">Αυτό θα διασφαλίσει ότι θα φορτωθούν στην αρχή και θα αποφευχθεί η πλήρης φόρτωση του περιεχομένου.
Άλλοι τρόποι βελτιστοποίησης τόσο του CSS όσο και του JavaScript περιλαμβάνουν την «ελαχιστοποίηση» (αφαίρεση περιττών χαρακτήρων) από φύλλα στυλ και σενάρια, αφαίρεση αχρησιμοποίητου κώδικα και μετακίνηση κώδικα που δεν απαιτείται για την αρχική φόρτωση της ιστοσελίδας σε έναν προφορτωμένο πόρο. Για τον πιο κρίσιμο κώδικα, σκεφτείτε να τον προσθέσετε στο διαδίκτυο.
Η Google συνιστά το CSSnano και csso να ελαχιστοποιήσει το CSS και το UglifyJS για να ελαχιστοποιήσει τη JavaScript. Μπορείτε επίσης να ελαχιστοποιήσετε το HTML με το HTML Minifier .
Το Google Chrome DevTools διαθέτει μια δυνατότητα κάλυψης που αναλύει τη χρήση CSS και JavaScript στη σελίδα σας. Μπορεί να αναγνωρίσει κώδικα που μπορεί να φορτωθεί σε έναν προφορτωμένο πόρο, υποθέτοντας ότι δεν χρησιμοποιείται από κάτι στη στοίβα τεχνολογίας σας.
Οι υπογεγραμμένες ανταλλαγές (SXGs) επιτρέπουν στους ιστότοπους να πιστοποιούν περιεχόμενο που παραδίδεται από τον τομέα τους μέσω τρίτου μέρους. Η Google συνεργάστηκε με το Cloudflare για τη δημιουργία πραγματικής διεύθυνσης URL AMP, επιτρέποντας στους εκδότες να εμφανίζουν την αρχική διεύθυνση URL του περιεχομένου τους σε περιεχόμενο AMP από αποτελέσματα βάσει αναζήτησης Google. Οι ιστότοποι που λαμβάνουν επισκεψιμότητα από την αναζήτηση θα δουν μια αύξηση στο LCP μετά την εφαρμογή SXGs.
Πρόσθετοι τρόποι με τους οποίους μπορείτε να βελτιώσετε το LCP σας είναι να βελτιστοποιήσετε και να συμπιέσετε τυχόν αρχεία κειμένου, εικόνες, βίντεο και στοιχεία αποκλεισμού που χρησιμοποιούνται στις ιστοσελίδες σας. Εξετάστε τις εικόνες που έχουν εισαχθεί στο HTML της σελίδας καθώς και εικόνες που χρησιμοποιούνται στο φόντο ή τα στοιχεία σχεδίασης του CSS ή των θεματικών αρχείων σας.
Για περισσότερες τεχνικές λεπτομέρειες σχετικά με το LCP, ανατρέξτε στο Σχέδιο έκθεσης ομάδας κοινοτήτων του W3C .
Πώς να βελτιώσετε την καθυστέρηση πρώτης εισαγωγής
Η βελτίωση του χρονισμού καθυστέρησης πρώτης εισαγωγής για τον ιστότοπό σας εξαρτάται από τη βελτιστοποίηση της JavaScript και τη χρήση σεναρίων τρίτων. Ο τελευταίος συνήθως αναφέρεται σε εργαλεία ανάλυσης ιστότοπου και σε οποιονδήποτε κώδικα που απαιτεί σενάριο από άλλο ιστότοπο.
Όπως αναφέρθηκε προηγουμένως, μπορείτε να βελτιστοποιήσετε τη χρήση JavaScript ελαχιστοποιώντας (αφαιρώντας περιττούς χαρακτήρες) από σενάρια, αφαιρώντας αχρησιμοποίητο κώδικα και μετακινώντας κώδικα που δεν απαιτείται για την αρχική φόρτωση της ιστοσελίδας σε έναν προφορτωμένο πόρο.
Χρησιμοποιήστε τη δυνατότητα κάλυψης του Google Chrome DevTools για να προσδιορίσετε κώδικα που μπορεί να εκφορτωθεί σε έναν προφορτωμένο πόρο.
Η Google συνιστά στο UglifyJS να ελαχιστοποιήσει τη JavaScript. Μπορείτε επίσης να ελαχιστοποιήσετε το HTML με το HTML Minifier και το CSS με CSSnano και csso .
Μπορείτε να μάθετε περισσότερα σχετικά με τις τεχνικές λεπτομέρειες πίσω από το API χρονισμού συμβάντων που αναλύει τον λανθάνοντα χρόνο αλληλεπίδρασης χρηστών σε μια αναφορά της ομάδας κοινοτήτων του W3C.
Τρόπος βελτίωσης της αθροιστικής αλλαγής διάταξης
Για να βελτιώσετε τη βαθμολογία CLS των ιστοσελίδων σας, πρέπει να πείτε στο πρόγραμμα περιήγησης πόσος χώρος για να δώσει στοιχεία καθώς φορτώνουν. Μπορείτε να το κάνετε προσθέτοντας χαρακτηριστικά συγκεκριμένου μεγέθους σε εικόνες και βίντεο.
Εναλλακτικά, μπορείτε να χρησιμοποιήσετε πλαίσια αναλογίας φιλικών προς τις διαστάσεις στο CSS. Και οι δύο θα επιτύχουν τον επιθυμητό στόχο της αποτροπής μιας απροσδόκητης μετατόπισης περιεχομένου κατά τη φόρτωση της σελίδας.
Συνιστάται επίσης η χρήση ενδείξεων στη σελίδα για στοιχεία που θα αλλάζουν όταν φορτώνεται μετά από αλληλεπίδραση ενός χρήστη με τη σελίδα. Η ενημέρωση του χρήστη ότι τα στοιχεία φορτώνουν στη σελίδα ενδέχεται να τους εμποδίσει να κάνουν κλικ στα στοιχεία αλλαγής.
Τελικές σκέψεις
Εάν δεν γνωρίζετε πόσο καλά αποδίδει ο ιστότοπός σας με τους χρήστες, ανατρέξτε στο Core Web Vital των κορυφαίων σελίδων σας, μεταβαίνοντας στον πίνακα ελέγχου έργου του ιστότοπού σας στο Semrush και επιλέγοντας το εργαλείο ελέγχου ιστότοπου.
Για να δείτε το Core Web Vital για τις δέκα σελίδες σας, κάντε κλικ στο κουμπί Προβολή λεπτομερειών και εκτελέστε ξανά την καμπάνια σας για προγράμματα περιήγησης για επιτραπέζιους υπολογιστές και κινητές συσκευές. Μάθετε περισσότερα σχετικά με τον τρόπο χρήσης του εργαλείου Site Audit για τη βελτίωση του Core Web Vital σήμερα.
0 Σχόλια