Είναι αδύνατο να κρατήσεις την Google ευχαριστημένη. Το έχω εγκαταλείψει εδώ και πολύ καιρό, αν και υπάρχουν ζητήματα που πρέπει να αντιμετωπιστούν, όπως η CLS
Σωρευτική μετατόπιση διάταξης Η σωρευτική μετατόπιση διάταξης είναι η σωρευτική αλλαγή στη διάταξη. Αυτή η μέτρηση είναι σημαντική διότι αναλύει οπτική σταθερότητα και τη συχνότητα με την οποία οι επισκέπτες βιώνουν απροσδόκητες αλλαγές στη διάταξη.
Με λίγα λόγια, αυτό που μετράει είναι οποιαδήποτε μετατόπιση των στοιχείων στην κορυφή της σελίδας κατά τη διάρκεια της φόρτωσης.
Η επίτευξη χαμηλού CLS βοηθά να διασφαλιστεί ότι η σελίδα είναι ευχάριστη στο μάτι και αποτρέπει τις ενοχλητικές κινήσεις που μπορεί να έχουν ως αποτέλεσμα ο αναγνώστης να χάσει την όραση ή/και τη θέση σημαντικών στοιχείων πλοήγησης.
Θεωρείται καλή εμπειρία χρήστη αν το CLS δεν ξεπερνά το 0,1, μέχρι το 0,25 πρέπει να βελτιωθεί και από εκεί και πέρα θεωρείται κακή βαθμολογία. Αυτό, όπως υποθέτω ότι γνωρίζετε, μπορεί να μετρηθεί με διάφορους τρόπους. Το πιο συχνά χρησιμοποιούμενο είναι PageSpeed Insights
Όπως σημειώνεται στην τεκμηρίωση του Core Web Vitals τεκμηρίωση, ένα κακό CLS μπορεί να προκληθεί από διάφορα στοιχεία, όπως μια εικόνα ή ένα βίντεο με άγνωστες διαστάσεις, μια γραμματοσειρά που εμφανίζεται μεγαλύτερη ή μικρότερη από την εναλλακτική της, ή μια διαφήμιση τρίτου μέρους ή ένα widget ή ένα εφέ κινούμενης εικόνας που αλλάζει δυναμικά το μέγεθος.
Παραδόξως, μερικά από τα στοιχεία που τείνουν να βουρτσίζουν το CLS είναι οι διαφημίσεις Google Adsense. Ειδικά αν χρησιμοποιείτε το αυτόματες διαφημίσεις με κουκκίδες ή/και αγκύλες ). Υπάρχουν περιπτώσεις όπου καταστρέφουν εντελώς την ταχύτητα φόρτωσης.
Πώς να ανιχνεύσετε τη μετατόπιση Εδώ είναι η ουσία του θέματος: τι ακριβώς πρέπει να αναζητήσουμε και πώς θα το βρούμε Λοιπόν, οτιδήποτε αλλάζει μέγεθος ή/και μετατοπίζεται κατά τη φόρτωση.
Τώρα που έχουμε μπει στη διαδικασία να προσπαθούμε να διορθώσουμε το πρόβλημα του Adsense, μπορούμε να ρίξουμε μια ματιά στα υπόλοιπα στοιχεία που μπορεί να παχαίνουν το CLS. Υπάρχουν διάφοροι τρόποι για να το κάνετε αυτό, εδώ είναι μερικοί.
Κοιτάζοντας Η πιο ρουστίκ μέθοδος είναι η απλή παρατήρηση, με το μάτι. Αν η κίνηση είναι αισθητή, θα τη δείτε αμέσως, αλλά υπάρχουν και λιγότερο αισθητές κινήσεις που απαιτούν μια πιο προσεκτική εξέταση.
Στην κονσόλα αναζήτησης Στο GSC, στην ενότητα "Top Web Metrics", μπορείτε να βρείτε τη λίστα των διευθύνσεων URL με προβλήματα CLS και LCP που θα σας βοηθήσει να τις εξετάσετε προσεκτικά μία προς μία.
Αθροιστικός αποσφαλματωτής μετατόπισης διάταξης Σωρευτικός αποσφαλματωτής μετατόπισης διάταξης,
Αυτό το εργαλείο, που δημιουργήθηκε από έναν μηχανικό του Chrome, είναι ένα από τα πιο χρήσιμα εργαλεία για την εύρεση προβλημάτων CLS.
Εάν το μεγαλύτερο μέρος του κειμένου στη σελίδα είναι επισημασμένο, οι πιθανότητες είναι ότι οι γραμματοσειρές σας προκαλούν τις αλλαγές στη διάταξη.
Γεννήτρια διάταξης Shift GIF Γεννήτρια διάταξης Shift GIF
Οπτικοποιητής CLS Αυτό το εργαλείο, που είναι ένα από τα πιο απλά, είναι αυτό με το οποίο κατάφερα να πιάσω τις καλύτερες μετατοπίσεις.
Οπτικοποιητής CLS
Αυτό το εικονίδιο δαίμονα είχε μια μετατόπιση θέσης του μπλοκ που το περιείχε, η οποία δεν ήταν αντιληπτή στην πλοήγηση. Όταν ενεργοποιήσετε την επέκταση, θα σας εμφανίσει τις μετρήσεις CLS σε μια λίστα και όταν κάνετε κλικ σε κάθε μία από αυτές, θα εμφανιστεί με κόκκινο χρώμα η κίνηση του στοιχείου που την προκαλεί.
Χάρη σε αυτή την επέκταση έχω επιτύχει μηδενικό CLS σε πολλές σελίδες. Αν και μπορεί να υπάρχουν τόσα πολλά πράγματα που το προκαλούν που το έχω αφήσει εγκατεστημένο για να επανεξετάζω τα url χωρίς βιασύνη.
Το Chrome Dev Tools προσφέρει ενδιαφέρουσες δυνατότητες, μια από τις πιο χρήσιμες για να πάρετε στα χέρια σας αυτό το πράγμα CLS είναι η επιλογή να μειώσετε το εύρος ζώνης στο οποίο φορτώνει η σελίδα, ώστε να μπορείτε να δείτε καθαρά πότε συμβαίνει η αλλαγή σχεδιασμού και ποια στοιχεία συμβάλλουν σε αυτήν.
Για να το κάνετε αυτό, ανοίξτε το Chrome Dev Tools στο πρόγραμμα περιήγησης με δεξί κλικ/επιθεώρηση στον ιστότοπό σας και στο Network αναζητήστε το εικονίδιο Wifi που φαίνεται στην εικόνα και δίπλα σε αυτό θα βρείτε ένα αναπτυσσόμενο μενού όπου μπορείτε να προσθέσετε μια προσαρμοσμένη ταχύτητα.
Δημιουργήστε ένα νέο προφίλ και προσθέστε 100 Kb ή λιγότερο για να το δοκιμάσετε σε "αργή κίνηση".
Τώρα, κάνοντας περιήγηση με ταχύτητα από την εποχή που το διαδίκτυο ήταν αργό, θα είναι πολύ πιο εύκολο να εντοπίσετε τι μπορεί να σας δημιουργεί προβλήματα κατά τη φόρτωση.
Εκτέλεση Στις Περιοχές μετατόπισης διάταξης στα Εργαλεία εξέλιξης του Chrome μπορείτε επίσης να δείτε τις αλλαγές διάταξης που επισημαίνονται με μπλε χρώμα, ενώ περιηγείστε στη σελίδα σας σε πραγματικό χρόνο.
Ακολουθούν τα βήματα για να ενεργοποιήσετε τις περιοχές μετατόπισης διάταξης:
Με μια επέκταση του προγράμματος περιήγησης Στο Chrome μπορείτε να εγκαταστήσετε την επέκταση CLS Checker - Περαιτέρω ταξίδι
Webpagetest Ένας άλλος ιστότοπος μέτρησης όπου μπορείτε να κάνετε μια δοκιμή στο webpagetest.org
Η παύση του βίντεο διευκολύνει τον εντοπισμό μικρών μετατοπίσεων.
Αν κοιτάξετε προσεκτικά, τα στοιχεία του μενού, καθώς και ο τίτλος και τα κείμενα μετατοπίζονται λίγο προς τα δεξιά με αυτό που φαίνεται να είναι μια αλλαγή του μεγέθους της γραμματοσειράς ή/και της θέσης, αλλά ο χώρος των διαφημίσεων πάνω από τον τίτλο είναι ήδη δεσμευμένος, οπότε δεν μετατοπίζεται το περιεχόμενο προς τα κάτω. Το πρόβλημα επιλύθηκε με το να μειωθεί λίγο το μέγεθος του H1 και να συμμαζευτεί το περιτύλιγμα του συνοδευτικού κειμένου.
Αλλά αυτό είναι άλλο θέμα, ας ασχοληθούμε τώρα με τη συμπεριφορά των διαφημίσεων.
Λύσεις για τη δέσμευση χώρων μπλοκ διαφημίσεων Ψάχνοντας για την καλύτερη και ταχύτερη λύση, διαπίστωσα ότι η καλύτερη λύση ήταν να προσθέσω μια ελάχιστη τιμή ύψους σε ένα περιτύλιγμα (div) γύρω από κάθε ένα από τα διαφημιστικά μπλοκ για να διατηρήσω αυτόν τον χώρο και να αποφύγω την κύλιση μετά τη φόρτωση.
Ωστόσο, φαίνεται ότι δεν αρκεί μόνο η χρήση μιας κλάσης για να παραπέμπει σε αυτή την ιδιότητα CSS, αλλά και η χρήση ενός αναγνωριστικού για το περιτύλιγμα. Φαίνεται ότι, για κάποιο άγνωστο λόγο, η Google AdSense JavaScript αφαιρεί τις οδηγίες ελάχιστου ύψους από κάθε αντικείμενο γονέα. Ωστόσο, δεν αφαιρούνται εάν ένα αναγνωριστικό χρησιμοποιείται για τη στόχευση CSS.
Αυτό εξηγείται εδώ λεπτομερέστερα Εισαγωγέας διαφημίσεων
Αλλαγή προσαρμοστικών διαφημίσεων σε σταθερό μέγεθος Το πρώτο πράγμα που έκανα ήταν να σταματήσω να χρησιμοποιώ προσαρμοστικά μπλοκ διαφημίσεων. Άλλαξα όλα τα μπλοκ σε σταθερά μεγέθη .
Για την απόφαση αυτή πρέπει να μελετήσετε και να αξιολογήσετε τη συγκεκριμένη περίπτωσή σας.
Αν και η Google ισχυρίζεται ότι οι προσαρμοστικές δημιουργούν περισσότερα έσοδα (προφανώς λόγω της δυνατότητας προβολής διαφορετικών μεγεθών), αυτό είναι αρκετά ελαστικό και μπορεί να ποικίλλει ανάλογα με τα διάφορα σενάρια. Αν επιλέξετε τα πιο δημοφιλή μεγέθη, θα εμφανίζετε πάντα διαφημίσεις.
Απενεργοποίηση βελτιστοποίησης μεγέθους Αν και τα μπλοκ υποτίθεται ότι έχουν ήδη σταθερό μέγεθος, είναι καλύτερο να απενεργοποιήσετε την επιλογή που επιτρέπει στη Google να αποφασίζει μόνη της για το μέγεθος των διαφημίσεων για κινητά. Αυτή η επιλογή βρίσκεται στη διαχείριση του Adsense στην ενότητα Ads/Global Settings .
Με αυτόν τον τρόπο αποφεύγουμε τις εκπλήξεις σε περίπτωση που μας έχει ξεφύγει μια αγγελία που έχουμε τοποθετήσει με το χέρι. Σε κάθε περίπτωση, το γεγονός ότι έχουν σταθερό μέγεθος δεν σημαίνει ότι δεν ανταποκρίνονται πλέον.
Κράτηση χώρου για διαφημίσεις με το Ad Inserter Το Ad Inserter είναι, νομίζω, το καλύτερο πρόσθετο για τη διαχείριση διαφημίσεων, το οποίο μπορεί να χρησιμοποιηθεί ακόμη και για την προσθήκη άλλου περιεχομένου.
Για να δεσμεύσετε χώρο για κάθε διαφήμιση, απλώς μεταβείτε στην ενότητα "Εμφάνιση" και καθορίστε το πλάτος και το ύψος κάθε μπλοκ.
Εάν χρησιμοποιήσετε το έκδοση PRO
Ορισμένες εκτιμήσεις Ηκράτηση χώρου για το Adsense έχει τα μειονεκτήματά της , όταν οι διαφημίσεις δεν μπορούν να εμφανιστούν επειδή δεν εξυπηρετούνται σε αυτό το μέγεθος ή δεν υπάρχουν διαφημιζόμενοι για τον ιστότοπό σας σε κάποιο σημείο, μπορείτε να έχετε έναν κενό χώρο στο μέγεθος του δεσμευμένου χώρου.
Στο Ad Inserter, μόνο για τις εισαγωγές από την πλευρά του διακομιστή , μπορείτε να ορίσετε το ύψος απευθείας με την εντολή Προσαρμοσμένη CSS .
Σημειώστε ότι το ύψος της διαφήμισης καθορίζεται από τον κώδικα της διαφήμισης . Ο κώδικας για προσαρμοστικές διαφημίσεις μπορεί να ρυθμίσει το ύψος της διαφήμισης ανάλογα με τον διαθέσιμο χώρο.
Ορισμένα διαφημιστικά δίκτυα (όπως το AdSense) ενδέχεται επίσης να προβάλλουν διαφημίσεις μικρότερες από τον διαθέσιμο χώρο. Το ύψος του μπλοκ, όπως ορίζεται στο Ad Inserter, είναι το ύψος του μπλοκ που εισάγεται, δηλαδή του div που το περικλείει. Αυτός είναι ο χώρος που προορίζεται για τη διαφήμιση . Κατά την κράτησή του, μπορεί να συμβούν τα εξής:
Εάν το ύψος της διαφήμισης είναι το ίδιο με το ύψος του δεσμευμένου χώρου (ύψος μπλοκ), δεν θα υπάρξει αλλαγή στη διάταξη και δεν θα επηρεάσει το CLS. Εάν το ύψος της διαφήμισης είναι μεγαλύτερο από το ύψος του δεσμευμένου χώρου (ύψος μπλοκ), το σχέδιο μπορεί να μετατοπιστεί προς τα κάτω για να χωρέσει τη διαφήμιση και να επηρεάσει το CLS. Εάν το ύψος της διαφήμισης είναι μικρότερο από το ύψος του δεσμευμένου χώρου (ύψος μπλοκ), θα εμφανιστεί ένας κενός χώρος κάτω από τη διαφήμιση, αλλά η διάταξη δεν θα αλλάξει και δεν θα επηρεάσει το CLS. Ορισμένοι κώδικες διαφημίσεων, όπως ο προσαρμοστικός κώδικας διαφημίσεων AdSense , ενδέχεται να παρακάμπτουν το ύψος των κύριων κοντέινερ . Στην περίπτωση αυτή, το ύψος του μπλοκ θα αντικατασταθεί και δεν θα εφαρμοστεί.
Εν ολίγοις, σε περίπτωση επείγουσας ανάγκης να διορθωθούν προβλήματα CLS με την ελαχιστοποίηση των αλλαγών στη διάταξη, η ταχύτερη επιλογή είναι η χρήση σταθερών μεγεθών διαφήμισης όποτε είναι δυνατόν.
Και ενώ είστε σε αυτό, μπορείτε να βεβαιωθείτε ότι δεν σας λείπουν διαστάσεις στις εικόνες, αυτό μπορεί επίσης να διορθωθεί με διάφορους τρόπους. Μερικά γρήγορα και εύκολα είναι να χρησιμοποιήσετε Perfmatters προτείνω ) ή WP Rocket
Ή το πρόσθετο Litespeed Cache
Αν όλα πήγαν καλά, σε λίγες ώρες θα δείτε την πτώση του CLS σας στις αναφορές πεδίου και σε λίγες ημέρες στις εργαστηριακές αναφορές των Αναφορές εργαστηρίου PageSpeed Insights
