Τα Core Web Vitals είναι μετρήσεις ταχύτητας που αποτελούν μέρος των σημάτων Εμπειρίας σελίδας της Google που χρησιμοποιούνται για τη μέτρηση της εμπειρίας χρήστη. Οι μετρήσεις μετρούν το οπτικό φορτίο με τη μεγαλύτερη περιεχόμενη ζωγραφική (LCP), την οπτική σταθερότητα με τη αθροιστική μετατόπιση διάταξης (CLS) και τη διαδραστικότητα με την καθυστέρηση πρώτης εισαγωγής (FID).
Η εμπειρία σελίδων για κινητά και οι συμπεριλαμβανόμενες μετρήσεις Core Web Vital χρησιμοποιούνται επίσημα για την κατάταξη σελίδων από τον Μάιο του 2021. Τα σήματα για επιτραπέζιους υπολογιστές χρησιμοποιούνται επίσης από τον Φεβρουάριο του 2022.
Ο ευκολότερος τρόπος για να δείτε τις μετρήσεις για τον ιστότοπό σας είναι με την αναφορά Core Web Vitals στο Google Search Console . Με την αναφορά, μπορείτε εύκολα να δείτε εάν οι σελίδες σας κατηγοριοποιούνται ως "κακές διευθύνσεις URL", "Οι διευθύνσεις URL χρειάζονται βελτίωση" ή "καλές διευθύνσεις URL".
Τα κατώτατα όρια για κάθε κατηγορία είναι τα εξής:
Και να πώς φαίνεται η αναφορά:
Εάν κάνετε κλικ σε μία από αυτές τις αναφορές, θα έχετε μια καλύτερη ανάλυση των προβλημάτων με την κατηγοριοποίηση και τον αριθμό των διευθύνσεων URL που επηρεάζονται.
Κάνοντας κλικ σε ένα από τα ζητήματα εμφανίζεται μια ανάλυση των ομάδων σελίδων που επηρεάζονται. Αυτή η ομαδοποίηση σελίδων έχει πολύ νόημα. Αυτό συμβαίνει επειδή οι περισσότερες από τις αλλαγές για τη βελτίωση του Core Web Vitals γίνονται για ένα συγκεκριμένο πρότυπο σελίδας που επηρεάζει πολλές σελίδες. Κάνετε τις αλλαγές μία φορά στο πρότυπο και αυτό θα διορθωθεί σε όλες τις σελίδες της ομάδας.
Τώρα που γνωρίζετε ποιες σελίδες επηρεάζονται, ακολουθούν ορισμένες περισσότερες πληροφορίες σχετικά με τα Core Web Vitals και πώς μπορείτε να κάνετε τις σελίδες σας να περάσουν τους ελέγχους:
Γεγονός 1: Οι μετρήσεις χωρίζονται μεταξύ επιτραπέζιων υπολογιστών και κινητών. Τα σήματα κινητής τηλεφωνίας χρησιμοποιούνται για την κατάταξη κινητών και τα σήματα επιτραπέζιων υπολογιστών για την κατάταξη επιτραπέζιων υπολογιστών.
Γεγονός 2: Τα δεδομένα προέρχονται από την Αναφορά εμπειρίας χρήστη του Chrome (CrUX), η οποία καταγράφει δεδομένα από επιλεγμένους χρήστες του Chrome. Οι μετρήσεις αξιολογούνται στο 75ο εκατοστημόριο των χρηστών. Έτσι, αν το 70% των χρηστών σας ανήκει στην κατηγορία "καλή" και το 5% στην κατηγορία "χρειάζεται βελτίωση", τότε η σελίδα σας θα εξακολουθεί να κρίνεται ως "χρειάζεται βελτίωση".
Γεγονός 3: Οι μετρήσεις αξιολογούνται για κάθε σελίδα. Ωστόσο, εάν δεν υπάρχουν αρκετά δεδομένα, ο αναλυτής του Google Webmaster Trends John Mueller δηλώνει ότι ενδέχεται να χρησιμοποιηθούν σήματα από ενότητες ενός ιστότοπου ή από τον συνολικό ιστότοπο. Στη μελέτη δεδομένων Core Web Vitals , εξετάσαμε περισσότερες από 42 εκατομμύρια σελίδες και διαπιστώσαμε ότι μόνο το 11,4% των σελίδων είχαν μετρήσεις που σχετίζονται με αυτές.
Γεγονός 4: Με την προσθήκη αυτών των νέων μετρήσεων, οι Accelerated Mobile Pages ( AMP ) καταργήθηκαν ως απαίτηση από τη λειτουργία Κορυφαίες ιστορίες σε κινητά. Δεδομένου ότι οι νέες ιστορίες δεν θα έχουν στην πραγματικότητα δεδομένα για τις μετρήσεις ταχύτητας, είναι πιθανό να χρησιμοποιηθούν οι μετρήσεις από μια μεγαλύτερη κατηγορία σελίδων ή ακόμα και από ολόκληρο τον τομέα.
Γεγονός 5: Οι εφαρμογές μιας σελίδας δεν μετρούν μερικές μετρήσεις, FID και LCP, μέσω των μεταβάσεων σελίδων. Υπάρχουν μερικές προτεινόμενες αλλαγές, συμπεριλαμβανομένου του API του Ιστορικού εφαρμογών και πιθανώς μιας αλλαγής στη μέτρηση που χρησιμοποιείται για τη μέτρηση της αλληλεπίδρασης που θα ονομάζεται " Απόκριση ".
Γεγονός 6: Οι μετρήσεις ενδέχεται να αλλάξουν με την πάροδο του χρόνου, καθώς και τα όρια. Η Google έχει ήδη αλλάξει τις μετρήσεις που χρησιμοποιούνται για τη μέτρηση της ταχύτητας στα εργαλεία της όλα αυτά τα χρόνια, καθώς και τα όριά της για το τι θεωρείται γρήγορο ή όχι.
Τα Core Web Vitals έχουν ήδη αλλάξει και υπάρχουν περισσότερες προτεινόμενες αλλαγές στις μετρήσεις. Δεν θα εκπλαγώ αν προστεθεί το μέγεθος της σελίδας. Μπορείτε να περάσετε τις τρέχουσες μετρήσεις δίνοντας προτεραιότητα στα στοιχεία και να έχετε μια εξαιρετικά μεγάλη σελίδα. Είναι μια πολύ μεγάλη αποτυχία, κατά τη γνώμη μου.
Υπάρχουν πάνω από 200 παράγοντες κατάταξης , πολλοί από τους οποίους δεν έχουν μεγάλο βάρος. Όταν μιλάμε για τα Core Web Vitals, οι εκπρόσωποι της Google τα αναφέρουν ως μικροσκοπικούς παράγοντες κατάταξης ή ακόμα και ως «tiebreakers». Δεν περιμένω πολλή, έως καθόλου, βελτίωση στην κατάταξη από τη βελτίωση του Core Web Vitals. Ωστόσο, είναι ένας παράγοντας και αυτό το tweet από τον John δείχνει πώς μπορεί να λειτουργήσει η ώθηση.
Υπάρχουν παράγοντες κατάταξης που στοχεύουν μετρήσεις ταχύτητας εδώ και πολλά χρόνια. Επομένως, δεν περίμενα να είναι ορατό μεγάλο αντίκτυπο όταν κυκλοφόρησε η ενημέρωση εμπειρίας σελίδας για κινητά. Δυστυχώς, υπήρξαν επίσης μερικές βασικές ενημερώσεις της Google κατά τη διάρκεια του χρονικού πλαισίου για την ενημέρωση του Page Experience, γεγονός που καθιστά τον προσδιορισμό του αντίκτυπου πολύ ακατάστατο για να βγάλουμε συμπέρασμα.
Υπάρχουν μερικές μελέτες που βρήκαν κάποια θετική συσχέτιση μεταξύ της επιτυχίας του Core Web Vitals και της καλύτερης κατάταξης, αλλά προσωπικά βλέπω αυτά τα αποτελέσματα με σκεπτικισμό. Είναι σαν να λέμε ότι ένας ιστότοπος που εστιάζει στο SEO τείνει να κατατάσσεται καλύτερα. Εάν ένας ιστότοπος λειτουργεί ήδη σε Core Web Vitals, πιθανότατα έχει κάνει και πολλά άλλα πράγματα σωστά. Και οι άνθρωποι εργάστηκαν σε αυτά, όπως μπορείτε να δείτε στο παρακάτω γράφημα από τη μελέτη δεδομένων μας .
Ας δούμε κάθε ένα από τα Core Web Vitals με περισσότερες λεπτομέρειες.
Εδώ είναι τα τρία τρέχοντα στοιχεία του Core Web Vitals και τι μετρούν:
Σημειώστε ότι υπάρχουν πρόσθετα Web Vital που χρησιμεύουν ως μετρήσεις μεσολάβησης ή συμπληρωματικές μετρήσεις, αλλά δεν χρησιμοποιούνται στους υπολογισμούς κατάταξης. Οι μετρήσεις Web Vitals για οπτική φόρτωση περιλαμβάνουν το Time to First Byte (TTFB) και το First Contentful Paint (FCP). Ο συνολικός χρόνος αποκλεισμού (TBT) και ο χρόνος αλληλεπίδρασης (TTI) βοηθούν στη μέτρηση της διαδραστικότητας.
Μεγαλύτερη περιεχόμενη βαφή
Το LCP είναι το μεγαλύτερο ορατό στοιχείο που έχει φορτωθεί στη θύρα προβολής.
Πηγή: web.dev
Το μεγαλύτερο στοιχείο συνήθως θα είναι μια επιλεγμένη εικόνα ή ίσως η ετικέτα <h1>. Αλλά μπορεί επίσης να είναι κάποιο από αυτά:
Τα <svg> και <video> ενδέχεται να προστεθούν στο μέλλον.
Πώς να δείτε το LCP
Στο PageSpeed Insights , το στοιχείο LCP θα καθοριστεί στην ενότητα "Διαγνωστικά". Επίσης, σημειώστε ότι υπάρχει μια καρτέλα για να επιλέξετε LCP που θα εμφανίζει μόνο ζητήματα που σχετίζονται με το LCP.
Στο Chrome DevTools, ακολουθήστε τα εξής βήματα:
- Απόδοση > επιλέξτε "Στιγμιότυπα οθόνης"
- Κάντε κλικ στην "Έναρξη δημιουργίας προφίλ και επαναφόρτωση σελίδας"
- Το LCP βρίσκεται στο γράφημα χρονισμού
- Κάντε κλικ στον κόμβο. αυτό είναι το στοιχείο για το LCP
Βελτιστοποίηση LCP
Όπως είδαμε στο PageSpeed Insights, υπάρχουν πολλά ζητήματα που πρέπει να επιλυθούν, καθιστώντας το LCP την πιο δύσκολη μέτρηση για βελτίωση, κατά τη γνώμη μου. Στη μελέτη μας, παρατήρησα ότι οι περισσότεροι ιστότοποι δεν φαινόταν να βελτιώνουν το LCP τους με την πάροδο του χρόνου.
Ακολουθούν μερικές έννοιες που πρέπει να θυμάστε και μερικοί τρόποι με τους οποίους μπορείτε να βελτιώσετε το LCP.
1. Το μικρότερο είναι πιο γρήγορο
Εάν μπορείτε να απαλλαγείτε από τυχόν αρχεία ή να μειώσετε το μέγεθός τους, τότε η σελίδα σας θα φορτώσει πιο γρήγορα. Αυτό σημαίνει ότι μπορεί να θέλετε να διαγράψετε τυχόν αρχεία που δεν χρησιμοποιούνται ή μέρη του κώδικα που δεν χρησιμοποιούνται.
Ο τρόπος με τον οποίο θα το κάνετε αυτό θα εξαρτηθεί πολύ από τις ρυθμίσεις σας, αλλά η διαδικασία αναφέρεται συνήθως ως κούνημα δέντρου . Αυτό γίνεται συνήθως μέσω κάποιου είδους αυτοματοποιημένης διαδικασίας. Αλλά σε ορισμένα συστήματα, αυτό το βήμα μπορεί να μην αξίζει τον κόπο.
Υπάρχει επίσης συμπίεση, η οποία μειώνει τα μεγέθη των αρχείων. Σχεδόν κάθε τύπος αρχείου που χρησιμοποιείται για την κατασκευή του ιστότοπού σας μπορεί να συμπιεστεί, συμπεριλαμβανομένων των CSS, JavaScript, Images και HTML.
2. Το πιο κοντά είναι πιο γρήγορο
Οι πληροφορίες χρειάζονται χρόνο για να ταξιδέψουν. Όσο πιο μακριά βρίσκεστε από έναν διακομιστή, τόσο περισσότερος χρόνος χρειάζεται για τη μεταφορά των δεδομένων. Αν δεν εξυπηρετείτε μια μικρή γεωγραφική περιοχή, είναι καλή ιδέα να έχετε ένα Δίκτυο Παράδοσης Περιεχομένου (CDN) .
Τα CDN σάς δίνουν έναν τρόπο να συνδεθείτε και να εξυπηρετήσετε τον ιστότοπό σας που είναι πιο κοντά στους χρήστες. Είναι σαν να έχετε αντίγραφα του διακομιστή σας σε διαφορετικές τοποθεσίες σε όλο τον κόσμο.
3. Χρησιμοποιήστε τον ίδιο διακομιστή εάν είναι δυνατόν
Όταν συνδέεστε για πρώτη φορά σε έναν διακομιστή, υπάρχει μια διαδικασία που περιηγείται στον ιστό και δημιουργεί μια ασφαλή σύνδεση μεταξύ εσάς και του διακομιστή. Αυτό παίρνει λίγο χρόνο και κάθε νέα σύνδεση που πρέπει να κάνετε προσθέτει επιπλέον καθυστέρηση όσο περνάει από την ίδια διαδικασία. Εάν φιλοξενείτε τους πόρους σας στον ίδιο διακομιστή, μπορείτε να εξαλείψετε αυτές τις επιπλέον καθυστερήσεις.
Εάν δεν μπορείτε να χρησιμοποιήσετε τον ίδιο διακομιστή, μπορεί να θέλετε να χρησιμοποιήσετε την προσύνδεση ή την προαναφορά DNS για να ξεκινήσετε νωρίτερα τις συνδέσεις. Ένα πρόγραμμα περιήγησης συνήθως περιμένει να ολοκληρωθεί η λήψη του HTML πριν ξεκινήσει μια σύνδεση. Αλλά με την προσύνδεση ή την προαναφορά DNS, ξεκινά νωρίτερα από ό,τι συνήθως. Σημειώστε ότι το DNS-prefetch έχει καλύτερη υποστήριξη από την προσύνδεση.
4. Αποθηκεύστε ό,τι μπορείτε
Όταν αποθηκεύετε πόρους στην κρυφή μνήμη, γίνεται λήψη τους για την πρώτη προβολή σελίδας, αλλά δεν χρειάζεται να γίνει λήψη για επόμενες προβολές σελίδας. Με τους πόρους που είναι ήδη διαθέσιμοι, οι επιπλέον φορτώσεις σελίδων θα είναι πολύ πιο γρήγορα. Δείτε πόσο λίγα αρχεία έχουν ληφθεί στη φόρτωση της δεύτερης σελίδας στα παρακάτω γραφήματα καταρράκτη.
Πρώτη φόρτωση της σελίδας:
Δεύτερη φόρτωση της σελίδας:
5. Προτεραιοποίηση πόρων
Για να περάσετε τον έλεγχο LCP, θα πρέπει να δώσετε προτεραιότητα στον τρόπο με τον οποίο φορτώνονται οι πόροι σας στην κρίσιμη διαδρομή απόδοσης. Αυτό που εννοώ με αυτό είναι ότι θέλετε να αναδιατάξετε τη σειρά με την οποία γίνεται λήψη και επεξεργασία των πόρων. Θα πρέπει πρώτα να φορτώσετε τους πόρους που απαιτούνται για να δουν αμέσως το περιεχόμενο των χρηστών και μετά να φορτώσετε τους υπόλοιπους.
Πολλοί ιστότοποι μπορούν να φτάσουν σε ένα περαστικό χρόνο για το LCP προσθέτοντας απλώς ορισμένες δηλώσεις προφόρτωσης για πράγματα όπως η κύρια εικόνα, καθώς και απαραίτητα φύλλα στυλ και γραμματοσειρές. Ας δούμε πώς να βελτιστοποιήσετε τους διάφορους τύπους πόρων.
ΕΙΚΟΝΕΣ ΝΩΡΙΣ
Εάν δεν χρειάζεστε την εικόνα, η πιο αποτελεσματική λύση είναι απλά να απαλλαγείτε από αυτήν. Εάν πρέπει να έχετε την εικόνα, προτείνω να βελτιστοποιήσετε το μέγεθος και την ποιότητα για να τη διατηρήσετε όσο το δυνατόν μικρότερη.
Επιπλέον, μπορεί να θέλετε να προφορτώσετε την εικόνα. Αυτό θα ξεκινήσει τη λήψη αυτής της εικόνας λίγο νωρίτερα. Αυτό σημαίνει ότι θα εμφανιστεί λίγο νωρίτερα. Μια δήλωση προφόρτωσης για μια αποκριτική εικόνα μοιάζει με αυτό:
<link rel="preload" as="image" href=“cat.jpg"
imagesrcset=“cat_400px.jpg 400w,
cat_800px.jpg 800w, cat_1600px.jpg 1600w"
imagesizes="50vw">
ΕΙΚΟΝΕΣ ΑΡΓΑ
Θα πρέπει να φορτώνετε τεμπέλης αμέσως οποιεσδήποτε εικόνες δεν χρειάζεστε. Αυτό φορτώνει εικόνες αργότερα στη διαδικασία ή όταν ο χρήστης πλησιάζει να τις δει. Μπορείτε να χρησιμοποιήσετε το loading=“lazy” ως εξής:
<img src=“cat.jpg" alt=“cat" loading="lazy">
CSS EARLY
Έχουμε ήδη μιλήσει για την κατάργηση του αχρησιμοποίητου CSS και την ελαχιστοποίηση του CSS που έχετε. Το άλλο σημαντικό πράγμα που πρέπει να κάνετε είναι να ενσωματώσετε κρίσιμο CSS. Αυτό που κάνει είναι ότι παίρνει το μέρος του CSS που απαιτείται για τη φόρτωση του περιεχομένου που βλέπουν οι χρήστες αμέσως και στη συνέχεια το εφαρμόζει απευθείας στο HTML. Όταν γίνεται λήψη του HTML, όλο το CSS που απαιτείται για τη φόρτωση αυτού που βλέπουν οι χρήστες είναι ήδη διαθέσιμο.
CSS ΑΡΓΑ
Με οποιοδήποτε επιπλέον CSS που δεν είναι κρίσιμο, θα θελήσετε να το εφαρμόσετε αργότερα στη διαδικασία. Μπορείτε να προχωρήσετε και να ξεκινήσετε τη λήψη του CSS με μια δήλωση προφόρτωσης, αλλά να μην εφαρμόσετε το CSS μέχρι αργότερα με ένα συμβάν onload. Αυτό μοιάζει με:
<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ
Θα σας δώσω μερικές επιλογές εδώ για αυτό που νομίζω ότι είναι:
Καλό: Προφορτώστε τις γραμματοσειρές σας. Ακόμα καλύτερα αν χρησιμοποιείτε τον ίδιο διακομιστή για να απαλλαγείτε από τη σύνδεση.
Καλύτερα: Εμφάνιση γραμματοσειράς: προαιρετική . Αυτό μπορεί να συνδυαστεί με μια δήλωση προφόρτωσης. Αυτό θα δώσει στη γραμματοσειρά σας ένα μικρό παράθυρο χρόνου για φόρτωση. Εάν η γραμματοσειρά δεν τα καταφέρει εγκαίρως, η αρχική φόρτωση της σελίδας θα εμφανίσει απλώς μια προεπιλεγμένη γραμματοσειρά. Στη συνέχεια, η προσαρμοσμένη γραμματοσειρά σας θα αποθηκευτεί στην προσωρινή μνήμη και θα εμφανίζεται στις επόμενες φορτώσεις σελίδων.
Καλύτερο: Απλώς χρησιμοποιήστε μια γραμματοσειρά συστήματος. Δεν υπάρχει τίποτα για φόρτωση, οπότε δεν υπάρχουν καθυστερήσεις.
JAVASCRIPT EARLY
Έχουμε ήδη μιλήσει για την κατάργηση της αχρησιμοποίητης JavaScript και την ελαχιστοποίηση αυτού που έχετε. Εάν χρησιμοποιείτε πλαίσιο JavaScript, τότε μπορεί να θέλετε να προ -απόδοση ή απόδοση από την πλευρά του διακομιστή (SSR) της σελίδας.
Οι άλλες επιλογές σας είναι να ενσωματώσετε το JavaScript που απαιτείται νωρίς. Είναι παρόμοιο με αυτό που συζητήσαμε για το CSS, όπου φορτώνετε τμήματα του κώδικα εντός του HTML ή προφορτώνετε τα αρχεία JavaScript, ώστε να τα λαμβάνετε νωρίτερα. Αυτό θα πρέπει να γίνεται μόνο για τα στοιχεία που απαιτούνται για τη φόρτωση του περιεχομένου στο επάνω μέρος ή εάν κάποια λειτουργικότητα εξαρτάται από αυτήν τη JavaScript.
JAVASCRIPT ΑΡΓΑ
Οποιοδήποτε JavaScript δεν χρειάζεστε αμέσως θα πρέπει να φορτωθεί αργότερα. Υπάρχουν δύο κύριοι τρόποι για να το κάνετε αυτό—αναβολή και ασύγχρονες ιδιότητες. Αυτά τα χαρακτηριστικά μπορούν να προστεθούν στις ετικέτες του σεναρίου σας.
Συνήθως, ένα σενάριο που γίνεται λήψη αποκλείει τον αναλυτή κατά τη λήψη και την εκτέλεση. Το Async θα επιτρέψει την ανάλυση και τη λήψη να πραγματοποιηθούν ταυτόχρονα, αλλά εξακολουθεί να αποκλείει την ανάλυση κατά την εκτέλεση του σεναρίου. Το Defer δεν θα εμποδίσει την ανάλυση κατά τη λήψη και θα εκτελεστεί μόνο αφού ολοκληρωθεί η ανάλυση του HTML.
Ποιο πρέπει να χρησιμοποιήσετε; Για οτιδήποτε θέλετε νωρίτερα ή έχει εξαρτήσεις, θα κλίνω προς το async. Για παράδειγμα, τείνω να χρησιμοποιώ το async σε ετικέτες αναλυτικών στοιχείων, έτσι ώστε να καταγράφονται περισσότεροι χρήστες. Θα θέλετε να αναβάλετε οτιδήποτε δεν χρειάζεται για αργότερα ή δεν έχει εξαρτήσεις. Τα χαρακτηριστικά είναι αρκετά εύκολο να προστεθούν. Δείτε αυτά τα παραδείγματα:
Κανονικός:
<script src="https://www.domain.com/file.js"></script>
Ασυγχρονισμός:
<script src="https://www.domain.com/file.js" async></script>
Αναβάλλω:
<script src="https://www.domain.com/file.js" defer></script>
Διάφορα
Υπάρχουν μερικές άλλες τεχνολογίες που μπορεί να θέλετε να εξετάσετε για να βοηθήσετε στην απόδοση. Αυτά περιλαμβάνουν την κερδοσκοπική προαπόδοση , τις πρώιμες συμβουλές , τις υπογεγραμμένες ανταλλαγές και το HTTP/3 .
Πόροι
Αθροιστική μετατόπιση διάταξης
Το CLS μετρά τον τρόπο με τον οποίο κινούνται τα στοιχεία ή πόσο σταθερή είναι η διάταξη της σελίδας. Λαμβάνει υπόψη το μέγεθος του περιεχομένου και την απόσταση που κινείται. Η Google έχει ήδη ενημερώσει τον τρόπο μέτρησης του CLS. Προηγουμένως, θα συνέχιζε να μετράει ακόμα και μετά την αρχική φόρτωση της σελίδας. Αλλά τώρα περιορίζεται σε ένα χρονικό πλαίσιο πέντε δευτερολέπτων όπου συμβαίνει η μεγαλύτερη μετατόπιση.
Πηγή: web.dev
Μπορεί να είναι ενοχλητικό αν προσπαθήσετε να κάνετε κλικ σε κάτι σε μια σελίδα που αλλάζει και τελικά κάνετε κλικ σε κάτι που δεν σκοπεύετε. Μου συμβαίνει συνέχεια. Κάνω κλικ σε ένα πράγμα και, ξαφνικά, κάνω κλικ σε μια διαφήμιση και τώρα δεν βρίσκομαι καν στον ίδιο ιστότοπο. Ως χρήστης, το βρίσκω απογοητευτικό.
Οι κοινές αιτίες του CLS περιλαμβάνουν:
Πώς να δείτε το CLS
Στο PageSpeed Insights, εάν επιλέξετε CLS, μπορείτε να δείτε όλα τα σχετικά ζητήματα. Το κύριο που πρέπει να προσέξετε εδώ είναι «Αποφύγετε μεγάλες αλλαγές διάταξης».
Χρησιμοποιούμε WebPageTest . Στην Προβολή Filmstrip, χρησιμοποιήστε τις ακόλουθες επιλογές:
Παρατηρήστε πώς η γραμματοσειρά μας ανανεώνεται μεταξύ 5,1 δευτερολέπτων και 5,2 δευτερολέπτων, μετατοπίζοντας τη διάταξη καθώς εφαρμόζεται η προσαρμοσμένη γραμματοσειρά μας.
Το Smashing Magazine είχε επίσης μια ενδιαφέρουσα τεχνική όπου περιέγραφε τα πάντα με μια συμπαγή κόκκινη γραμμή 3 εικονοστοιχείων και κατέγραψε ένα βίντεο από τη φόρτωση της σελίδας για να εντοπίσει πού συνέβαιναν οι αλλαγές στη διάταξη.
Βελτιστοποίηση CLS
Στις περισσότερες περιπτώσεις, για να βελτιστοποιήσετε το CLS, θα εργάζεστε σε ζητήματα που σχετίζονται με εικόνες, γραμματοσειρές ή, πιθανώς, περιεχόμενο με ένεση. Ας δούμε την κάθε περίπτωση.
εικόνες
Για τις εικόνες, αυτό που πρέπει να κάνετε είναι να κρατήσετε το χώρο έτσι ώστε να μην υπάρχει μετατόπιση και η εικόνα απλώς να γεμίσει αυτόν τον χώρο. Αυτό μπορεί να σημαίνει ότι ορίζετε το ύψος και το πλάτος των εικόνων καθορίζοντας τες μέσα στην ετικέτα <img> ως εξής:
<img src=“cat.jpg" width="640" height="360" alt=“cat with string" />
Για αποκριτικές εικόνες, πρέπει να χρησιμοποιήσετε ένα srcset όπως αυτό:
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons" />
Και κρατήστε τον μέγιστο χώρο που απαιτείται για οποιοδήποτε δυναμικό περιεχόμενο, όπως διαφημίσεις.
Γραμματοσειρές
Για τις γραμματοσειρές, ο στόχος είναι να εμφανίζεται η γραμματοσειρά στην οθόνη όσο το δυνατόν γρηγορότερα και να μην την αλλάζετε με άλλη γραμματοσειρά. Όταν φορτώνεται ή αλλάζει μια γραμματοσειρά, καταλήγετε με μια αξιοσημείωτη μετατόπιση όπως ένα Flash of Invisible Text (FOIT) ή Flash of Unstyled Text (FOUT).
Εάν μπορείτε να χρησιμοποιήσετε μια γραμματοσειρά συστήματος, κάντε το. Δεν υπάρχει τίποτα για φόρτωση, επομένως δεν υπάρχουν καθυστερήσεις ή αλλαγές που θα προκαλέσουν αλλαγή.
Εάν πρέπει να χρησιμοποιήσετε μια προσαρμοσμένη γραμματοσειρά, η τρέχουσα καλύτερη μέθοδος για την ελαχιστοποίηση του CLS είναι να συνδυάσετε το <link rel=”preload”> (το οποίο θα προσπαθήσει να αρπάξει τη γραμματοσειρά σας το συντομότερο δυνατό) και την εμφάνιση γραμματοσειράς: προαιρετική (η οποία πρόκειται να δώσει στη γραμματοσειρά σας ένα μικρό παράθυρο χρόνου για φόρτωση). Εάν η γραμματοσειρά δεν τα καταφέρει εγκαίρως, η αρχική φόρτωση της σελίδας θα εμφανίσει απλώς μια προεπιλεγμένη γραμματοσειρά. Στη συνέχεια, η προσαρμοσμένη γραμματοσειρά σας θα αποθηκευτεί στην προσωρινή μνήμη και θα εμφανίζεται στις επόμενες φορτώσεις σελίδων.
Περιεχόμενο με ένεση
Όταν το περιεχόμενο εισάγεται δυναμικά πάνω από το υπάρχον περιεχόμενο, αυτό προκαλεί μια αλλαγή διάταξης. Εάν πρόκειται να το κάνετε αυτό, κρατήστε αρκετό χώρο για αυτό εκ των προτέρων.
Πόροι
Καθυστέρηση πρώτης εισαγωγής
Το FID είναι ο χρόνος από τη στιγμή που ένας χρήστης αλληλεπιδρά με τη σελίδα σας έως τη στιγμή που η σελίδα ανταποκρίνεται. Μπορείτε επίσης να το σκεφτείτε ως ανταπόκριση.
Παραδείγματα αλληλεπιδράσεων:
Ορισμένα συμβάντα, όπως η κύλιση ή το ζουμ, δεν υπολογίζονται.
Μπορεί να είναι απογοητευτικό να προσπαθείς να κάνεις κλικ σε κάτι και δεν συμβαίνει τίποτα στη σελίδα.
Πηγή: web.dev
Δεν θα αλληλεπιδρούν όλοι οι χρήστες με μια σελίδα, επομένως η σελίδα μπορεί να μην έχει τιμή FID. Αυτός είναι επίσης ο λόγος που τα εργαλεία εργαστηριακών δοκιμών δεν θα έχουν την αξία επειδή δεν αλληλεπιδρούν με τη σελίδα. Αυτό που μπορεί να θέλετε να εξετάσετε για εργαστηριακές δοκιμές είναι ο συνολικός χρόνος αποκλεισμού (TBT). Στο PageSpeed Insights, μπορείτε να χρησιμοποιήσετε την καρτέλα TBT για να δείτε σχετικά ζητήματα.
Τι προκαλεί την καθυστέρηση;
Η JavaScript ανταγωνίζεται για το κύριο νήμα. Υπάρχει μόνο ένα κύριο νήμα και η JavaScript ανταγωνίζεται για την εκτέλεση εργασιών σε αυτό. Σκεφτείτε το ότι η JavaScript πρέπει να εκτελείται εναλλάξ.
Πηγή: web.dev
Ενώ εκτελείται μια εργασία, μια σελίδα δεν μπορεί να ανταποκριθεί στα στοιχεία του χρήστη. Αυτή είναι η καθυστέρηση που γίνεται αισθητή. Όσο μεγαλύτερη είναι η εργασία, τόσο μεγαλύτερη είναι η καθυστέρηση που βιώνει ο χρήστης. Τα διαλείμματα μεταξύ των εργασιών είναι οι ευκαιρίες που έχει η σελίδα να μεταβεί στην εργασία εισαγωγής χρήστη και να ανταποκριθεί σε αυτό που ήθελε να κάνει.
Βελτιστοποίηση FID
Οι περισσότερες σελίδες περνούν τους ελέγχους FID. Αλλά εάν πρέπει να εργαστείτε στο FID, υπάρχουν μόνο μερικά στοιχεία στα οποία μπορείτε να εργαστείτε. Εάν μπορείτε να μειώσετε την ποσότητα JavaScript που εκτελείται, κάντε το.
Εάν χρησιμοποιείτε πλαίσιο JavaScript, χρειάζεται πολύ JavaScript για να φορτώσει η σελίδα. Αυτή η JavaScript μπορεί να πάρει λίγο χρόνο για να επεξεργαστεί στο πρόγραμμα περιήγησης και αυτό μπορεί να προκαλέσει καθυστερήσεις. Εάν χρησιμοποιείτε προαπόδοση ή (SSR), μεταφέρετε αυτό το βάρος από το πρόγραμμα περιήγησης στον διακομιστή.
Μια άλλη επιλογή είναι να χωρίσετε το JavaScript έτσι ώστε να εκτελείται για λιγότερο χρόνο. Παίρνετε αυτές τις μεγάλες εργασίες που καθυστερούν την ανταπόκριση στις εισαγωγές του χρήστη και τις χωρίζετε σε μικρότερες εργασίες που μπλοκάρουν για λιγότερο χρόνο. Αυτό γίνεται με διαχωρισμό κώδικα , ο οποίος σπάει τις εργασίες σε μικρότερα κομμάτια.
Υπάρχει επίσης η επιλογή μετακίνησης μέρους του JavaScript σε έναν υπάλληλο εξυπηρέτησης . Ανέφερα ότι η JavaScript ανταγωνίζεται για το ένα κύριο νήμα στο πρόγραμμα περιήγησης, αλλά αυτό είναι ένα είδος λύσης που του δίνει άλλη θέση για εκτέλεση.
Υπάρχουν κάποιες ανταλλαγές όσον αφορά την προσωρινή αποθήκευση. Και ο εργαζόμενος σέρβις δεν μπορεί να έχει πρόσβαση στο DOM , επομένως δεν μπορεί να κάνει ενημερώσεις ή αλλαγές. Εάν πρόκειται να μετακινήσετε τη JavaScript σε έναν υπάλληλο υπηρεσιών, πρέπει πραγματικά να έχετε έναν προγραμματιστή που να ξέρει τι να κάνει.
Πόροι
Υπάρχουν πολλά εργαλεία που μπορείτε να χρησιμοποιήσετε για δοκιμές και παρακολούθηση. Γενικά, θέλετε να δείτε τα πραγματικά δεδομένα πεδίου, στα οποία θα μετρηθείτε. Όμως τα εργαστηριακά δεδομένα είναι πιο χρήσιμα για δοκιμές.
Η διαφορά μεταξύ εργαστηριακών και δεδομένων πεδίου είναι ότι τα δεδομένα πεδίου εξετάζουν πραγματικούς χρήστες, συνθήκες δικτύου, συσκευές, προσωρινή αποθήκευση κ.λπ. Ωστόσο, τα εργαστηριακά δεδομένα ελέγχονται με συνέπεια βάσει των ίδιων συνθηκών, ώστε τα αποτελέσματα των δοκιμών να είναι επαναλαμβανόμενα.
Πολλά από αυτά τα εργαλεία χρησιμοποιούν το Lighthouse ως βάση για τις εργαστηριακές τους δοκιμές. Η εξαίρεση είναι το WebPageTest, αν και μπορείτε επίσης να εκτελέσετε δοκιμές Lighthouse με αυτό. Τα δεδομένα πεδίου προέρχονται από το CrUX.
Δεδομένα Πεδίου
Υπάρχουν ορισμένα πρόσθετα εργαλεία που μπορείτε να χρησιμοποιήσετε για να συγκεντρώσετε τα δικά σας δεδομένα παρακολούθησης πραγματικού χρήστη (RUM) που παρέχουν πιο άμεση ανατροφοδότηση σχετικά με τον τρόπο με τον οποίο οι βελτιώσεις ταχύτητας επηρεάζουν τους πραγματικούς χρήστες σας (αντί να βασίζεστε απλώς σε εργαστηριακές δοκιμές).
Δεδομένα εργαστηρίου
Το PageSpeed Insights είναι εξαιρετικό για να ελέγχετε μία σελίδα τη φορά. Αλλά αν θέλετε τόσο δεδομένα εργαστηρίου όσο και δεδομένα πεδίου σε κλίμακα, ο ευκολότερος τρόπος για να τα αποκτήσετε είναι μέσω του API. Μπορείτε να συνδεθείτε εύκολα σε αυτό με τα Εργαλεία για Webmasters της Ahrefs (δωρεάν) ή τον Έλεγχο ιστότοπου της Ahrefs και να λάβετε αναφορές που περιγράφουν λεπτομερώς την απόδοσή σας.
Λάβετε υπόψη ότι τα δεδομένα Core Web Vitals που εμφανίζονται θα καθοριστούν από τον παράγοντα χρήστη που θα επιλέξετε για την ανίχνευση κατά τη διάρκεια της εγκατάστασης.
Μου αρέσει επίσης η αναφορά στο GSC επειδή μπορείτε να δείτε τα δεδομένα πεδίου για πολλές σελίδες ταυτόχρονα. Ωστόσο, τα δεδομένα είναι λίγο καθυστερημένα και σε κυλιόμενο μέσο όρο 28 ημερών, επομένως ενδέχεται να χρειαστεί λίγος χρόνος για να εμφανιστούν οι αλλαγές στην αναφορά.
Ένα άλλο πράγμα που μπορεί να είναι χρήσιμο είναι ότι μπορείτε να βρείτε τα βάρη βαθμολογίας για το Lighthouse ανά πάσα στιγμή και να δείτε τις ιστορικές αλλαγές. Αυτό μπορεί να σας δώσει κάποια ιδέα για το γιατί έχουν αλλάξει οι βαθμολογίες σας και τι μπορεί να σταθμίζει περισσότερο η Google με την πάροδο του χρόνου.
Τελικές σκέψεις
Δεν νομίζω ότι τα Core Web Vitals έχουν μεγάλο αντίκτυπο στο SEO και, εκτός και αν είστε εξαιρετικά αργοί, γενικά δεν θα δώσω προτεραιότητα στη διόρθωσή τους. Αν θέλετε να υποστηρίξετε τις βελτιώσεις του Core Web Vitals, νομίζω ότι είναι δύσκολο να το κάνετε για το SEO.
Ωστόσο, μπορείτε να το υποστηρίξετε για εμπειρία χρήστη. Ή, όπως ανέφερα στο άρθρο μου για την ταχύτητα σελίδας , οι βελτιώσεις θα σας βοηθήσουν να καταγράψετε περισσότερα δεδομένα στα αναλυτικά στοιχεία σας, κάτι που "αισθάνεται" σαν αύξηση. Μπορεί επίσης να είστε σε θέση να υποστηρίξετε περισσότερες μετατροπές, καθώς υπάρχουν πολλές μελέτες εκεί έξω που το δείχνουν αυτό (αλλά μπορεί επίσης να είναι αποτέλεσμα της καταγραφής περισσότερων δεδομένων).
Εδώ είναι ένα άλλο βασικό σημείο: συνεργαστείτε με τους προγραμματιστές σας. είναι οι ειδικοί εδώ. Η ταχύτητα σελίδας μπορεί να είναι εξαιρετικά περίπλοκη. Εάν είστε μόνοι σας, ίσως χρειαστεί να βασιστείτε σε μια προσθήκη ή υπηρεσία (π.χ. WP Rocket ή Autoptimize) για να το χειριστείτε.
Τα πράγματα θα γίνουν πιο εύκολα καθώς οι νέες τεχνολογίες κυκλοφορούν και πολλές από τις πλατφόρμες όπως το CMS, το CDN ή ακόμα και το πρόγραμμα περιήγησής σας αναλαμβάνουν ορισμένες από τις εργασίες βελτιστοποίησης. Η πρόβλεψή μου είναι ότι μέσα σε λίγα χρόνια, οι περισσότεροι ιστότοποι δεν θα χρειάζεται καν να ανησυχούν πολύ, επειδή οι περισσότερες από τις βελτιστοποιήσεις θα έχουν ήδη διεκπεραιωθεί.
Πολλές από τις πλατφόρμες ήδη κυκλοφορούν ή εργάζονται σε πράγματα που θα σας βοηθήσουν.
Ήδη, το WordPress προφορτώνει την πρώτη εικόνα και συγκροτεί μια ομάδα για να εργαστεί στο Core Web Vitals. Το Cloudflare έχει ήδη κυκλοφορήσει πολλά πράγματα που θα κάνουν τον ιστότοπό σας πιο γρήγορο, όπως τα Early Hints, τα Signed Exchanges και το HTTP/3. Αναμένω ότι αυτή η τάση θα συνεχιστεί έως ότου οι ιδιοκτήτες ιστότοπων δεν χρειάζεται καν να ανησυχούν πια για να εργαστούν σε αυτό.
0 Σχόλια