Το LCP μετράει τον χρόνο μέχρι να φορτώσει το κύριο περιεχόμενο. Το κύριο περιεχόμενο είναι το μεγαλύτερο μπλοκ κειμένου ή η μεγαλύτερη εικόνα της σελίδας. Στις περισσότερες σελίδες το LCP είναι η πιο κρίσιμη μέτρηση, γιατί δείχνει πότε η σελίδα γίνεται χρήσιμη για τον χρήστη.
Ο χρήστης μπαίνει στη σελίδα. Η σελίδα αρχίζει να φορτώνει. Ο browser κατεβάζει το HTML. Κατεβάζει το CSS. Κατεβάζει το JavaScript. Το HTML εμφανίζεται. Το CSS εφαρμόζει τα στυλ. Το JavaScript τρέχει. Το κύριο περιεχόμενο εμφανίζεται. Αυτό είναι το LCP.
LCP ενός δευτερολέπτου είναι εξαιρετικό. Ο χρήστης βλέπει γρήγορα το περιεχόμενο. LCP τριών δευτερολέπτων είναι αργό. Ο χρήστης περιμένει. LCP πέντε δευτερολέπτων είναι πολύ αργό. Ο χρήστης φεύγει.
Τι μετράει ως Largest Contentful Paint
Το μεγαλύτερο στοιχείο της σελίδας στο ορατό τμήμα. Συνήθως εικόνα ή τίτλος. Παράδειγμα: αρχική σελίδα με κεντρική εικόνα. Η κεντρική εικόνα είναι το μεγαλύτερο στοιχείο. Η ώρα που εμφανίζεται η κεντρική εικόνα είναι το LCP.
Παράδειγμα: άρθρο blog με τίτλο. Ο τίτλος είναι το μεγαλύτερο στοιχείο. Η ώρα που εμφανίζεται ο τίτλος είναι το LCP.
Παράδειγμα: σελίδα προϊόντος με εικόνα προϊόντος. Η εικόνα προϊόντος είναι το μεγαλύτερο στοιχείο. Η ώρα που εμφανίζεται η εικόνα προϊόντος είναι το LCP.
Το LCP μετριέται από τη στιγμή που ο χρήστης πατάει τον σύνδεσμο (αρχή φόρτωσης της σελίδας) μέχρι να εμφανιστεί το μεγαλύτερο στοιχείο. Περιλαμβάνει τον χρόνο λήψης του HTML, του CSS και του JavaScript, τη λήψη της εικόνας και την εμφάνιση της σελίδας.
Βελτίωση του LCP
Στόχος βελτιστοποίησης: LCP κάτω από 2,5 δευτερόλεπτα.
Στρατηγική πρώτη: βελτίωσε τον χρόνο απόκρισης του διακομιστή (TTFB). Ένας πιο γρήγορος διακομιστής σημαίνει ότι το HTML φτάνει νωρίτερα. Η άφιξη του HTML είναι προϋπόθεση για την εμφάνιση. Μείωσε το TTFB βελτιώνοντας τον διακομιστή, χρησιμοποιώντας CDN και μειώνοντας τα ερωτήματα στη βάση δεδομένων.
Στρατηγική δεύτερη: μείωσε το μέγεθος του αρχείου CSS. Το μικρότερο CSS κατεβαίνει πιο γρήγορα. Το CSS πρέπει να κατέβει πριν εμφανιστεί η σελίδα. Μείωσέ το αφαιρώντας τα στυλ που δεν χρησιμοποιούνται, κάνοντας minify και καθυστερώντας το CSS που δεν είναι κρίσιμο.
Στρατηγική τρίτη: μείωσε το μέγεθος του αρχείου JavaScript. Το μεγάλο JavaScript καθυστερεί την εκτέλεση και την εμφάνιση. Μείωσέ το αφαιρώντας κώδικα που δεν χρησιμοποιείται, σπάζοντας τα μεγάλα αρχεία και καθυστερώντας το JavaScript που δεν είναι κρίσιμο.
Στρατηγική τέταρτη: βελτιστοποίησε τις εικόνες. Οι εικόνες είναι συχνά τα μεγαλύτερα στοιχεία (LCP). Μείωσε το μέγεθος του αρχείου με συμπίεση, με σύγχρονες μορφές (WebP) και με μικρότερες διαστάσεις.
Στρατηγική πέμπτη: κάνε preload στους κρίσιμους πόρους. Πες στον browser να κατεβάσει νωρίς την κρίσιμη εικόνα ή γραμματοσειρά. Η εικόνα κατεβαίνει παράλληλα με το HTML και το CSS. Το LCP μειώνεται.
Πραγματικό παράδειγμα: βελτίωση του LCP σε άρθρο blog
Αρχικό LCP: 2,8 δευτερόλεπτα.
Ανάλυση: η κεντρική εικόνα του άρθρου είναι το μεγαλύτερο στοιχείο. Η εικόνα είναι δύο megabytes. Χρειάζεται 1,2 δευτερόλεπτα να κατέβει. Η λήψη της εικόνας είναι το εμπόδιο.
Βελτιστοποίηση
Συμπίεσε την εικόνα: από δύο megabytes σε 0,5 megabytes. Ο χρόνος λήψης είναι τώρα 0,3 δευτερόλεπτα.
Μετάτρεψέ την σε WebP: πέφτει ακόμα, στα 0,3 megabytes. Ο χρόνος λήψης είναι τώρα 0,1 δευτερόλεπτα.
Κάνε preload στην εικόνα: πες στον browser να την κατεβάσει νωρίς. Η εικόνα κατεβαίνει παράλληλα με το HTML. Κερδίζεις 0,2 δευτερόλεπτα.
Βάλε το κρίσιμο CSS στο ορατό τμήμα: μειώνεται ο χρόνος μέχρι να εμφανιστεί η σελίδα. Κερδίζεις 0,3 δευτερόλεπτα.
Νέο LCP: 1,7 δευτερόλεπτα.
2,8 μείον 1,2 (λήψη εικόνας) συν 0,1 (λήψη συμπιεσμένης εικόνας) κάνει 1,7 δευτερόλεπτα. Κάτω από τον στόχο των 2,5.
Το LCP και οι διαφορετικοί τύποι σελίδων
Αρχική σελίδα
Συνήθως το LCP είναι η κεντρική εικόνα. Βελτιστοποίησε με συμπίεση της εικόνας, CDN και preload.
Άρθρο blog
Το LCP είναι ο τίτλος ή η πρώτη εικόνα. Βελτιστοποίησε μειώνοντας την καθυστέρηση από CSS/JavaScript και κάνοντας preload στις γραμματοσειρές.
Σελίδα προϊόντος
Το LCP είναι η εικόνα προϊόντος. Βελτιστοποίησε με συμπίεση της εικόνας και με προσαρμοζόμενες εικόνες για διαφορετικές συσκευές.
Σελίδα ολοκλήρωσης αγοράς
Το LCP είναι η φόρμα ή το κουμπί. Βελτιστοποίησε μειώνοντας το CSS/JavaScript και κάνοντας preload στους κρίσιμους πόρους.
Οι διαφορετικοί τύποι σελίδων θέλουν διαφορετικές στρατηγικές. Μάθε ποιο είναι το στοιχείο LCP σου. Βελτιστοποίησε εκείνο το στοιχείο.
LCP σε κινητό και σε υπολογιστή
Το LCP στο κινητό είναι συνήθως πιο αργό από τον υπολογιστή. Το δίκτυο κινητής είναι πιο αργό. Οι συσκευές κινητού έχουν λιγότερη επεξεργαστική ισχύ.
Αρχικό LCP σε υπολογιστή: 1,5 δευτερόλεπτα. Αρχικό LCP σε κινητό: τρία δευτερόλεπτα.
Το κινητό είναι δύο φορές πιο αργό. Οι χρήστες κινητού νιώθουν την αργοπορία πιο έντονα.
Βελτιστοποίησε πρώτα το κινητό. Μείωσε το μέγεθος των εικόνων (το εύρος ζώνης στο κινητό είναι περιορισμένο). Μείωσε το JavaScript (οι συσκευές κινητού το επεξεργάζονται πιο αργά). Χρησιμοποίησε μορφές φιλικές προς το κινητό.
Μέτρηση της βελτίωσης του LCP
Αρχικό LCP
Μέτρησε πριν από τη βελτιστοποίηση.
Εφάρμοσε τη βελτιστοποίηση
Νέο LCP
Μέτρησε μετά τη βελτιστοποίηση.
Βελτίωση
Αρχικό μείον νέο LCP.
Παράδειγμα
Αρχικό 2,8 δευτερόλεπτα. Μετά τη βελτιστοποίηση 1,7 δευτερόλεπτα. Η βελτίωση είναι 1,1 δευτερόλεπτα.
Υπολόγισε την επίδραση
Βελτίωση 1,1 δευτερολέπτου μπορεί να αυξήσει το ποσοστό μετατροπής κατά ένα τοις εκατό (ανάλογα με την αρχική κατάσταση και τον κλάδο). Για πενήντα χιλιάδες επισκέπτες τον μήνα, αυτό κάνει πεντακόσιες επιπλέον μετατροπές με αξία παραγγελίας εκατό δολάρια. Πενήντα χιλιάδες δολάρια τον μήνα. Εξακόσιες χιλιάδες δολάρια τον χρόνο.
Σύγκρινέ το με το κόστος της βελτιστοποίησης. Αν το κόστος είναι πενήντα χιλιάδες δολάρια, η απόσβεση γίνεται σε έναν μήνα. Εξαιρετική απόδοση επένδυσης.
Συχνές ερωτήσεις
Πώς ξέρουμε ποιο στοιχείο είναι το LCP μας;
Χρησιμοποίησε τα Google Chrome DevTools. Κάνε δεξί κλικ στη σελίδα. Επιθεώρηση. Καρτέλα Performance. Κατέγραψε τη φόρτωση της σελίδας. Τα DevTools δείχνουν το στοιχείο LCP. Ή δες το PageSpeed Insights. Το Lighthouse εντοπίζει τα στοιχεία LCP. Δες και την αναφορά Core Web Vitals στο Search Console. Δείχνει τα στοιχεία LCP των σελίδων. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Να βελτιστοποιούμε το LCP σε όλες τις σελίδες ή μόνο στην αρχική;
Βελτιστοποίησε όλες τις σελίδες. Βάλε όμως προτεραιότητα με βάση την επισκεψιμότητα. Η αρχική είναι σημαντική, αλλά και οι σελίδες προϊόντων (σε e-shop) ή οι σελίδες άρθρων (σε εκδότες). Μέτρησε το LCP σε όλες τις σημαντικές σελίδες. Ξεκίνα από αυτές με τη μεγαλύτερη επισκεψιμότητα.
Βοηθάει πάντα το preload στο LCP;
Όχι πάντα. Το preload χρησιμοποιεί εύρος ζώνης. Αν κάνεις preload σε έναν πόρο που δεν έχει σημασία, καταναλώνεις εύρος ζώνης που θα μπορούσε να κατεβάσει κάτι σημαντικό. Κάνε preload μόνο στους κρίσιμους πόρους (κεντρική εικόνα, κρίσιμη γραμματοσειρά). Μην το κάνεις στους πόρους που δεν είναι κρίσιμοι.
Πώς βελτιστοποιούμε το LCP όταν το κύριο περιεχόμενο είναι δυναμικό (φορτώνει από API);
Η καθυστέρηση της κλήσης API προστίθεται στο LCP. Μείωσε τον χρόνο απόκρισης του API βελτιστοποιώντας τη βάση δεδομένων, κάνοντας caching στις απαντήσεις και χρησιμοποιώντας CDN. Δείξε επίσης οθόνη σκελετού ή περιεχόμενο κράτησης θέσης όσο φορτώνει το API. Η κράτηση θέσης εμφανίζεται αμέσως. Ο χρήστης νιώθει ότι η σελίδα φόρτωσε. Το πραγματικό περιεχόμενο γεμίζει μετά. Το αντιληπτό LCP είναι πιο γρήγορο από το πραγματικό.
Να κάνουμε lazy loading στο στοιχείο LCP;
Όχι. Το lazy loading καθυστερεί την εικόνα μέχρι να πλησιάσει στο ορατό πεδίο. Αν η εικόνα είναι στο ορατό τμήμα (στοιχείο LCP), το lazy loading την καθυστερεί χωρίς λόγο. Κάνε lazy load μόνο στις εικόνες κάτω από το ορατό τμήμα. Φόρτωσε αμέσως το στοιχείο LCP.
Πώς διαφέρει το LCP από το FCP (First Contentful Paint);
Το FCP είναι η στιγμή που εμφανίζεται οποιοδήποτε περιεχόμενο (μπορεί να είναι ένα μικρό κείμενο). Το LCP είναι η στιγμή που εμφανίζεται το κύριο περιεχόμενο (συνήθως μεγαλύτερη εικόνα ή τίτλος). Το FCP είναι πιο γρήγορο από το LCP. Το LCP μετράει περισσότερο για την εμπειρία του χρήστη. Βελτίωσε πρώτα το LCP.