Πώς η κινούμενη εικόνα επηρεάζει τα Core Web Vitals (LCP, INP και CLS)
Πώς τα κινούμενα σχέδια και οι χρόνοι εκτέλεσης κινούμενων εικόνων επηρεάζουν το LCP, το INP και το CLS και πρακτικούς τρόπους για να διατηρήσετε την κίνηση πλούσια χωρίς να βλάψετε το Core Web Vitals.
Core Takeaway
Τα κινούμενα σχέδια μπορεί να βλάψουν και τα τρία βασικά στοιχεία του Web: τα βαριά αρχεία κινούμενων εικόνων και οι χρόνοι εκτέλεσης μπορεί να καθυστερήσουν το LCP, τα κινούμενα σχέδια που βασίζονται σε JavaScript μπορούν να μπλοκάρουν το κύριο νήμα και να επιδεινώσουν το INP και η κίνηση των ιδιοτήτων διάταξης ή η φόρτωση κινούμενων εικόνων χωρίς δεσμευμένο χώρο προκαλεί το CLS. Διατηρήστε το περιεχόμενο των ηρώων ανεξάρτητο από κινούμενα σχέδια, τους χρόνους εκτέλεσης αργής φόρτωσης κάτω από το πάσο, την κίνηση μετασχηματισμού και την αδιαφάνεια και κρατήστε χώρο για κάθε κινούμενο στοιχείο.
Οι τρεις μετρήσεις και οι στόχοι τους
Το Core Web Vitals της Google, τεκμηριωμένο στο web.dev, μετράει τη φόρτωση (Μεγαλύτερη περιεχόμενη ζωγραφική, καλή στα 2,5 δευτερόλεπτα ή λιγότερο), την ανταπόκριση (Αλληλεπίδραση με την Επόμενη Ζωγραφική, καλή στα 200 χιλιοστά του δευτερολέπτου ή λιγότερο) και την οπτική σταθερότητα (Αθροιστική Μετατόπιση διάταξης, 7ο τοις εκατό μετρημένη πραγματική φόρτωση σελίδας ή λιγότερο στο 0.
LCP: μην κάνετε τον ήρωα να περιμένει για κινούμενα σχέδια
Εάν το μεγαλύτερο στοιχείο στην οθόνη είναι ένα κινούμενο σχέδιο που χρειάζεται χρόνο εκτέλεσης και ένα αρχείο για να φορτώσει πρώτα, το LCP περιμένει και τα δύο. Αποδώστε πρώτα μια στατική εικόνα ή πραγματικό κείμενο, μετά βελτιώστε το και φορτώστε τους χρόνους εκτέλεσης κινούμενων εικόνων μόνο για περιεχόμενο κοντά ή κάτω από το πάσο όταν χρειάζεται.
INP: κρατήστε το κύριο νήμα ελεύθερο
Το INP μετρά πόσο γρήγορα ανταποκρίνεται η σελίδα στα πατήματα και τα κλικ. Το Web.dev εξηγεί ότι οι μεγάλες εργασίες στο κύριο νήμα καθυστερούν την απόκριση στην είσοδο. Τα κινούμενα σχέδια που εκτελούν σύνθετο JavaScript σε κάθε καρέ ή πολλές κινούμενες εικόνες που ξεκινούν ταυτόχρονα, μπορούν να προκαλέσουν ακριβώς αυτό. Προτιμήστε τις μεταβάσεις CSS σε μετασχηματισμό και αδιαφάνεια για απλά εφέ, σταματήστε τα κινούμενα σχέδια εκτός οθόνης και αποφύγετε την έναρξη βαριάς εργασίας ως απάντηση σε μια αλληλεπίδραση.
CLS: δέσμευση χώρου και κίνηση μετασχηματισμού
Το Web.dev συνιστά τη χρήση της ιδιότητας μετασχηματισμού CSS για κίνηση χωρίς να ενεργοποιούνται αλλαγές διάταξης: κλίμακα αντί να αλλάζει πλάτος και ύψος, μετάφραση αντί να αλλάζει επάνω ή αριστερά. Δώστε σε κάθε κινούμενο στοιχείο, συμπεριλαμβανομένων των κινούμενων εικόνων που βασίζονται σε καμβά, σταθερές διαστάσεις πριν φορτώσει, ώστε η σελίδα να μην μεταπηδά όταν εμφανίζεται.
Χρόνοι εκτέλεσης καμβά
Χρόνοι εκτέλεσης που βασίζονται σε καμβά, όπως το πρόγραμμα απόδοσης καμβά του Lottie, το σχέδιο Rive και ExodeUI έξω από το DOM, το οποίο αποφεύγει την εργασία διάταξης ανά καρέ, αλλά προσθέτει χρόνο εκτέλεσης για λήψη και εκτέλεση. Μετρήστε την αντιστάθμιση για τη σελίδα σας: φορτώστε αργά το χρόνο εκτέλεσης, μετρήστε τον καμβά σε CSS εκ των προτέρων και δοκιμάστε σε τηλέφωνα μεσαίας κατηγορίας.
Κλειδί Principles για να θυμάστε
- Στόχοι: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 στο 75ο εκατοστημόριο
- Μην κάνετε το στοιχείο LCP να εξαρτάται από έναν χρόνο εκτέλεσης κινούμενων εικόνων
- Διατηρήστε το κύριο νήμα ελεύθερο κατά τη διάρκεια των αλληλεπιδράσεων
- Κίνηση μετασχηματισμού και αδιαφάνειας. κρατήστε χώρο για κινούμενα στοιχεία
- Χρόνοι λειτουργίας τεμπέλης φόρτωσης και δοκιμή σε τηλέφωνα μεσαίας κατηγορίας
Συχνές Ερωτήσεις
Πηγές
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev