Το Large Contentful Paint (LCP) είναι μια σημαντική μέτρηση με επίκεντρο τον χρήστη για τη μέτρηση της αντιληπτής ταχύτητας φόρτωσης, επειδή επισημαίνει το σημείο στο χρονοδιάγραμμα φόρτωσης σελίδας όταν το κύριο περιεχόμενο της σελίδας πιθανότατα έχει φορτωθεί — ένα γρήγορο LCP βοηθά να διαβεβαιώσετε τον χρήστη ότι η σελίδα είναι χρήσιμη.
Ιστορικά, ήταν μια πρόκληση για τους προγραμματιστές ιστού να μετρήσουν πόσο γρήγορα φορτώνεται και είναι ορατό το κύριο περιεχόμενο μιας ιστοσελίδας στους χρήστες.
Οι παλαιότερες μετρήσεις όπως το load ή το DOMContentLoaded δεν είναι καλές, επειδή δεν αντιστοιχούν απαραίτητα σε αυτό που βλέπει ο χρήστης στην οθόνη του. Και οι νεότερες μετρήσεις απόδοσης με επίκεντρο τον χρήστη, όπως το First Contentful Paint (FCP), καταγράφουν μόνο την αρχή της εμπειρίας φόρτωσης. Εάν μια σελίδα εμφανίζει μια οθόνη εκκίνησης ή εμφανίζει μια ένδειξη φόρτωσης, αυτή η στιγμή δεν είναι πολύ σχετική με τον χρήστη.
Στο παρελθόν, προτείναμε μετρήσεις απόδοσης, όπως η First Meaningful Paint(FMP) και ο Δείκτης ταχύτητας (SI) (και οι δύο διαθέσιμες στο Lighthouse) για να σας βοηθήσουμε να καταγράψετε μεγαλύτερο μέρος της εμπειρίας φόρτωσης μετά την αρχική βαφή, αλλά αυτές οι μετρήσεις είναι περίπλοκες, δύσκολο να εξηγηθούν και συχνά λανθασμένες, πράγμα που σημαίνει ότι εξακολουθούν να μην προσδιορίζουν πότε έχει φορτωθεί το κύριο περιεχόμενο της σελίδας.
Μερικές φορές απλούστερο είναι καλύτερο. Με βάση τις συζητήσεις στην ομάδα εργασίας W3C Web Performance και την έρευνα που πραγματοποιήθηκε στην Google, διαπιστώσαμε ότι ένας πιο ακριβής τρόπος μέτρησης του πότε φορτώνεται το κύριο περιεχόμενο μιας σελίδας είναι να εξετάσουμε πότε αποδίδεται το μεγαλύτερο στοιχείο.
Τι είναι το LCP;
Για να παρέχουν μια καλή εμπειρία χρήστη, οι ιστότοποι θα πρέπει να προσπαθούν να έχουν μεγαλύτερη περιεχόμενη βαφή 2,5 δευτερολέπτων ή λιγότερο. Για να διασφαλίσετε ότι επιτυγχάνετε αυτόν τον στόχο για τους περισσότερους χρήστες σας, ένα καλό όριο μέτρησης είναι το 75ο εκατοστημόριο των φορτίων σελίδων, τμηματοποιημένο σε κινητές και επιτραπέζιες συσκευές.
Τι είναι μια καλή βαθμολογία LCP;
Για να παρέχουν μια καλή εμπειρία χρήστη, οι ιστότοποι θα πρέπει να προσπαθούν να έχουν το μεγαλύτερο περιεχόμενο χρώματος 2,5 δευτερολέπτων ή λιγότερο. Για να διασφαλίσετε ότι χτυπάτε αυτόν τον στόχο για τους περισσότερους χρήστες σας, ένα καλό όριο μέτρησης είναι το 75ο εκατοστημόριο των φορτίων σελίδας, κατακερματισμένο σε κινητές και επιτραπέζιες συσκευές.
Για να μάθετε περισσότερα σχετικά με την έρευνα και τη μεθοδολογία πίσω από αυτή τη σύσταση, δείτε: καθορισμός των κατώτατων ορίων μετρήσεων Core Web Vitals
Ποια στοιχεία λαμβάνονται υπόψη;
Όπως καθορίζεται επί του παρόντος στο API “Μεγαλύτερη περιεκτική βαφή”, οι τύποι στοιχείων που λαμβάνονται υπόψη για τη μεγαλύτερη επουσιώδη βαφή είναι οι εξής:
- <img> Στοιχεία
- <image> στοιχεία μέσα σε ένα <svg> στοιχείο
- <video> στοιχεία (χρησιμοποιείται η εικόνα αφίσας)
- Ένα στοιχείο με εικόνα φόντου που φορτώνεται μέσω της συνάρτησης url (σε αντίθεση με μια διαβάθμιση CSS)
- Στοιχεία επιπέδου μπλοκ που περιέχουν κόμβους κειμένου ή άλλα θυγατρικά στοιχεία κειμένου ενσωματωμένου επιπέδου.
Σημαντικό
Οι εικόνες που καταλαμβάνουν ολόκληρη τη θύρα προβολής δεν θεωρούνται υποψήφιοι LCP.
Σημειώστε ότι ο περιορισμός των στοιχείων σε αυτό το περιορισμένο σύνολο ήταν σκόπιμος προκειμένου να διατηρηθούν τα πράγματα απλά στην αρχή. Πρόσθετα στοιχεία (όπως <svg> ή <video>) ενδέχεται να προστεθούν στο μέλλον καθώς διεξάγεται περισσότερη έρευνα.
Πώς καθορίζεται το μέγεθος ενός στοιχείου;
Το μέγεθος του στοιχείου που αναφέρεται για τη Μεγαλύτερη περιεκτική βαφή είναι συνήθως το μέγεθος που είναι ορατό στο χρήστη εντός της θύρας προβολής. Εάν το στοιχείο εκτείνεται εκτός της θύρας προβολής ή εάν κάποιο από τα στοιχεία είναι αποκομμένο ή έχει μη ορατή υπερχείλιση (overfollow) , αυτά τα τμήματα δεν υπολογίζονται στο μέγεθος του στοιχείου.
Για στοιχεία εικόνας των οποίων το μέγεθος έχει αλλάξει από το εγγενές τους μέγεθος( intrinsic size), το μέγεθος που αναφέρεται είναι είτε το ορατό μέγεθος είτε το εγγενές μέγεθος, όποιο από τα δύο είναι μικρότερο. Για παράδειγμα, οι εικόνες που συρρικνώνονται σε πολύ μικρότερο από το εγγενές τους μέγεθος θα αναφέρουν μόνο το μέγεθος στο οποίο εμφανίζονται, ενώ οι εικόνες που έχουν τεντωθεί ή επεκταθεί σε μεγαλύτερο μέγεθος θα αναφέρουν μόνο τα εγγενή μεγέθη τους.
Για τα στοιχεία κειμένου, λαμβάνεται υπόψη μόνο το μέγεθος των κόμβων κειμένου τους (το μικρότερο ορθογώνιο που περιλαμβάνει όλους τους κόμβους κειμένου).
Για όλα τα στοιχεία, δεν λαμβάνεται υπόψη οποιοδήποτε περιθώριο, αναπλήρωση ή περίγραμμα που εφαρμόζεται μέσω CSS.
Ο προσδιορισμός των κόμβων κειμένου στους οποίους ανήκουν τα στοιχεία μπορεί μερικές φορές να είναι δύσκολος, ειδικά για στοιχεία των οποίων τα θυγατρικά περιλαμβάνουν ενσωματωμένα στοιχεία και κόμβους απλού κειμένου, αλλά και στοιχεία επιπέδου μπλοκ. Το βασικό σημείο είναι ότι κάθε κόμβος κειμένου ανήκει (και μόνο σε) το πλησιέστερο προγονικό στοιχείο σε επίπεδο μπλοκ. Με όρους προδιαγραφών: κάθε κόμβος κειμένου ανήκει στο στοιχείο που δημιουργεί το μπλοκ που περιέχει.
Πότε αναφέρεται η μεγαλύτερη περιεκτικότητα χρώματος;
Οι ιστοσελίδες συχνά φορτώνονται σταδιακά και, ως εκ τούτου, είναι πιθανό να αλλάξει το μεγαλύτερο στοιχείο της σελίδας.
Για να χειριστεί αυτήν την πιθανότητα αλλαγής, το πρόγραμμα περιήγησης αποστέλλει ένα PerformanceEntry τύπου μεγαλύτερης-contentful-paint προσδιορίζοντας το μεγαλύτερο στοιχείο περιεχομένου μόλις το πρόγραμμα περιήγησης ζωγραφίσει το πρώτο καρέ. Στη συνέχεια, όμως, μετά την απόδοση των επόμενων καρέ, θα αποστείλει ένα άλλο PerformanceEntry κάθε φορά που αλλάζει το μεγαλύτερο στοιχείο περιεχομένου.
Για παράδειγμα, σε μια σελίδα με κείμενο και κύρια εικόνα, το πρόγραμμα περιήγησης μπορεί αρχικά να αποδώσει απλώς το κείμενο—οπότε το πρόγραμμα περιήγησης θα αποστείλει μια καταχώρηση χρώματος μεγαλύτερου περιεχομένου, της οποίας η ιδιότητα στοιχείου πιθανότατα θα αναφέρεται σε a <p> ή <h1>. Αργότερα, μόλις ολοκληρωθεί η φόρτωση της εικόνας του ήρωα, θα αποσταλεί μια δεύτερη καταχώρηση με το μεγαλύτερο περιεχόμενο και η ιδιότητα του στοιχείου θα αναφέρεται στο <img>.
Είναι σημαντικό να σημειωθεί ότι ένα στοιχείο μπορεί να θεωρηθεί το μεγαλύτερο στοιχείο περιεχομένου μόνο αφού έχει αποδοθεί και είναι ορατό στον χρήστη. Οι εικόνες που δεν έχουν ακόμη φορτωθεί δεν θεωρούνται “rendered”. Ούτε οι κόμβοι κειμένου χρησιμοποιούν γραμματοσειρές ιστού κατά τη διάρκεια της περιόδου αποκλεισμού γραμματοσειρών. Σε αυτές τις περιπτώσεις, ένα μικρότερο στοιχείο μπορεί να αναφερθεί ως το μεγαλύτερο στοιχείο περιεχομένου, αλλά μόλις το μεγαλύτερο στοιχείο ολοκληρώσει την απόδοση, θα αναφερθεί μέσω ενός άλλου αντικειμένου PerformanceEntry.
Εκτός από τις εικόνες και τις γραμματοσειρές που φορτώνουν αργά, μια σελίδα μπορεί να προσθέσει νέα στοιχεία στο DOM καθώς γίνεται διαθέσιμο νέο περιεχόμενο. Εάν κάποιο από αυτά τα νέα στοιχεία είναι μεγαλύτερο από το προηγούμενο μεγαλύτερο στοιχείο περιεχομένου, θα αναφερθεί επίσης ένα νέο PerformanceEntry.
Εάν ένα στοιχείο που είναι αυτήν τη στιγμή το μεγαλύτερο στοιχείο περιεχομένου καταργηθεί από τη θύρα προβολής (ή ακόμα και καταργηθεί από το DOM), θα παραμείνει το μεγαλύτερο στοιχείο περιεχομένου, εκτός εάν αποδοθεί μεγαλύτερο στοιχείο.
Πριν από το Chrome 88, τα καταργημένα στοιχεία δεν θεωρούνταν ως τα μεγαλύτερα στοιχεία περιεχομένου και η κατάργηση του τρέχοντος υποψηφίου θα προκαλούσε την αποστολή μιας νέας καταχώρισης χρώματος μεγαλύτερου περιεχομένου. Ωστόσο, λόγω των δημοφιλών μοτίβων περιβάλλοντος εργασίας χρήστη, όπως οι εναλλασσόμενες εικόνες, που συχνά καταργούσαν στοιχεία DOM, η μέτρηση ενημερώθηκε ώστε να αντικατοπτρίζει με μεγαλύτερη ακρίβεια την εμπειρία των χρηστών. Δείτε το CHANGELOG για περισσότερες λεπτομέρειες.
Το πρόγραμμα περιήγησης θα σταματήσει να αναφέρει νέες καταχωρήσεις μόλις ο χρήστης αλληλεπιδράσει με τη σελίδα (μέσω πατήματος, κύλισης ή πατήματος πλήκτρου), καθώς η αλληλεπίδραση του χρήστη αλλάζει συχνά αυτό που είναι ορατό στον χρήστη (κάτι που ισχύει ιδιαίτερα με την κύλιση).
Για σκοπούς ανάλυσης, θα πρέπει να αναφέρετε μόνο το PerformanceEntry που αποστείλατε πιο πρόσφατα στην υπηρεσία ανάλυσης.
Προσοχή
Δεδομένου ότι οι χρήστες μπορούν να ανοίξουν σελίδες σε μια καρτέλα φόντου, είναι πιθανό οι καταχωρίσεις με το μεγαλύτερο περιεχόμενο να μην αποσταλούν έως ότου ο χρήστης εστιάσει την καρτέλα, η οποία μπορεί να είναι πολύ αργότερα από ό, τι όταν τη φόρτωσε για πρώτη φορά. Τα εργαλεία της Google που μετρούν το LCP δεν αναφέρουν αυτήν τη μέτρηση εάν η σελίδα φορτώθηκε στο παρασκήνιο, καθώς δεν αντικατοπτρίζει τον χρόνο φόρτωσης που αντιλαμβάνεται ο χρήστης.
Χρόνος φόρτωσης έναντι χρόνου απόδοσης
Για λόγους ασφαλείας, η χρονική σήμανση απόδοσης των εικόνων δεν εκτίθεται για εικόνες μεταξύ προελεύσεων που δεν διαθέτουν την κεφαλίδα Timing-Allow-Origin. Αντ ‘αυτού, εκτίθεται μόνο ο χρόνος φόρτωσης τους (δεδομένου ότι αυτό έχει ήδη εκτεθεί μέσω πολλών άλλων API ιστού).
Το παρακάτω παράδειγμα χρήσης δείχνει πώς να χειρίζεστε στοιχεία των οποίων ο χρόνος απόδοσης δεν είναι διαθέσιμος. Ωστόσο, όταν είναι δυνατόν, συνιστάται πάντα να ορίσετε την κεφαλίδα Timing-Allow-Origin, ώστε οι μετρήσεις σας να είναι πιο ακριβείς.
Πώς γίνεται ο χειρισμός της διάταξης και των αλλαγών μεγέθους των στοιχείων;
Για να διατηρηθούν χαμηλά τα γενικά έξοδα απόδοσης του υπολογισμού και της αποστολής νέων καταχωρήσεων απόδοσης, οι αλλαγές στο μέγεθος ή τη θέση ενός στοιχείου δεν δημιουργούν νέους υποψηφίους LCP. Λαμβάνεται υπόψη μόνο το αρχικό μέγεθος και η θέση του στοιχείου στη θύρα προβολής.
Αυτό σημαίνει ότι οι εικόνες που αρχικά αποδίδονται εκτός οθόνης και στη συνέχεια μεταβαίνουν στην οθόνη ενδέχεται να μην αναφέρονται. Σημαίνει επίσης ότι τα στοιχεία που αποδίδονται αρχικά στη θύρα προβολής, τα οποία στη συνέχεια πιέζονται προς τα κάτω, εκτός προβολής θα εξακολουθούν να αναφέρουν το αρχικό τους μέγεθος, στη θύρα προβολής.
Παράδειγμα
Ακολουθούν ορισμένα παραδείγματα περιπτώσεων κατά τις οποίες η μεγαλύτερη περιεχόμενη βαφή εμφανίζεται σε μερικούς δημοφιλείς ιστότοπους:
Και στα δύο παραπάνω χρονοδιαγράμματα, το μεγαλύτερο στοιχείο αλλάζει καθώς φορτώνεται το περιεχόμενο. Στο πρώτο παράδειγμα, προστίθεται νέο περιεχόμενο στο DOM και αυτό αλλάζει το στοιχείο που είναι το μεγαλύτερο. Στο δεύτερο παράδειγμα, η διάταξη αλλάζει και το περιεχόμενο που προηγουμένως ήταν το μεγαλύτερο καταργείται από τη θύρα προβολής.
Παρόλο που συμβαίνει συχνά το περιεχόμενο με καθυστερημένη φόρτωση είναι μεγαλύτερο από το περιεχόμενο που υπάρχει ήδη στη σελίδα, αυτό δεν συμβαίνει απαραίτητα. Τα επόμενα δύο παραδείγματα δείχνουν τη μεγαλύτερη περιεκτική βαφή που εμφανίζεται πριν από την πλήρη φόρτωση της σελίδας.
Στο πρώτο παράδειγμα, το λογότυπο Instagram φορτώνεται σχετικά νωρίς και παραμένει το μεγαλύτερο στοιχείο ακόμη και όταν εμφανίζεται σταδιακά άλλο περιεχόμενο. Στο παράδειγμα σελίδας αποτελεσμάτων αναζήτησης Google, το μεγαλύτερο στοιχείο είναι μια παράγραφος κειμένου που εμφανίζεται πριν ολοκληρωθεί η φόρτωση οποιασδήποτε από τις εικόνες ή το λογότυπο. Δεδομένου ότι όλες οι μεμονωμένες εικόνες είναι μικρότερες από αυτήν την παράγραφο, παραμένει το μεγαλύτερο στοιχείο καθ ‘όλη τη διαδικασία φόρτωσης.
Στο πρώτο πλαίσιο του χρονοδιαγράμματος Instagram, μπορεί να παρατηρήσετε ότι το λογότυπο της κάμερας δεν έχει πράσινο πλαίσιο γύρω του. Αυτό συμβαίνει επειδή είναι ένα <svg> στοιχείο και <svg> τα στοιχεία δεν θεωρούνται επί του παρόντος υποψήφιοι LCP. Ο πρώτος υποψήφιος LCP είναι το κείμενο στο δεύτερο πλαίσιο.
Πώς να μετρήσετε το LCP
Το LCP μπορεί να μετρηθεί στο εργαστήριο ή στο πεδίο και είναι διαθέσιμο στα ακόλουθα εργαλεία:
Εργαλεία πεδίου
Εργαλεία πεδίου
Μετρήστε το LCP σε JavaScript
Για να μετρήσετε το LCP σε JavaScript, μπορείτε να χρησιμοποιήσετε το Largest Contentful Paint API. Το ακόλουθο παράδειγμα δείχνει πώς να δημιουργήσετε ένα PerformanceObserver που ακούει τις εγγραφές ζωγραφικής με το μεγαλύτερο περιεχόμενο και τις καταγράφει στην κονσόλα.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
Προσοχή
Αυτός ο κώδικας δείχνει πώς μπορείτε να καταγράψετε καταχωρήσεις χρώματος μεγαλύτερου περιεχομένου στην κονσόλα, αλλά η μέτρηση του LCP σε JavaScript είναι πιο περίπλοκη. Δείτε παρακάτω για λεπτομέρειες:
Στο παραπάνω παράδειγμα, κάθε καταγεγραμμένη καταχώρηση χρώματος μεγαλύτερου περιεχομένου αντιπροσωπεύει τον τρέχοντα υποψήφιο LCP. Γενικά, η τιμή startTime της τελευταίας καταχώρησης που εκπέμπεται είναι η τιμή LCP—ωστόσο, αυτό δεν συμβαίνει πάντα. Δεν είναι όλες οι καταχωρίσεις χρώματος με το μεγαλύτερο περιεχόμενο έγκυρες για τη μέτρηση του LCP.
Η παρακάτω ενότητα παραθέτει τις διαφορές μεταξύ των αναφορών API και του τρόπου υπολογισμού της μέτρησης.
Διαφορές μεταξύ της μέτρησης και του API
- Το API θα αποστέλλει καταχωρίσεις με το μεγαλύτερο περιεχόμενο για σελίδες που φορτώνονται σε μια καρτέλα φόντου, αλλά αυτές οι σελίδες θα πρέπει να αγνοούνται κατά τον υπολογισμό του LCP.
- Το API θα συνεχίσει να αποστέλλει καταχωρήσεις με το μεγαλύτερο περιεχόμενο μετά την εμφάνιση μιας σελίδας στο παρασκήνιο, αλλά αυτές οι καταχωρήσεις θα πρέπει να αγνοηθούν κατά τον υπολογισμό του LCP (τα στοιχεία μπορούν να ληφθούν υπόψη μόνο εάν η σελίδα βρισκόταν στο προσκήνιο όλη την ώρα).
- Το API δεν αναφέρει καταχωρήσεις μεγαλύτερου περιεχομένου όταν η σελίδα αποκαθίσταται από την προσωρινή μνήμη back/forward, αλλά το LCP θα πρέπει να μετράται σε αυτές τις περιπτώσεις, καθώς οι χρήστες τις βιώνουν ως ξεχωριστές επισκέψεις σελίδας.
- Το API δεν λαμβάνει υπόψη στοιχεία εντός των iframes, αλλά η μέτρηση κάνει καθώς αποτελούν μέρος της εμπειρίας χρήστη της σελίδας. Σε σελίδες με LCP μέσα σε ένα iframe—για παράδειγμα μια εικόνα αφίσας σε ένα ενσωματωμένο βίντεο—αυτό θα εμφανιστεί ως διαφορά μεταξύ CrUX και RUM. Για να μετρήσετε σωστά το LCP θα πρέπει να τα εξετάσετε. Τα υποπλαίσια μπορούν να χρησιμοποιήσουν το API για να αναφέρουν τις καταχωρίσεις τους με το μεγαλύτερο περιεχόμενο στο γονικό πλαίσιο για συνάθροιση.
Αντί να απομνημονεύουν όλες αυτές τις λεπτές διαφορές, οι προγραμματιστές μπορούν να χρησιμοποιήσουν τη βιβλιοθήκη JavaScript web-vitals για να μετρήσουν το LCP, το οποίο χειρίζεται αυτές τις διαφορές για εσάς (όπου είναι δυνατόν):
import {onLCP} from 'web-vitals';
// Measure and log LCP as soon as it's available.
onLCP(console.log);
Μπορείτε να ανατρέξετε στον πηγαίο κώδικα για το LCP() για ένα πλήρες παράδειγμα του τρόπου μέτρησης του LCP στο JavaScript.
Τι γίνεται αν το μεγαλύτερο στοιχείο δεν είναι το πιο σημαντικό;
Σε ορισμένες περιπτώσεις, το πιο σημαντικό στοιχείο (ή στοιχεία) στη σελίδα δεν είναι το ίδιο με το μεγαλύτερο στοιχείο και οι προγραμματιστές ενδέχεται να ενδιαφέρονται περισσότερο για τη μέτρηση των χρόνων απόδοσης αυτών των άλλων στοιχείων. Αυτό είναι δυνατό χρησιμοποιώντας το API χρονισμού στοιχείων, όπως περιγράφεται στο άρθρο σχετικά με τις προσαρμοσμένες μετρήσεις.
Πώς να βελτιώσετε το LCP
Το LCP επηρεάζεται κυρίως από τέσσερις παράγοντες:
- Αργοί χρόνοι απόκρισης διακομιστή
- Render-αποκλεισμός JavaScript και CSS
- Χρόνοι φόρτωσης πόρων
- Απόδοση από την πλευρά του πελάτη
Για μια βαθιά κατανόηση σχετικά με τον τρόπο βελτίωσης του LCP, ανατρέξτε στο θέμα βελτιστοποίηση LCP. Για πρόσθετες οδηγίες σχετικά με τις μεμονωμένες τεχνικές απόδοσης που μπορούν επίσης να βελτιώσουν το LCP, δείτε:
- Apply instant loading with the PRPL pattern
- Optimizing the Critical Rendering Path
- Optimize your CSS
- Optimize your Images
- Optimize web Fonts
- Optimize your JavaScript (για ιστότοπους που αποδίδονται από πελάτες)
Επιπρόσθετοι πόροι
CHANGELOG #
Περιστασιακά, τα σφάλματα ανακαλύπτονται στα API που χρησιμοποιούνται για τη μέτρηση των μετρήσεων και μερικές φορές στους ορισμούς των ίδιων των μετρήσεων. Ως αποτέλεσμα, μερικές φορές πρέπει να γίνουν αλλαγές και αυτές οι αλλαγές μπορούν να εμφανιστούν ως βελτιώσεις ή παλινδρομήσεις στις εσωτερικές αναφορές και τους πίνακες ελέγχου.
Για να σας βοηθήσουμε να το διαχειριστείτε, όλες οι αλλαγές είτε στην εφαρμογή είτε στον ορισμό αυτών των μετρήσεων θα εμφανιστούν σε αυτό το αρχείο καταγραφής αλλαγών.
Πηγή: εδώ
