Speed Auditor: μάθετε τι κρατάει το WordPress σας πίσω

Ορισμένοι διαχειριστές ιστότοπων WordPress έχουν εμμονή με το PageSpeed Insights ή το GTmetrix. Η συμβουλή μου, και η συμβουλή πολλών άλλων που γνωρίζουν πολύ περισσότερα γι' αυτό, είναι ότι δεν πρέπει να δώσετε σε αυτές τις μετρήσεις μεγαλύτερη σημασία από όση έχουν.

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

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

Προέλευση

Το Speed Auditor γεννήθηκε ως απάντηση σε μια προσωπική ανάγκη να υπάρχουν διάφορα απλά αλλά ισχυρά τοπικά διαγνωστικά εργαλεία. Δεν είναι ένα πρόσθετο βελτιστοποίησης (δεν αλλάζει τίποτα στον κώδικά σας), είναι ένα πρόσθετο ελέγχου σε πραγματικό χρόνο.

Αν ψάχνετε για ένα καλό, ενδεχομένως το καλύτερο, επί πληρωμή πρόσθετο για το WPO, με το οποίο μπορείτε να κάνετε αλλαγές και λεπτή ρύθμιση, ρίξτε μια ματιά στο Perfmatters. Αν, από την άλλη πλευρά, ψάχνετε κάτι δωρεάν και απλό, χωρίς να μπλέκεστε με ρυθμίσεις και προσαρμογές, αλλά με πολλές δυνατότητες, μπορείτε να δοκιμάσετε το WPO Rocket Tweaks του Fernando Tellado, διαθέσιμο στο αποθετήριο του WordPress.

Αν δεν γνωρίζετε τι είναι ένας κόμβος DOM ή μια μετρική καθυστέρησης, μην ανησυχείτε. Το Speed Auditor έχει σχεδιαστεί για να σας βοηθήσει να κατανοήσετε τον ιστότοπό σας με μια ματιά:

• Ο έξυπνος δείκτης: Ένα εικονίδιο που αλλάζει χρώμα θα εμφανιστεί στη γραμμή διαχείρισης. Εάν είναι πράσινο, η LCP (ο χρόνος που χρειάζεται για να δείτε τα πιο σημαντικά πράγματα) είναι βέλτιστη. Αν γίνει πορτοκαλί ή κόκκινο, κάτι χρειάζεται την προσοχή σας.

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

Κάτω από το καπό

Η έκδοση 1.1.8 προσπαθεί να παρέχει κάποιο βάθος διαγνωστικών για να εξοικονομήσει χρόνο στην κονσόλα του προγράμματος περιήγησης.

• Ακριβής ταυτοποίηση LCP: Το πρόσθετο εντοπίζει ακριβώς ποιο στοιχείο (εικόνα ή μπλοκ κειμένου) προκάλεσε το Largest Contentful Paint.
• Ανάλυση βάθους DOM: DOM: Κρίσιμη για την αποφυγή "υπερβολικού μεγέθους DOM". Το Speed Auditor αναλύει τον αριθμό των κόμβων ανά ζώνες (Header, Content, Footer) και σας προειδοποιεί εάν η φωλιασμένη δομή υπερβαίνει τα 15-20 επίπεδα.
• Media Latency Monitor: (Resource Timing API) των εικόνων. Εάν μια εικόνα χρειάζεται 500ms για να μεταφορτωθεί, το πρόσθετο τη χαρακτηρίζει ως κρίσιμη.
• Μηδενικός αντίκτυπος στον διακομιστή: Όλη η επεξεργασία γίνεται στην πλευρά του πελάτη (πρόγραμμα περιήγησης). Δεν υπάρχουν βαριά ερωτήματα σε βάσεις δεδομένων ή διεργασίες PHP που επιβραδύνουν τον ιστότοπο.

Το μεγάλο άλμα. Σύντομα: (με "Radar CLS")

Μέχρι τώρα, η αθροιστική μετατόπιση διάταξης (CLS) ήταν ένα αφηρημένο στοιχείο σε μια έκθεση. Ξέρατε ότι κάτι κινείται, αλλά δεν ξέρατε πάντα τι. Πολύ σύντομα, στην έκδοση 1.1.9, αυτό θα αλλάξει.

Εισάγεται το κουμπί "Highlighter" του ραντάρ ή του οπτικού CLS.

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

• Είναι ένα banner AdSense που προωθεί το περιεχόμενό σας; Θα το δείτε με ένα κόκκινο πλαίσιο. Μπορείτε να εμβαθύνετε σε αυτό το πρόβλημα εδώ.
• Είναι μια εικόνα χωρίς καθορισμένες διαστάσεις; Το ραντάρ θα το εντοπίσει.
• Ολική επιμονή: Το πρόσθετο θα θυμάται ότι θέλετε να συνεχίσετε να ελέγχετε οπτικά κάθε γωνιά.

Αυτή η ενημέρωση θα περιλαμβάνει επίσης ένα σύντομο τεχνικό γλωσσάρι, το οποίο θα επεκταθεί για να συμπεριλάβει συμβουλές και σεμινάρια, τα οποία θα ενσωματωθούν στο ταμπλό του WordPress σας, έτσι ώστε όροι όπως ins, iframe ή figure να μην αποτελούν πλέον μυστήριο.

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

Η έκδοση 1.1.8 είναι τώρα διαθέσιμη για να τακτοποιήσετε τις μετρήσεις σας, και σύντομα, η έκδοση 1.1.9 θα διευκολύνει ακόμα περισσότερο τη διόρθωση της οπτικής σταθερότητας του WordPress. Αν το εγκαταστήσετε τώρα, θα λάβετε την ενημέρωση σύντομα.

Πώς λειτουργεί;

Ο κώδικας ακολουθεί αυτά τα τρία βήματα:

1. Ο παρατηρητής επιδόσεων

Το πρόγραμμα περιήγησης (Chrome, Edge, Opera) διαθέτει ένα εγγενές API που ονομάζεται Performance API. Το πρόσθετο καταχωρίζει έναν "παρατηρητή" που ονομάζεται PerformanceObserver και έχει ρυθμιστεί ειδικά για τον τύπο εισόδου layout-shift.

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

• Η τιμή της μετατόπισης: (Αυτός ο αριθμός ως 0,0145).
• Το ένοχο στοιχείο: Το πρόγραμμα περιήγησης λέει στο πρόσθετο ακριβώς ποιος κόμβος HTML μετακινήθηκε.

2. Το φίλτρο "Πρόσφατη αλληλεπίδραση"

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

Το πρόσθετο ελέγχει μια ιδιότητα που ονομάζεται hadRecentInput. Εάν έχετε αγγίξει ένα πλήκτρο ή έχετε κάνει κλικ στα τελευταία 500ms, το πρόγραμμα περιήγησης χαρακτηρίζει την κίνηση αυτή ως "αναμενόμενη" και το πρόσθετο την αγνοεί για να αποφεύγονται τα ψευδώς θετικά αποτελέσματα. Εντοπίζει μόνο κινήσεις που συμβαίνουν απροσδόκητα (όπως μια διαφήμιση που εμφανίζεται ξαφνικά).

3. Οπτική απόδοση (Τα κόκκινα κουτιά)

Μόλις το πρόσθετο έχει το στοιχείο που έχει μετακινηθεί, το οπτικό μέρος μπαίνει στο παιχνίδι:

1. Υπολογισμός συντεταγμένων: Χρησιμοποιεί μια συνάρτηση που ονομάζεται getBoundingClientRect() για να βρει πού βρίσκεται το συγκεκριμένο στοιχείο στην οθόνη εκείνη ακριβώς τη στιγμή (pixel πάνω, pixel αριστερά).
2. Έγχυση πλαισίου: Δημιουργήστε ένα div με απόλυτη θέση, ένα κόκκινο περίγραμμα 2px και έναν πολύ υψηλό δείκτη z-index για να το σχεδιάσετε πάνω από όλα.
3. Η ετικέτα: με το όνομα της ετικέτας (ins, img, div) και την τιμή του συσσωρευμένου CLS.

Γιατί αυτό είναι καλύτερο από μια εξωτερική έκθεση;

Εργαλεία όπως το PageSpeed μερικές φορές αποτυγχάνουν να ανιχνεύσουν το CLS επειδή δεν κάνουν κύλιση στο κάτω μέρος ή δεν περιμένουν να φορτώσουν ορισμένες διαφημίσεις.

Το πρόσθετο, με τη χρήση του persistence, μετρά το CLS που συσσωρεύεται καθ' όλη τη διάρκεια της πραγματικής περιόδου περιήγησης του χρήστη. Εάν ένα στοιχείο κινείται λίγο στην αρχή και λίγο κατά την κύλιση, το πρόσθετο το προσθέτει και το επισημαίνει, δίνοντάς σας τον πιο ακριβή πραγματικό αριθμό που θα δει τελικά η Google στην έκθεση"Chrome User Experience" (CrUX).