Η δομή Pagespeed της Google, την οποία έχουμε συνηθίσει εδώ και χρόνια, βασίζεται στη διασφάλιση της γρήγορης φόρτωσης και εξυπηρέτησης των ιστότοπων. Παράγοντας μετρήσιμες παραμέτρους και αξιοποιώντας τα ανώνυμα δεδομένα που συλλέγονται από το μερίδιο αγοράς του Chrome, η Google χρησιμοποιεί αυτές τις μετρήσεις ως δείκτες SEO. Με την εισαγωγή του Interaction to Next Paint (INP) το 2022, η εστίαση έχει μετατοπιστεί από την απλή ταχύτητα φόρτωσης σελίδας σε μια ευρύτερη προοπτική απόδοσης ιστού. Το INP όχι μόνο μετρά πόσο γρήγορα φορτώνεται μια σελίδα αλλά και πόσο γρήγορα επεξεργάζονται οι αλληλεπιδράσεις των χρηστών στη σελίδα. Ουσιαστικά, μετατρέπει την εμπειρία πλοήγησης στον ιστότοπο σε μέτρηση ταχύτητας σελίδας.
Στο blog του Kerem, ο όρος "Γενική καθυστέρηση αλληλεπίδρασης" προτείνεται ως κατάλληλος για αυτήν την έννοια, την οποία η Google εξηγεί επίσης καλά στο δικό της βίντεο. Ωστόσο, για να κατανοήσουμε πλήρως αυτή τη μέτρηση, θα εμβαθύνουμε στο θέμα στις επόμενες ενότητες.
Ποια είναι η εξήγηση της διάρκειας INP;
Η διάρκεια του INP περιλαμβάνει:
- Ο χρόνος μεταξύ της αλληλεπίδρασης του χρήστη με τη σελίδα και της εκτέλεσης του προγράμματος χειρισμού συμβάντων.
- Χρόνος εκτέλεσης του σεναρίου.
- Ο χρόνος από την εκτέλεση του κώδικα έως την εμφάνιση της εξόδου στον χρήστη.
Αυτές οι διεργασίες συνήθως συμβαίνουν μέσα σε χιλιοστά του δευτερολέπτου, αλλά σε κινητές συσκευές, ειδικά σε παλαιότερα τηλέφωνα Android με χαμηλή ισχύ CPU, τέτοιες καθυστερήσεις (λανθάνουσα κατάσταση) μπορεί συχνά να είναι αισθητές. Αξίζει να σημειωθεί ότι τα δεδομένα INP, όπως και άλλα δεδομένα Lighthouse, συλλέγονται ανώνυμα και αξιολογούνται με βάση το 75ο εκατοστημόριο. Επομένως, ο στόχος είναι να δημιουργηθούν εφαρμογές που έχουν καλή απόδοση σε μέσες συσκευές και όχι μόνο σε συσκευές προηγμένης τεχνολογίας.
Παραδείγματα πραγματικής ζωής διάρκειας INP
Ακολουθούν ορισμένα πραγματικά παραδείγματα από τις σελίδες του Διαδικτύου που επισκεπτόμαστε καθημερινά για να εξηγήσουμε αυτήν την έννοια:
Εισαγωγή διεύθυνσης σε ιστότοπο ηλεκτρονικού εμπορίου
Όταν κάνετε αγορές σε έναν ιστότοπο ηλεκτρονικού εμπορίου και εισάγετε τη διεύθυνση αποστολής, επιλέγετε πρώτα την επαρχία. Στη συνέχεια, όταν κάνετε κλικ στο πλαίσιο επιλογής για να επιλέξετε την περιοχή, περιμένετε για λίγο να φορτώσει το αποτέλεσμα του Ajax και μετά από ένα ορισμένο χρονικό διάστημα, φορτώνονται οι πληροφορίες της περιοχής. Αυτό είναι ένα καλό παράδειγμα INP. Η βελτίωση της εμπειρίας χρήστη σε αυτό το παράδειγμα θα μπορούσε να περιλαμβάνει την προσθήκη ενός "δείκτη φόρτωσης" για την ενημέρωση του χρήστη για τη διαδικασία Ajax.
Επιλογή ταξινόμησης
Όταν χρησιμοποιείτε φίλτρα σε σελίδες καταχώρισης προϊόντων, εάν η διαχείριση των φιλτραρισμένων προϊόντων δεν γίνεται σωστά αφού κάνετε κλικ σε ένα πλαίσιο ελέγχου, θα αυξηθεί το INP. Η χρήση λιγότερο περίπλοκων JS και η εξέταση της εμπειρίας του χρήστη κατά τη διάρκεια των λειτουργιών του φίλτρου μπορεί να βοηθήσει στη διατήρηση της τιμής INP όσο το δυνατόν υψηλότερη.
Γκαλερί φωτογραφιών προϊόντων
Ο χρόνος που οι χρήστες περιμένουν τη φόρτωση της συλλογής φωτογραφιών αφού κάνουν κλικ σε μια φωτογραφία προϊόντος στις σελίδες λεπτομερειών προϊόντος μπορεί ενδεχομένως να επηρεάσει το INP.
Κουμπί κράτησης
Η καθυστέρηση αλληλεπίδρασης μεταξύ του κλικ στο κουμπί "Κάντε κράτηση" και της επόμενης σελίδας είναι ένα παράδειγμα INP.
Κουμπί Προσθήκη στο Καλάθι
Τα χιλιοστά του δευτερολέπτου καθυστέρησης όταν κάνετε κλικ στο κουμπί "Προσθήκη στο καλάθι" και αναρωτιέστε εάν το προϊόν προστέθηκε ή όχι στο καλάθι ορίζουν τέλεια το INP.
Όπως φαίνεται σε αυτά τα παραδείγματα, οι παγίδες INP υπάρχουν σε σενάρια που επηρεάζουν τόσο το SEO όσο και τα άμεσα ποσοστά μετατροπής.
Πώς να βελτιώσετε το INP;
- Χρησιμοποιήστε τις ενημερωμένες βιβλιοθήκες JS Frontend: Η βελτίωση της απόδοσης με τη χρήση σύγχρονων βιβλιοθηκών frontend JS όπως οι Vue, React και Angular είναι επωφελής, καθώς προσφέρουν πλεονεκτήματα απόδοσης και επαναχρησιμοποίησης.
- Ελαχιστοποιήστε την πολυπλοκότητα των βιβλιοθηκών JS: Συνιστάται η χρήση λιγότερο περίπλοκων βιβλιοθηκών JS. Προσωπικά, συνιστώ να αποφύγετε το jQuery όσο το δυνατόν περισσότερο.
Αποδεκτά μετρικά επίπεδα INP
Οι τιμές κατωφλίου για καλά, μεσαία και κακά επίπεδα INP είναι 200 χιλιοστά του δευτερολέπτου και 500 χιλιοστά του δευτερολέπτου. Η διατήρηση του INP κάτω από αυτά τα όρια είναι ζωτικής σημασίας για τη διατήρηση μιας καλής εμπειρίας χρήστη και της συνολικής απόδοσης ιστού.
