Γιατί το γράφω αυτό

Διαχειρίζομαι μερικούς ιστότοπους τώρα και από τότε που ξεκίνησα η απόδοσή μου ήταν πολύ πάνω-κάτω. Το έχω βρει εντελώς ενοχλητικό κατά καιρούς. Όλα φαίνονται να λειτουργούν τόσο καλά για μένα τοπικά, αλλά μετά ελέγχω τα αναλυτικά στοιχεία του διακομιστή μου και μπορώ να δω ότι για ορισμένες χώρες η ταχύτητά μου ήταν τρομερή.

Πάντα φαινόταν να είναι είτεCLSήLCPαυτό ήταν το θέμα για μένα. Έτσι σκέφτηκα να μοιραστώ την εμπειρία μου και να προσπαθήσω να βοηθήσω άλλους να το καταλάβουν αυτό, ειδικά αν αντιμετωπίζετε το ίδιο πράγμα. Ή μήπως είχατε πρόβλημα με αυτό και έχετε μια μοναδική προοπτική ή λύση; Θα ήθελα πολύ να το ακούσω.

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

Τι είναι ακριβώς το CLS και το LCP;

Πριν μπω στους δικούς μου αγώνες, επιτρέψτε μου να εξηγήσω τι είναι στην πραγματικότητα, γιατί όταν είδα για πρώτη φορά αυτά τα ακρωνύμια στο Google Search Console, δεν είχα ιδέα τι σήμαιναν.

Αθροιστική μετατόπιση διάταξης (CLS)μετρά πόσο πηδά η διάταξη της σελίδας σας κατά τη φόρτωση. Ξέρετε πότε πρόκειται να πατήσετε ένα κουμπί και ολόκληρη η σελίδα αλλάζει, οπότε κάνετε λάθος κλικ; Αυτό είναι ένα πρόβλημα CLS. Είναι απίστευτα απογοητευτικό ως χρήστης και αποδεικνύεται ότι οι μηχανές αναζήτησης σας τιμωρούν και για αυτό.

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

Και τα δύο υπάγονται στην GoogleCore Web Vitals, τα οποία επηρεάζουν άμεσα τις κατατάξεις αναζήτησής σας. Έτσι, ακόμα κι αν το περιεχόμενό σας είναι εξαιρετικό, οι κακές βαθμολογίες CLS και LCP μπορούν να σας κρατήσουν πίσω.

Βελτιστοποιήστε τον ιστότοπό σας για CLS και LCP

🖼️

Ορισμός διαστάσεων εικόνας
Καθορίστε το πλάτος και το ύψος για τις εικόνες

📢

Χρησιμοποιήστε τις διαφημίσεις με υπευθυνότητα
Αποφύγετε την απροσδόκητη αλλαγή μεγέθους διαφήμισης

⚡

Προφόρτωση σημαντικών πόρων
Βεβαιωθείτε ότι το κρίσιμο περιεχόμενο φορτώνεται γρήγορα

🔄

Ελαχιστοποιήστε το δυναμικό περιεχόμενο
Περιορίστε το περιεχόμενο που αλλάζει κατά τη φόρτωση

📊

Παρακολουθήστε τακτικά την απόδοση
Χρησιμοποιήστε εργαλεία για την παρακολούθηση των βαθμολογιών CLS και LCP

Ο εφιάλτης μου CLS

Το CLS ήταν το πρώτο θέμα που αντιμετώπισα. Οι σελίδες μου μου φάνηκαν καλές, αλλά οι βαθμολογίες μου ήταν τρομερές. Μετά από πολύ σκάψιμο, βρήκα τους κύριους ένοχους:

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

Η επιδιόρθωση για τα περισσότερα από τα προβλήματα CLS μου ήταν εκπληκτικά απλή. Άρχισα να ορίζω σαφείς διαστάσεις για όλες τις εικόνες και τα μέσα. Πρόσθεσα εναλλαγή γραμματοσειράς-οθόνης στη φόρτωση της γραμματοσειράς μου, ώστε η εναλλακτική να αποδίδεται αμέσως. Και έκλεισα χώρο με CSS για οποιοδήποτε περιεχόμενο φορτώνεται δυναμικά.

Εργαλεία όπωςGoogle PageSpeed Insightsήταν μια τεράστια βοήθεια εδώ. Σας δείχνουν ακριβώς ποια στοιχεία προκαλούν αλλαγές διάταξης, επομένως δεν μαντεύετε.

Μετά ήρθε το πρόβλημα LCP

Ακριβώς όταν νόμιζα ότι είχα τακτοποιήσει τα πράγματα, μουβαθμολογίες LCPάρχισε να μαρκάρει. Το απογοητευτικό μέρος ήταν ότι ο ιστότοπός μου φορτώθηκε γρήγορα για μένα στο Ηνωμένο Βασίλειο, αλλά τα αναλυτικά στοιχεία μου έδειξαν τρομερές ταχύτητες σε άλλες χώρες. Αυτό είναι το θέμα με το LCP - εξαρτάται σε μεγάλο βαθμό από το πού βρίσκονται οι χρήστες σας και πόσο μακριά βρίσκονται από τον διακομιστή σας.

Τα βασικά ζητήματα που βρήκα ήταν:

Μεγάλες μη βελτιστοποιημένες εικόνες:Οι εικόνες των ηρώων μου ήταν πολύ μεγάλες. Ανέβαζα φωτογραφίες πλήρους ανάλυσης χωρίς να τις συμπιέζω.
Χρόνος απόκρισης διακομιστή:Χωρίς CDN, οι χρήστες μακριά από τον διακομιστή μου περίμεναν χρόνια για την πρώτη απάντηση.
JavaScript αποκλεισμού απόδοσης:Είχα φόρτωση σεναρίων στο κεφάλι που εμπόδιζαν την απόδοση της σελίδας μέχρι να τελειώσουν.

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

Τι βοήθησε πραγματικά το LCP μου

Άρχισα να συμπιέζω όλες τις εικόνες μου και να χρησιμοποιώ τη μορφή WebP όπου είναι δυνατόν. Μετακίνησα επίσης μη βασικά σενάρια για ασύγχρονη φόρτωση ή ανέβαλα εντελώς. Οι ιστότοποί μου φιλοξενούνται στο Vercel, το οποίο χειρίζεται πολλά από τα αιχμή του δικτύου για μένα, αλλά αν χρησιμοποιείτε παραδοσιακή φιλοξενία, ρυθμίστε έναCDNμπορεί να κάνει τεράστια διαφορά για τη διεθνή κίνηση.

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

Το ενοχλητικό μέρος - δεν είναι ποτέ πραγματικά "διορθωμένο"

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

Είχα εβδομάδες όπου όλα είναι πράσινα στο Google Search Console και μετά προσθέτω ένα νέο στοιχείο και ξαφνικά το CLS μου επισημαίνεται ξανά. Είναι εντελώς ενοχλητικό, αλλά έχω μάθει να ελέγχω τα Core Web Vitals μου μετά από κάθε σημαντική αλλαγή τώρα.

Ο αντίκτυπος του CLS και του LCP στην εμπειρία χρήστη

0,1 δευτερόλεπτα

Ανοχή χρήστη

32%

Αύξηση ποσοστού εγκατάλειψης

Πτώση ποσοστού μετατροπής

Core Web Vitals

Σημασία κατάταξης SEO

Μια αναφορά απόΤο Financial Brandυπογραμμίζει πόσο αργοί ιστότοποι μπορούν να οδηγήσουν άμεσα σε απώλεια εσόδων. Αυτό είναι αρκετό κίνητρο για να το διατηρήσετε στην κορυφή, ακόμα και όταν σας φαίνεται κουραστικό.

Τα εργαλεία που με έχουν βοηθήσει περισσότερο

Εάν αντιμετωπίζετε τα ίδια προβλήματα, εδώ είναι τα εργαλεία που χρησιμοποιώ πραγματικά και τα βρίσκω χρήσιμα:

Google Search Console:Εδώ παρατήρησα για πρώτη φορά τα προβλήματά μου. Δείχνει τις βαθμολογίες σας στο Core Web Vitals κατανεμημένες ανά σελίδα και σας λέει ακριβώς τι χρειάζεται προσοχή.
PageSpeed Insights:Τρέχω κάθε σελίδα σε αυτό αφού κάνω αλλαγές. Δίνει συγκεκριμένες, εφαρμόσιμες συστάσεις παρά αόριστες συμβουλές.Οδηγός απόδοσης ιστού του Shopifyείναι επίσης ένας εξαιρετικός συντροφικός πόρος.
Επέκταση Web Vitals:Αυτή η επέκταση Chrome εμφανίζει τις μετρήσεις CLS, LCP και άλλες μετρήσεις σας σε πραγματικό χρόνο καθώς περιηγείστε στον ιστότοπό σας. Το διατηρώ συνεχώς κατά την ανάπτυξη.

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

Η συμβουλή μου εάν το προσπερνάτε αυτό

Εάν η απόδοσή σας ήταν τόσο πάνω-κάτω όσο η δική μου, θα πρότεινα εδώ:

Μην πανικοβάλλεστε.Τα θέματα CLS και LCP είναι απίστευτα κοινά. Δεν τα κάνετε όλα λάθος - αυτές οι μετρήσεις είναι απλώς ευαίσθητες.
Ελέγξτε τα αναλυτικά στοιχεία σας ανά χώρα.Ο ιστότοπός σας μπορεί να είναι γρήγορος για εσάς αλλά αργός για επισκέπτες αλλού. Ένα CDN μπορεί να το λύσει γρήγορα.
Διορθώστε πρώτα τις εικόνες.Από την εμπειρία μου, οι μη βελτιστοποιημένες εικόνες και οι διαστάσεις που λείπουν είναι η αιτία των περισσότερων προβλημάτων CLS και LCP.
Δοκιμή μετά από κάθε αλλαγή.Αποκτήστε τη συνήθεια να εκτελείτε το PageSpeed Insights κάθε φορά που πραγματοποιείτε σημαντικές ενημερώσεις.
Να είστε υπομονετικοί.Τα δεδομένα του Google Search Console μπορεί να χρειαστούν ημέρες ή εβδομάδες για να ενημερωθούν. Μην υποθέτετε ότι οι διορθώσεις σας δεν λειτουργούν μόνο και μόνο επειδή ο πίνακας εργαλείων δεν έχει αλλάξει ακόμα.

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

Η ουσία είναι αυτή:CLS και LCPδεν φεύγουν. Έχουν σημασία για το SEO, έχουν σημασία για την εμπειρία του χρήστη, και αν διαχειρίζεστε ιστότοπους όπως εγώ, θα σας κρατήσουν στη διάθεση σας. Αλλά μπορούν να διορθωθούν και κάθε βελτίωση που κάνετε αξίζει τον κόπο.