Κάθε μέρα που ξημερώνει στον κόσμο του web φέρνει και κάτι καινούριο.
Παράλληλα, η ανάπτυξη που παρατηρείται στην τεχνολογία των mobile συσκευών και των web standards που ορίζει η Google είναι εκρηκτική.
Παράλληλα, με την έλευση του 5G η κατανάλωση δεδομένων είναι πάρα πολύ γρήγορη, αλλά πόση σημασία δίνεται στην εξοικονόμηση πολύτιμων δεδομένων των χρηστών;
Ποιος είναι ο περιβαλλοντικός αντίκτυπος ενός website σήμερα;
Η Google και το mobile-first index συμπαθούν περισσότερο τα websites που προσφέρουν εκπληκτική εμπειρία πλοήγησης και αυτό δεν είναι κάτι καινούριο, ισχύει εδώ και χρόνια.
Πόση σημασία όμως δίνουμε σε αυτό;
Οι developers και η δουλειά που κάνουν στο web performance έχουν τον τελευταίο λόγο στο πόσο επιτυχημένο είναι ένα website στις μηχανές αναζήτησης – αλλά επικεντρώνονται πάντα στο κομμάτι του search;
Οι καλοί developers (που έχουν γνώση SEO) επιτυγχάνουν μια ισορροπία μεταξύ της αισθητικής και της απόδοσης του website. Έχουν όμως πάντα έναν στόχο και κατάλληλα metrics στο radar τους;
Σε αυτό το άρθρο θα δούμε πώς μπορεί να βελτιωθεί η επικοινωνία μεταξύ των website/ecommerce owners και των developers/technical SEO experts.
Το όχημά μας για να το πετύχουμε αυτό είναι τα Chrome’s Developer Tools που διαθέτουν όλα εκείνα τα χρήσιμα δεδομένα που χρειάζονται οι developers για να επιλύσουν τα προβλήματα πιο γρήγορα.
Θα δούμε πώς μέσω του Canary browser μπορεί να γίνει η αρχή για ένα αναλυτικό SEO technical audit.
Επίσης, θα μοιραστούμε νέα features και updates για όλους τους SEO folks!
Πώς ο Chrome κυκλοφορεί νέα features
Το Canary είναι η πρώιμη έκδοση του Google Chrome.
Η Google κυκλοφορεί τα νέα feature της σε τέσσερα στάδια που τα ονομάζει ‘release channels’.
Τα κανάλια αυτά είναι τα Canary, Dev, Beta και Stable. Τα Chrome Canary, Beta και Dev μπορούν να εγκατασταθούν μαζί σε Android, Mac, Windows και Linux.
Οι Chrome engineers δοκιμάζουν τα νέα features σε πραγματικούς χρήστες για να δουν αν αντιμετωπίζουν προβλήματα πριν κυκλοφορήσουν τα features στο επόμενο κανάλι.
Το Canary είναι το κανάλι που λαμβάνει πρώτο τα updates με νυχτερινά releases στις 2π.μ. Λαμβάνεις τα πιο πρόσφατα features, browser experiments και web platform APIs.
Τα updates περιλαμβάνουν επίσης bug fixes, browser improvements, code clean-ups, safety και security.
Τα features δοκιμάζονται σε release cycle έξι εβδομάων πριν κυκλοφορήσουν σε 3.2 δις χρήστες.
Οι χρήστες μπορούν να δοκιμάσουν επερχόμενα features στο site τους, σε web apps, content management systems (CMS), themes και plugins. Έτσι, μπορούν και αναφέρουν σφάλματα και δίνουν σχόλια πάνω στα νέα features.
Ωστόσο, δεν καταφέρουν όλα τα features να περάσουν το πρώτο test του Canary. Αυτός ο πειραματικός browser χρησιμοποιείται από browser enthusiasts, developers, enterprise users και technical SEO pros.
SEO debugging με τα Developer Tools
Τα Chrome DevTools είναι μια εργαλειοθήκη για website testing μέσα στον browser. Οι developers δοκιμάζουν, δημιουργούν και συντηρούν websites με εργαλεία που μετρούν το page speed των σελίδων.
Τα browser tools ελέγχουν την απόδοση του website σε διαφορετικές συνθήκες. Ο στόχος τους είναι να σου δίνουν μια καθαρή εικόνα στο πώς να διορθώσεις ή να βελτιστοποιήσεις την απόδοση των σελίδων.
Για τους devs, τα εργαλεία αυτά είναι σχεδόν εξίσου σημαντικά με τον ίδιο τον browser.
Δεν χρειάζεται να περιμένεις να τελειώσει ένα crawl από τον Screaming Frog, μπορείς να εντοπίσεις τα technical SEO θέματα και να τα διαχειριστείς αμέσως στο Canary.
Πώς θα ρυθμίσεις το Chrome Canary για SEO
Τα websites πρέπει να έχουν καλή απόδοση σε διαφορετικές τοποθεσίες, συσκευές και δίκτυα. Τα DevTools σου επιτρέπουν την προσομοίωση του browsing σε διαφορετικά μέρη και χαμηλότερες ταχύτητες.
Θα πρέπει να ρυθμίσεις το Canary ώστε να περιηγείται ως το Googlebot user agent στις ρυθμίσεις του Chrome.
Ρίξε μια ματιά στο τι βλέπει η Google όταν φορτώνει ένα site.
Αυτός είναι ένας τρόπος για να αποφύγεις τυχόν παρεμβάσεις των browser extensions στα αποτελέσματα των δοκιμών σου.
Μπορείς να κατεβάσεις τον Canary ως ένα stand-alone πρόγραμμα περιήγησης για τεχνικούς ελέγχους στο SEO και debugging.
Technical SEO troubleshooting
Το Chrome DevTools σου επιτρέπει να “σκαλίζεις” πράγματα στον core κώδικα ενός site.
Τεστάρει και δημιουργεί performance reports σε δευτερόλεπτα – αλλά στην αρχή μπορεί να σας σε μπερδέψει (ίσως και να σε εκνευρίσει).
Οι SEO techies ελέγχουν το web με τον ίδιο τρόπο που οι μηχανικοί αυτοκινήτων αντιμετωπίζουν ένα πρόβλημα σε ένα όχημα.
Συνδέουν και σαρώνουμε websites με browser tools και αναλύουν τον τρόπο με τον οποίο αυτά φορτώνουν και ανταποκρίνονται.
Με το Canary μπορείτε να καταγράψετε και να μετρήσετε βασικά key moments η φόρτωση της σελίδας, η πλοήγηση και οι αλληλεπιδράσεις των χρηστών. Μπορείς επίσης να λάβεις status codes, Core Web Vitals reports (CWV), waterfall/timeline charts και πολλά άλλα.
Μερικές φορές το troubleshooting στο Canary δείχνει μόνο ένα σύμπτωμα αντί για το πρόβλημα. Πιο ικανά εργαλεία προσφέρουν προηγμένες αναλύσεις, ωστόσο η διαδικασία αντιμετώπισης προβλημάτων παραμένει η ίδια.
Technical SEO auditing
Η Google θέλει τα websites να φορτώνουν γρήγορα, αλλά μια σελίδα δεν θα έχει καλή κατάταξη εάν το Googlebot δεν κατανοεί το κύριο περιεχόμενο.
Το DevTools μπορεί να μετρήσει και να βοηθήσει στον εντοπισμό σφαλμάτων στο website delivery & performance..
Μπορείς να κάνεις audit και debugging Javascript, CSS και CWV ζητημάτων με το Canary μέσα από το DevTools για να ελέγξεις αμέσως τις σελίδες και τα templates του site σου.
Βοηθάει επίσης να δούμε πώς ένα site καθοδηγεί τους επισκέπτες και τους crawlers της Google. Μπορείς να ελέγξεις για internal links, duplicate content, broken links, εικόνες που λείπουν και 404 σελίδες.
Μπορείς να ελέγξεις τα meta data στη σελίδα σου για να δείτε αν είναι όλα εκεί και αν είναι βελτιστοποιημένα. Αναζήτησε προβλήματα σε structured data και διερεύνησε περιεχόμενο που δεν ευρετηρίασε η Google λόγω JavaScript rendering errors.
Μέσω του Throttle network settings μπορείς να ελέγξεις το latency σε διαφορετικά web conditions, καθώς και να αναλύσεις το website run time performance για να εντοπίσεις τυχόν bottlenecks.
Έλεγξε πώς γίνεται το load and rendering των πόρων του site σου. Δεν είναι όλοι οι πόροι ίδιο – δώσε βάση σε αυτούς που επηρεάζουν το user experience.
Χρησιμοποιώντας τα DevTools του Canary για Technical SEO website audits
Τα παρακάτω αποτελούν μερικά από τα δημοφιλέστερα use cases στα DevTools για SEO experts:
Lighthouse
- Score-based audit για performance, accessibility, best practices, SEO και PWA.
- Insights για να βελτιώσεις το performance.
Network Panel
- Search engine crawler emulation.
- Network condition και speed simulation.
- Network requests και connections information per frame.
- Resource loading και rendering information.
- Waterfall chart visual των resources του website καθώς αυτά κάνουν download.
- Server responses.
Performance Panel
- Καταγραφή του browser rendering process σε ένα website.
- Δείχνει το πώς ένα site “ενώνεται” αφού κατέβει στον browser και αξιολογεί τα αρχεία του.
- Waterfall visualization του runtime του πώς κάθε frame φορτώνεται.
- Βοηθάει στην κατανόηση του Critical Rendering Path.
- Προσδιορίζει τα performance bottlenecks και τα resources που επηρεάζουν τα Core Web Vitals.
- Ελέγξει για dropped frames ή “Jank”.
Άλλα SEO DevTools Workflows
- Απενεργοποίηση του JS setting για εντοπισμό σφαλμάτων στην Javascript.
- Mobile device testing.
- Accessibility Checks.
- Remote Headless Browser Testing.
- Programmatic DevTools browser testing & automation.
Το μέλλον των Core Web Vitals είναι εδώ
Η Google κατέχει το 86% του μεριδίου αγοράς των μηχανών αναζήτησης και ο Chrome κατέχει το 66% του παγκόσμιου μεριδίου αγοράς των προγραμμάτων περιήγησης.
Η Google κυκλοφόρησε τις μετρήσεις Core Web Vitals (CWV) για web performance το 2020 για να βοηθήσει στην ποσοτικοποίηση της εμπειρίας χρήστη σε μια ιστοσελίδα.
Το FID (First Input Delay) είναι ένα CWV που μετράει το interactivity μιας σελίδας.
Από τότε που πρωτοκυκλοφόρησε ως μέτρηση, οι SEO experts βελτιώνουν το FID των ιστότοπών τους – και σήμερα, οι περισσότεροι από αυτούς το έχουν καταφέρει. Το 92% των ιστότοπων έχουν τώρα καλή βαθμολογία FID για χρήστες κινητών και το 100% για χρήστες επιτραπέζιων υπολογιστών.
Αλλά το FID δοκιμάζει μόνο για την πρώτη αλληλεπίδραση χρήστη (First User Interaction). Δεν μετρά την εμπειρία χρήστη πέρα από την αρχική φόρτωση της σελίδας.
Σύμφωνα με την Google, “Η χρήση του Chrome δείχνει ότι το 90% της δραστηριότητας ενός χρήστη συμβαίνει μετά την αρχική φόρτωση της σελίδας.”
Η Google κυκλοφόρησε πρόσφατα την πειραματική μέτρηση Interaction to Next Paint (INP) στο Google I/O 2022 – και σύντομα θα αντικαταστήσει το FID μια μέτρηση για το interactivity.
Το INP δίνει μια πιο ακριβή εικόνα της διαδραστικής εμπειρίας χρήστη. Καταγράφει τη δραστηριότητα κλικ, tapping, πληκτρολογίου και κύλισης καρτελών και μετρά επίσης τον μέσο χρόνο απόκρισης της σελίδας για οποιαδήποτε αλληλεπίδραση συμβαίνει.
Το αρχείο HTTP Archive μια ισχυρότερη συσχέτιση του Total Blocking Time (TBT) με το INP έναντι του FID.
Η Google συνεχίζει να πειραματίζεται και να βελτιώνει το INP.
Οι ιστότοποι που είναι βελτιστοποιημένοι για INP θα έχουν ανταγωνιστικό πλεονέκτημα όταν η Google εξελιχθεί πέρα από το FID.
Σύνοψη για τη χρήση του Chrome Canary για SEO
Για να έχει καλή απόδοση και υψηλή βαθμολογία στη χρηστικότητα, ένας ιστότοπος πρέπει να είναι γρήγορο – και επίσης να είναι προσβάσιμο από όλες τις συσκευές και τους crawlers. Ο κατάλληλος σχεδιασμός και η γρήγορη περιήγηση θα επιτρέψουν καλύτερο visibility στα αποτελέσματα αναζήτησης.
Βλέπουμε ιστοτόπους με καλύτερο design και look and feel, αλλά μερικές φορές αυτό μπορεί να έρχεται με το κόστος μιας καλής εμπειρίας χρήστη. Οι developers πρέπει να λάβουν υπόψη το περιβαλλοντικό κόστος της αποστολής “διογκωμένων” από θέμα όγκου ιστότοπων.
Ένας ιστότοπος αντικατοπτρίζει τον τρόπο που τον κατασκευάζουν οι developers μας.
Οι devs πρέπει να λαμβάνουν υπόψη τη σχεδίαση, το περιεχόμενο, την απόδοση, την προσβασιμότητα, τα frameworks, τα networks και τις συσκευές πρόσβασης. Πρέπει να δημιουργήσουν ιστότοπους, ενώ παράλληλα εξισορροπούν προτεραιότητες από το marketing, το management/operations και το SEO.
Οι SEO experts και οι devs μπορούν να συνεργαστούν για να βελτιώσουν την απόδοση του ιστότοπου. Τα out-of-the-box εργαλεία της Google προσφέρουν ένα εξαιρετικό σημείο εκκίνησης για technical SEO.
Το DevTools βοηθά στη μείωση του χρόνου στον εντοπισμό σφαλμάτων και την αντιμετώπιση προβλημάτων, ενώ το Canary σου επιτρέπει να βελτιστοποιήσεις τα CWV με browser automation.
Εντόπισε και διααμοίρασε τα δεδομένα που χρειάζονται οι devs σου για να ξεκινήσουν να διορθώνουν προβλήματα στο SEO.