Βελτιστοποιήστε το LCP | Largest Contentful Paint

Βελτιστοποιήστε Largest Contentful Paint

Το μεγαλύτερο Contentful Paint (LCP) είναι μία από τις τρεις βασικές μετρήσεις Web Vitals και αντιπροσωπεύει πόσο γρήγορα φορτώνεται το κύριο περιεχόμενο μιας ιστοσελίδας. Συγκεκριμένα, το LCP μετρά το χρόνο από τη στιγμή που ο χρήστης ξεκινά τη φόρτωση της σελίδας έως ότου εμφανιστεί το μεγαλύτερο μπλοκ εικόνας ή κειμένου στο παράθυρο προβολής.

Για να παρέχουν μια καλή εμπειρία χρήστη, οι ιστότοποι θα πρέπει να προσπαθούν να έχουν ένα LCP 2, 5 δευτερολέπτων ή λιγότερο για τουλάχιστον το 75% των επισκέψεων σελίδων.

Largest Contentful Paint LCP

Υπάρχουν διάφοροι παράγοντες που μπορούν να επηρεάσουν το πόσο γρήγορα το πρόγραμμα περιήγησης είναι σε θέση να φορτώσει και να αποδώσει μια ιστοσελίδα και η απόφραξη ή οι καθυστερήσεις σε οποιοδήποτε από αυτά μπορεί να έχουν σημαντικό αντίκτυπο στο LCP.

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

Η βελτιστοποίηση για το LCP είναι μια πολύπλοκη εργασία και με πολύπλοκες εργασίες είναι γενικά καλύτερο να τις χωρίσετε σε μικρότερες, πιο εύχρηστες εργασίες και να αντιμετωπίσετε το καθένα ξεχωριστά. Αυτός ο οδηγός θα παρουσιάσει μια μεθοδολογία για τον τρόπο διάσπασης του LCP στα πιο κρίσιμα υπο-μέρη του και στη συνέχεια θα παρουσιάσει συγκεκριμένες συστάσεις και βέλτιστες πρακτικές για τον τρόπο βελτιστοποίησης κάθε μέρους.

Για μια οπτική επισκόπηση του πλαισίου που παρουσιάζεται σε αυτόν τον οδηγό, δείτε μια βαθιά βουτιά στη βελτιστοποίηση του LCP από το Google I / O ’22:

Ανάλυση LCP

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

  1. Το αρχικό έγγραφο HTML
    Ο πόρος LCP (εάν υπάρχει)
  2. Ενώ άλλα αιτήματα στη σελίδα μπορούν να επηρεάσουν το LCP, αυτά τα δύο αιτήματα—συγκεκριμένα οι χρόνοι που αρχίζει και τελειώνει ο πόρος LCP—αποκαλύπτουν εάν η σελίδα σας έχει βελτιστοποιηθεί ή όχι για LCP.
 

Για να προσδιορίσετε τον πόρο LCP, μπορείτε να χρησιμοποιήσετε εργαλεία προγραμματιστών (όπως Chrome DevTools ή WebPageTest) για να προσδιορίσετε τα στοιχεία LCP και από εκεί μπορείτε να αντιστοιχίσετε τη διεύθυνση URL (και πάλι, εάν υπάρχει) που φορτώνεται από το στοιχείο σε έναν καταρράκτη δικτύου όλων των πόρων που φορτώνονται από τη σελίδα.

Για παράδειγμα, η ακόλουθη απεικόνιση εμφανίζει αυτούς τους πόρους που επισημαίνονται σε ένα διάγραμμα καταρράκτη δικτύου από ένα τυπικό φορτίο σελίδας, όπου το στοιχείο LCP απαιτεί ένα αίτημα εικόνας για απόδοση.

Το Large Contentful Paint (LCP) είναι μια σημαντική μέτρηση με επίκεντρο τον χρήστη για τη μέτρηση της αντιληπτής ταχύτητας φόρτωσης, επειδή επισημαίνει το σημείο στο χρονοδιάγραμμα φόρτωσης σελίδας

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

Αυτός ο πίνακας εξηγεί κάθε ένα από αυτά τα υπο-μέρη LCP με περισσότερες λεπτομέρειες:

  • Χρόνος έως το πρώτο byte (TTFB) : Ο χρόνος από τη στιγμή που ο χρήστης ξεκινά τη φόρτωση της σελίδας έως ότου το πρόγραμμα περιήγησης λάβει το πρώτο byte της απόκρισης εγγράφου HTML. (Δείτε το μετρικό έγγραφο TTFB για περισσότερες λεπτομέρειες.)
  • Το φορτίο πόρων καθυστερεί: Το δέλτα μεταξύ του TTFB και όταν το πρόγραμμα περιήγησης αρχίζει να φορτώνει τον πόρο LCP. *
  • Χρόνος φόρτωσης πόρων (Resource load delay) :  Ο χρόνος που απαιτείται για τη φόρτωση του ίδιου του πόρου LCP. *
  • Το στοιχείο καθιστά καθυστέρηση: Το δέλτα μεταξύ του πότε ο πόρος LCP τελειώνει τη φόρτωση έως ότου το στοιχείο LCP αποδίδεται πλήρως.
 
* Εάν το στοιχείο LCP δεν απαιτεί φόρτωση πόρων για απόδοση (για παράδειγμα, εάν το στοιχείο είναι ένας κόμβος κειμένου που αποδίδεται με γραμματοσειρά συστήματος), αυτή τη φορά θα είναι 0.
 
Κάθε σελίδα μπορεί να έχει την τιμή LCP κατανεμημένη σε αυτά τα τέσσερα υπο-μέρη. Δεν υπάρχει επικάλυψη ή χάσμα μεταξύ τους, και συλλογικά προσθέτουν μέχρι τον πλήρη χρόνο LCP.
 
Κατά τη βελτιστοποίηση του LCP, είναι χρήσιμο να προσπαθήσετε να βελτιστοποιήσετε αυτά τα επιμέρους μέρη ξεχωριστά. Αλλά είναι επίσης σημαντικό να έχετε κατά νου ότι πρέπει να βελτιστοποιήσετε όλα αυτά. Σε ορισμένες περιπτώσεις, μια βελτιστοποίηση που εφαρμόζεται σε ένα μέρος δεν θα βελτιώσει το LCP, απλώς θα μετατοπίσει τον αποθηκευμένο χρόνο σε άλλο μέρος.
 
Για παράδειγμα, στον προηγούμενο καταρράκτη δικτύου, εάν μειώσατε το μέγεθος του αρχείου της εικόνας μας συμπιέζοντάς το περισσότερο ή μεταβαίνοντας σε μια πιο βέλτιστη μορφή( όπως AVIF ή WebP), αυτό θα μείωνε τον χρόνο φόρτωσης των πόρων, αλλά δεν θα βελτίωνε πραγματικά το LCP επειδή ο χρόνος θα μετατοπιζόταν απλώς στο στοιχείο καθυστέρηση καθυστέρησης:

Ο λόγος που συμβαίνει αυτό είναι επειδή, σε αυτή τη σελίδα, το στοιχείο LCP είναι κρυμμένο μέχρι να ολοκληρωθεί η φόρτωση του κώδικα JavaScript και στη συνέχεια όλα αποκαλύπτονται ταυτόχρονα.

Αυτό το παράδειγμα βοηθά στην απεικόνιση του σημείου που πρέπει να βελτιστοποιήσετε όλα αυτά τα τμήματα για να επιτύχετε τα καλύτερα αποτελέσματα LCP.

Βέλτιστοι χρόνοι υπο-μέρους

Για να βελτιστοποιήσετε κάθε τμήμα του LCP, είναι σημαντικό να κατανοήσετε ποια είναι η ιδανική κατανομή αυτών των επιμέρους τμημάτων σε μια καλά βελτιστοποιημένη σελίδα.

Από τα τέσσερα υπο-μέρη, δύο έχουν τη λέξη “καθυστέρηση” στα ονόματά τους. Αυτή είναι μια ένδειξη ότι θέλετε να φτάσετε αυτούς τους χρόνους όσο το δυνατόν πιο κοντά στο μηδέν. Τα άλλα δύο μέρη περιλαμβάνουν αιτήματα δικτύου, τα οποία από τη φύση τους χρειάζονται χρόνο.

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

Ένας καλός τρόπος να σκεφτούμε την κατανομή του χρόνου LCP είναι:

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

Προειδοποίηση

Δεδομένου του στόχου των 2, 5 δευτερολέπτων για το LCP, μπορεί να είναι δελεαστικό να προσπαθήσουμε να μετατρέψουμε αυτά τα ποσοστά σε απόλυτους αριθμούς, αλλά αυτό δεν συνιστάται. Αυτά τα τμήματα έχουν νόημα μόνο σε σχέση με το άλλο, οπότε είναι καλύτερο να τα μετράτε πάντα με αυτόν τον τρόπο.

Πώς να βελτιστοποιήσετε κάθε μέρος

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

Οι επόμενες τέσσερις ενότητες θα παρουσιάσουν συστάσεις και βέλτιστες πρακτικές για τον τρόπο βελτιστοποίησης κάθε μέρους. Παρουσιάζονται με τη σειρά, ξεκινώντας από τις βελτιστοποιήσεις που είναι πιθανό να έχουν το μεγαλύτερο αντίκτυπο.

1. Εξαλείψτε την καθυστέρηση φόρτωσης πόρων

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

Ένας καλός κανόνας είναι ότι ο πόρος LCP θα πρέπει να αρχίσει να φορτώνεται ταυτόχρονα με τον πρώτο πόρο που φορτώνεται από αυτήν τη σελίδα. Ή, για να το θέσουμε με άλλο τρόπο, εάν ο πόρος LCP αρχίσει να φορτώνεται αργότερα από τον πρώτο πόρο, τότε υπάρχει ευκαιρία για βελτίωση.

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

  • Όταν ανακαλύπτεται ο πόρος.
  • Ποια προτεραιότητα δίνεται ο πόρος.
 
Βελτιστοποιήστε όταν ανακαλύπτεται ο πόρος 

Για να διασφαλίσετε ότι ο πόρος LCP ξεκινά τη φόρτωση όσο το δυνατόν νωρίτερα, είναι σημαντικό ο πόρος να μπορεί να εντοπιστεί στην αρχική απόκριση εγγράφου HTML από τον σαρωτή προφόρτισης του προγράμματος περιήγησης. Για παράδειγμα, στις ακόλουθες περιπτώσεις, το πρόγραμμα περιήγησης μπορεί να ανακαλύψει τον πόρο LCP σαρώνοντας την απόκριση εγγράφου HTML:

  • Το στοιχείο LCP είναι ένα στοιχείο < img> και τα χαρακτηριστικά του src ή srcset υπάρχουν στην αρχική σήμανση HTML.
  • Το στοιχείο LCP απαιτεί μια εικόνα φόντου CSS, αλλά αυτή η εικόνα προφορτώνεται μέσω <link rel=”preload”> στη σήμανση HTML (ή μέσω μιας κεφαλίδας Συνδέσμου).
  • Το στοιχείο LCP είναι ένας κόμβος κειμένου που απαιτεί μια γραμματοσειρά ιστού για απόδοση και η γραμματοσειρά φορτώνεται μέσω <link rel=”preload”> στη σήμανση HTML (ή μέσω μιας κεφαλίδας Συνδέσμου).
 

Ακολουθούν ορισμένα παραδείγματα όπου ο πόρος LCP δεν μπορεί να ανακαλυφθεί από τη σάρωση της απόκρισης εγγράφου HTML:

  • Το στοιχείο LCP είναι ένα < img > που προστίθεται δυναμικά στη σελίδα μέσω JavaScript.
  • Το στοιχείο LCP φορτώνεται τεμπέλης με μια βιβλιοθήκη JavaScript που κρύβει τα χαρακτηριστικά src ή srcset (συχνά ως data-src ή data-srcset).
  • Το στοιχείο LCP απαιτεί μια εικόνα φόντου CSS.
 

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

Για να εξαλείψετε την περιττή καθυστέρηση φόρτωσης πόρων, ο πόρος LCP θα πρέπει πάντα να είναι ανιχνεύσιμος από την πηγή HTML. Σε περιπτώσεις όπου ο πόρος αναφέρεται μόνο από εξωτερικό αρχείο CSS ή JavaScript, τότε ο πόρος LCP πρέπει να είναι προφορτωμένος, με υψηλή προτεραιότητα λήψης (περισσότερα για την προτεραιότητα λήψης στην επόμενη ενότητα). για παράδειγμα:

				
					
<link rel="stylesheet" href="/path/to/styles.css">


<link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">
				
			

Προειδοποίηση

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

Βελτιστοποιήστε την προτεραιότητα που δίνεται στον πόρο 

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

Για παράδειγμα, μπορείτε να καθυστερήσετε την εικόνα LCP μέσω HTML εάν ορίσετε loading=”lazy” στο στοιχείο <img>. Η χρήση τεμπέλης φόρτωσης σημαίνει ότι ο πόρος δεν θα φορτωθεί έως ότου η διάταξη επιβεβαιώσει ότι η εικόνα βρίσκεται στο παράθυρο προβολής και έτσι μπορεί να αρχίσει να φορτώνεται αργότερα από ό, τι διαφορετικά.

Προειδοποίηση

Ποτέ τεμπέλης-φορτώστε την εικόνα LCP, καθώς αυτό θα οδηγήσει πάντα σε περιττή καθυστέρηση φόρτωσης πόρων και θα έχει αρνητικό αντίκτυπο στο LCP.

Ακόμη και χωρίς τεμπέληδες φόρτωση, Οι εικόνες δεν φορτώνονται αρχικά με την υψηλότερη προτεραιότητα από τα προγράμματα περιήγησης, καθώς δεν είναι πόροι αποκλεισμού απόδοσης. Μπορείτε να υποδείξετε στο πρόγραμμα περιήγησης ποιοι πόροι είναι πιο σημαντικοί μέσω του χαρακτηριστικού fetch priority για πόρους που θα μπορούσαν να επωφεληθούν από υψηλότερη προτεραιότητα:

				
					<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" fetchpriority="high" data-src="/path/to/hero-image.webp">
				
			

Είναι καλή ιδέα να ορίσετε το fetchpriority= “high” σε ένα στοιχείο <img> αν νομίζετε ότι είναι πιθανό να είναι το στοιχείο LCP της σελίδας σας—αλλά περιορίστε το σε μία ή δύο εικόνες (με βάση τα κοινά μεγέθη επιτραπέζιων και κινητών παραθύρων), διαφορετικά το σήμα δεν έχει νόημα. Μπορείτε επίσης να μειώσετε την προτεραιότητα των εικόνων που ενδέχεται να είναι νωρίς στην απόκριση του εγγράφου, αλλά δεν είναι ορατές λόγω στυλ, όπως εικόνες σε διαφάνειες καρουσέλ που δεν είναι ορατές κατά την εκκίνηση:

				
					<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" fetchpriority="low" data-src="/path/to/carousel-slide-3.webp">
				
			

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

Αφού βελτιστοποιήσετε την προτεραιότητα των πόρων LCP και τον χρόνο ανακάλυψης, ο καταρράκτης του δικτύου σας θα πρέπει να μοιάζει με αυτόν (με τον πόρο LCP να ξεκινά ταυτόχρονα με τον πρώτο πόρο):

Σημαντικό

Ένας άλλος λόγος για τον οποίο ο πόρος LCP ενδέχεται να μην ξεκινήσει τη φόρτωση όσο το δυνατόν νωρίτερα—ακόμα και όταν είναι ανιχνεύσιμος από την πηγή HTML—είναι εάν φιλοξενείται σε διαφορετική προέλευση, καθώς αυτά τα αιτήματα απαιτούν από το πρόγραμμα περιήγησης να συνδεθεί με αυτήν την προέλευση πριν ο πόρος μπορεί να ξεκινήσει τη φόρτωση. Όταν είναι δυνατόν, είναι καλή ιδέα να φιλοξενήσετε κρίσιμους πόρους στην ίδια προέλευση με τον πόρο εγγράφου HTML, επειδή τότε αυτοί οι πόροι μπορούν να εξοικονομήσουν χρόνο επαναχρησιμοποιώντας την υπάρχουσα σύνδεση (περισσότερα για αυτό το σημείο αργότερα).

2. Εξαλείψτε την καθυστέρηση απόδοσης στοιχείου

Ο στόχος σε αυτό το βήμα είναι να διασφαλιστεί ότι το στοιχείο LCP μπορεί να αποδώσει αμέσως μετά την ολοκλήρωση της φόρτωσης του πόρου του, ανεξάρτητα από το πότε συμβαίνει αυτό.

Ο πρωταρχικός λόγος για τον οποίο το στοιχείο LCP δεν θα μπορούσε να αποδώσει αμέσως μετά την ολοκλήρωση της φόρτωσης του πόρου του είναι εάν η απόδοση έχει αποκλειστεί για κάποιο άλλο λόγο:

  • Η απόδοση ολόκληρης της σελίδας αποκλείεται λόγω φύλλων στυλ ή σύγχρονων σεναρίων στο <head> που εξακολουθούν να φορτώνονται.
  • Ο πόρος LCP έχει ολοκληρωθεί η φόρτωση, αλλά το στοιχείο LCP δεν έχει ακόμη προστεθεί στο DOM (περιμένει να φορτωθεί κάποιος κώδικας JavaScript).
  • Το στοιχείο αποκρύπτεται από κάποιο άλλο κώδικα, όπως μια βιβλιοθήκη δοκιμών A/B που εξακολουθεί να καθορίζει σε ποιο πείραμα θα πρέπει να βρίσκεται ο χρήστης.
  • Το κύριο νήμα είναι αποκλεισμένο λόγω μεγάλων εργασιών και η απόδοση της εργασίας πρέπει να περιμένει μέχρι να ολοκληρωθούν αυτές οι μεγάλες εργασίες.
  • Οι ακόλουθες ενότητες εξηγούν τον τρόπο αντιμετώπισης των πιο κοινών αιτιών περιττής καθυστέρησης απόδοσης στοιχείων.

Μειώστε ή ενσωματωμένα φύλλα στυλ αποκλεισμού απόδοσης

Τα φύλλα στυλ που φορτώνονται από τη σήμανση HTML θα μπλοκάρουν την απόδοση όλου του περιεχομένου που τα ακολουθεί, κάτι που είναι καλό, αφού γενικά δεν θέλετε να αποδώσετε μη styled HTML. Ωστόσο, εάν το φύλλο στυλ είναι τόσο μεγάλο που χρειάζεται πολύ περισσότερο χρόνο για φόρτωση από τον πόρο LCP, τότε θα αποτρέψει την απόδοση του στοιχείου LCP—ακόμη και μετά την ολοκλήρωση της φόρτωσης του πόρου του, όπως φαίνεται σε αυτό το παράδειγμα:

Για να το διορθώσετε, οι επιλογές σας είναι είτε:

  • ενσωματώστε το φύλλο στυλ στο HTML για να αποφύγετε το πρόσθετο αίτημα δικτύου. ή,
  • μειώστε το μέγεθος του φύλλου στυλ.
 

Σε γενικές γραμμές, η ενσωμάτωση του φύλλου στυλ σας συνιστάται μόνο εάν το φύλλο στυλ σας είναι μικρό, καθώς το ενσωματωμένο περιεχόμενο στο HTML δεν μπορεί να επωφεληθεί από την προσωρινή αποθήκευση σε επόμενα φορτία σελίδων. Εάν ένα φύλλο στυλ είναι τόσο μεγάλο που χρειάζεται περισσότερος χρόνος για φόρτωση από τον πόρο LCP, τότε είναι απίθανο να είναι καλός υποψήφιος για inlining.

Στις περισσότερες περιπτώσεις, ο καλύτερος τρόπος για να διασφαλίσετε ότι το φύλλο στυλ δεν εμποδίζει την απόδοση του στοιχείου LCP είναι να μειώσετε το μέγεθός του έτσι ώστε να είναι μικρότερο από τον πόρο LCP. Αυτό θα πρέπει να διασφαλίσει ότι δεν αποτελεί εμπόδιο για τις περισσότερες επισκέψεις.

Ορισμένες συστάσεις για τη μείωση του μεγέθους του φύλλου στυλ είναι:

  • Κατάργηση αχρησιμοποίητου CSS: χρησιμοποιήστε το Chrome DevTools για να βρείτε κανόνες CSS που δεν χρησιμοποιούνται και μπορούν ενδεχομένως να αφαιρεθούν (ή να αναβληθούν).
  • Αναβολή μη κρίσιμου CSS: διαχωρίστε το φύλλο στυλ σε στυλ που απαιτούνται για την αρχική φόρτωση σελίδας και, στη συνέχεια, στυλ που μπορούν να φορτωθούν χαλαρά.
  • Ελαχιστοποίηση και συμπίεση CSS: για στυλ που είναι κρίσιμα, βεβαιωθείτε ότι μειώνετε όσο το δυνατόν περισσότερο το μέγεθος μεταφοράς τους.

Αναβολή ή inline render-αποκλεισμός JavaScript

Δεν είναι σχεδόν ποτέ απαραίτητο να προσθέσετε σύγχρονα σενάρια (σενάρια χωρίς τα χαρακτηριστικά async ή defer) στο <head> των σελίδων σας και κάτι τέτοιο θα έχει σχεδόν πάντα αρνητικό αντίκτυπο στην απόδοση.

Σε περιπτώσεις όπου ο κώδικας JavaScript πρέπει να εκτελείται όσο το δυνατόν νωρίτερα στο φορτίο της σελίδας, είναι καλύτερο να το ενσωματώσετε, ώστε η απόδοση να μην καθυστερεί να περιμένει σε άλλο αίτημα δικτύου. Όπως και με τα φύλλα στυλ, όμως, θα πρέπει να ενσωματώσετε μόνο σενάρια εάν είναι πολύ μικρά.

Μην κάνετε 

				
					<head> <script src="/path/to/main.js" defer data-deferred="1"></script> </head>
				
			

Κάνετε

				
					<head> <script>// Inline script contents directly in the HTML.
    // IMPORTANT: only do this for very small scripts.</script> </head>
				
			

Χρησιμοποιήστε απόδοση από την πλευρά του διακομιστή

Η απόδοση από την πλευρά του διακομιστή (SSR) είναι η διαδικασία εκτέλεσης της λογικής εφαρμογής από την πλευρά του πελάτη στον διακομιστή και η απάντηση σε αιτήματα εγγράφων HTML με την πλήρη σήμανση HTML.

Από την άποψη της βελτιστοποίησης του LCP, υπάρχουν δύο κύρια πλεονεκτήματα της SSR:

  • Οι πόροι εικόνας σας θα είναι ανιχνεύσιμοι από την πηγή HTML (όπως συζητήθηκε στο Βήμα 1 νωρίτερα).
  • Το περιεχόμενο της σελίδας σας δεν θα απαιτήσει πρόσθετα αιτήματα JavaScript για να ολοκληρωθεί πριν μπορέσει να αποδώσει.


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

Μια παρόμοια επιλογή με SSR ονομάζεται static site generation (SSG) ή prerendering. Αυτή είναι η διαδικασία δημιουργίας των σελίδων HTML σας σε ένα βήμα κατασκευής και όχι κατ ‘ απαίτηση. Εάν η προέκδοση είναι δυνατή με την αρχιτεκτονική σας, είναι γενικά μια καλύτερη επιλογή για απόδοση.

Διαλύστε μεγάλες εργασίες

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

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

Όλα τα προγράμματα περιήγησης αποδίδουν σήμερα εικόνες στο κύριο νήμα, πράγμα που σημαίνει ότι οτιδήποτε εμποδίζει το κύριο νήμα μπορεί επίσης να οδηγήσει σε περιττή καθυστέρηση απόδοσης στοιχείων.

2. Εξαλείψτε την καθυστέρηση απόδοσης στοιχείου

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

  • Μειώστε το μέγεθος του πόρου.
  • Μειώστε την απόσταση που πρέπει να διανύσει ο πόρος.
  • Μειώστε τον ισχυρισμό για το εύρος ζώνης δικτύου.
  • Εξαλείψτε εντελώς τον χρόνο δικτύου.

Μειώστε το μέγεθος του πόρου

Ο πόρος LCP μιας σελίδας (αν έχει) θα είναι είτε μια εικόνα είτε μια γραμματοσειρά ιστού. Οι παρακάτω οδηγοί πηγαίνουν σε μεγάλη λεπτομέρεια για το πώς να μειώσετε το μέγεθος και των δύο:

  • Σερβίρετε το βέλτιστο μέγεθος εικόνας
  • Χρησιμοποιήστε σύγχρονες μορφές εικόνας
  • Συμπίεση εικόνων
  • Μειώστε το μέγεθος γραμματοσειράς ιστού

Μειώστε την απόσταση που πρέπει να διανύσει ο πόρος

Εκτός από τη μείωση του μεγέθους ενός πόρου, μπορείτε επίσης να μειώσετε τους χρόνους φόρτωσης κάνοντας τους διακομιστές σας όσο το δυνατόν πιο κοντά στους χρήστες σας. Και ο καλύτερος τρόπος για να γίνει αυτό είναι να χρησιμοποιήσετε ένα δίκτυο παράδοσης περιεχομένου (CDN).

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

Σημαντικό

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

Μειώστε τον ισχυρισμό για το εύρος ζώνης δικτύου

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

Εάν έχετε δώσει τον πόρο LCP σας υψηλό fetchπροτεραιότητα και άρχισε να το Φορτώνει το συντομότερο δυνατό, τότε το πρόγραμμα περιήγησης θα καταβάλει κάθε δυνατή προσπάθεια για να αποτρέψει τον ανταγωνισμό πόρων χαμηλότερης προτεραιότητας. Ωστόσο, εάν φορτώνετε πολλούς πόρους με υψηλή προτεραιότητα λήψης ή εάν απλώς φορτώνετε πολλούς πόρους γενικά, τότε θα μπορούσε να επηρεάσει πόσο γρήγορα φορτώνεται ο πόρος LCP.

Εξαλείψτε εντελώς τον χρόνο δικτύου

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

Και αν ο πόρος σας LCP είναι μια γραμματοσειρά ιστού, εκτός από τη μείωση του μεγέθους γραμματοσειράς ιστού, θα πρέπει επίσης να εξετάσετε εάν πρέπει να αποκλείσετε την απόδοση στο φορτίο πόρων γραμματοσειράς ιστού. Εάν ορίσετε μια τιμή εμφάνισης γραμματοσειράς για οτιδήποτε άλλο εκτός από το auto ή το block, τότε το κείμενο θα είναι πάντα ορατό κατά τη διάρκεια του φορτίου και το LCP δεν θα αποκλειστεί σε ένα πρόσθετο αίτημα δικτύου.

Τέλος, εάν ο πόρος LCP είναι μικρός, μπορεί να έχει νόημα να ενσωματώσετε τους πόρους ως διεύθυνση URL δεδομένων, η οποία θα εξαλείψει επίσης το πρόσθετο αίτημα δικτύου. Ωστόσο, η χρήση διευθύνσεων URL δεδομένων συνοδεύεται από προειδοποιήσεις, διότι τότε οι πόροι δεν μπορούν να αποθηκευτούν προσωρινά και σε ορισμένες περιπτώσεις μπορεί να οδηγήσουν σε μεγαλύτερες καθυστερήσεις λόγω του πρόσθετου κόστους αποκωδικοποίησης.

4. Μειώστε το χρόνο στο πρώτο byte

Ο στόχος αυτού του βήματος είναι να παραδώσει το αρχικό HTML όσο το δυνατόν γρηγορότερα. Αυτό το βήμα παρατίθεται τελευταία επειδή είναι συχνά το ένα προγραμματιστές έχουν το λιγότερο έλεγχο πάνω. Ωστόσο, είναι επίσης ένα από τα πιο σημαντικά βήματα επειδή επηρεάζει άμεσα κάθε βήμα που ακολουθεί. Τίποτα δεν μπορεί να συμβεί στο frontend έως ότου το backend παραδώσει αυτό το πρώτο byte περιεχομένου, οπότε οτιδήποτε μπορείτε να κάνετε για να επιταχύνετε το TTFB σας θα βελτιώσει και κάθε άλλη μέτρηση φόρτωσης.

Για συγκεκριμένες οδηγίες σχετικά με αυτό το θέμα, δείτε: Πώς να βελτιώσετε το TTFB.

Παρακολούθηση ανάλυσης LCP στο JavaScript

Οι πληροφορίες χρονισμού για όλα τα τμήματα LCP που συζητήθηκαν παραπάνω είναι διαθέσιμες σε εσάς στο JavaScript μέσω ενός συνδυασμού των ακόλουθων API απόδοσης:

  • Μεγαλύτερο Contentful Paint API
  • API χρονισμού πλοήγησης
  • API χρονισμού πόρων
 

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

Για παράδειγμα, το παρακάτω στιγμιότυπο οθόνης χρησιμοποιεί την απόδοση.μετρήστε τη μέθοδο () από το API χρονισμού χρήστη για να προσθέσετε γραμμές στο κομμάτι χρονισμού στον πίνακα επιδόσεων του Chrome DevTools.

Οι απεικονίσεις στο κομμάτι χρονισμών είναι ιδιαίτερα χρήσιμες όταν εξετάζονται παράλληλα με το δίκτυο και τα κύρια κομμάτια νήματος, επειδή μπορείτε να δείτε με μια ματιά τι άλλο συμβαίνει στη σελίδα κατά τη διάρκεια αυτών των χρονικών διαστημάτων.

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

Αυτό το στιγμιότυπο οθόνης δείχνει ένα παράδειγμα που καταγράφει τον συνολικό χρόνο κάθε υπο-τμήματος LCP, καθώς και το ποσοστό του συνολικού χρόνου LCP στην κονσόλα.

Και οι δύο αυτές απεικονίσεις δημιουργήθηκαν με τον ακόλουθο κώδικα:

				
					const LCP_SUB_PARTS = [
  'Time to first byte',
  'Resource load delay',
  'Resource load time',
  'Element render delay',
];

new PerformanceObserver((list) => {
  const lcpEntry = list.getEntries().at(-1);
  const navEntry = performance.getEntriesByType('navigation')[0];
  const lcpResEntry = performance
    .getEntriesByType('resource')
    .filter((e) => e.name === lcpEntry.url)[0];

  // Ignore LCP entries that aren't images to reduce DevTools noise.
  // Comment this line out if you want to include text entries.
  if (!lcpEntry.url) return;

  // Compute the start and end times of each LCP sub-part.
  // WARNING! If your LCP resource is loaded cross-origin, make sure to add
  // the `Timing-Allow-Origin` (TAO) header to get the most accurate results.
  const ttfb = navEntry.responseStart;
  const lcpRequestStart = Math.max(
    ttfb,
    // Prefer `requestStart` (if TOA is set), otherwise use `startTime`.
    lcpResEntry ? lcpResEntry.requestStart || lcpResEntry.startTime : 0
  );
  const lcpResponseEnd = Math.max(
    lcpRequestStart,
    lcpResEntry ? lcpResEntry.responseEnd : 0
  );
  const lcpRenderTime = Math.max(
    lcpResponseEnd,
    // Prefer `renderTime` (if TOA is set), otherwise use `loadTime`.
    lcpEntry ? lcpEntry.renderTime || lcpEntry.loadTime : 0
  );

  // Clear previous measures before making new ones.
  // Note: due to a bug this does not work in Chrome DevTools.
  LCP_SUB_PARTS.forEach((part) => performance.clearMeasures(part));

  // Create measures for each LCP sub-part for easier
  // visualization in the Chrome DevTools Performance panel.
  const lcpSubPartMeasures = [
    performance.measure(LCP_SUB_PARTS[0], {
      start: 0,
      end: ttfb,
    }),
    performance.measure(LCP_SUB_PARTS[1], {
      start: ttfb,
      end: lcpRequestStart,
    }),
    performance.measure(LCP_SUB_PARTS[2], {
      start: lcpRequestStart,
      end: lcpResponseEnd,
    }),
    performance.measure(LCP_SUB_PARTS[3], {
      start: lcpResponseEnd,
      end: lcpRenderTime,
    }),
  ];

  // Log helpful debug information to the console.
  console.log('LCP value: ', lcpRenderTime);
  console.log('LCP element: ', lcpEntry.element, lcpEntry.url);
  console.table(
    lcpSubPartMeasures.map((measure) => ({
      'LCP sub-part': measure.name,
      'Time (ms)': measure.duration,
      '% of LCP': `${
        Math.round((1000 * measure.duration) / lcpRenderTime) / 10
      }%`,
    }))
  );
}).observe({type: 'largest-contentful-paint', buffered: true});
				
			

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

Περίληψη

Το LCP είναι πολύπλοκο και ο χρονισμός του μπορεί να επηρεαστεί από διάφορους παράγοντες. Αλλά αν θεωρήσετε ότι η βελτιστοποίηση του LCP αφορά κυρίως τη βελτιστοποίηση του φορτίου του πόρου LCP, μπορεί να απλοποιήσει σημαντικά τα πράγματα.

Σε υψηλό επίπεδο, η βελτιστοποίηση του LCP μπορεί να συνοψιστεί σε τέσσερα βήματα:

  • Βεβαιωθείτε ότι ο πόρος LCP ξεκινά τη φόρτωση όσο το δυνατόν νωρίτερα.
  • Βεβαιωθείτε ότι το στοιχείο LCP μπορεί να αποδώσει μόλις ολοκληρωθεί η φόρτωση του πόρου του.
  • Μειώστε το χρόνο φόρτωσης του πόρου LCP όσο μπορείτε χωρίς να θυσιάζετε την ποιότητα.
  • Παραδώστε το αρχικό έγγραφο HTML όσο το δυνατόν γρηγορότερα.
 

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

Search

Share:

Υπηρεσίες

Περιεχόμενά

Share:

Facebook
Twitter
Pinterest
Email
WhatsApp

Αναδείξτε την Επιχείρησή σας Με την Ιδανική Ιστοσελίδα

Συμπληρώστε το Ερωτηματολόγιο Προσφοράς Σήμερα!

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

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

Μην ανησυχείτε εάν δεν γνωρίζετε όλες τις λεπτομέρειες αυτή τη στιγμή – απλώς συμπληρώστε όσα περισσότερα στοιχεία μπορείτε. Εάν χρειαστεί, θα επικοινωνήσουμε μαζί σας για να συζητήσουμε περισσότερες λεπτομέρειες και να καθοδηγήσουμε τη διαδικασία.

Πάρτε την πρωτοβουλία και ας ξεκινήσουμε την κατασκευή της επαγγελματικής ιστοσελίδας που ονειρεύεστε! 

Webion Blog

Σχετικές Αναρτήσεις

Κατασκευή Ιστοσελίδων: Η Πύλη για την Επιτυχία της Επιχείρησής σας
Web Design

Κατασκευή Ιστοσελίδων: Η Πύλη για την Επιτυχία της Επιχείρησής σας

Είναι γεγονός ότι στη σύγχρονη εποχή, μια δυναμική και ανταποκρινόμενη ιστοσελίδα αποτελεί τον πυρήνα της επιτυχίας κάθε επιχείρησης. Αναρωτιέστε πώς μπορείτε να αποκτήσετε μια εκπληκτική ιστοσελίδα που θα κεντρίσει την προσοχή των επισκεπτών σας; Η απάντηση είναι απλή: με την βοήθεια της Webion. Στο παρόν άρθρο, θα σας παρουσιάσουμε τον κόσμο της κατασκευής ιστοσελίδων και πώς μπορεί να βοηθήσει την επιχείρησή σας να ξεχωρίσει. Ετοιμαστείτε να εντυπωσιαστείτε!

Η σημασία της custom κατασκευής ιστοσελίδων στην εποχή των έτοιμων λύσεων
Web Design

Η σημασία της custom κατασκευής ιστοσελίδων στην εποχή των έτοιμων λύσεων

Στην παγκοσμιοποιημένη εποχή του διαδικτύου, η ανάγκη για ξεχωριστή και αναγνωρίσιμη online παρουσία για τις επιχειρήσεις είναι πιο επιτακτική από ποτέ. Μπορεί να υπάρχουν πληθώρα έτοιμων λύσεων για τη δημιουργία ιστοσελίδων, όπως η WordPress, αλλά οι custom ιστοσελίδες αποτελούν μια εξαιρετικά ελκυστική επιλογή για πολλές επιχειρήσεις. Ας εξετάσουμε γιατί.

Professional Web Design Services κατασκευή ιστοσελίδων SEO βελτιστοποίηση WordPress
Μείνετε συνδεδεμένοι, όπου και αν βρίσκεστε!
Κατεβάστε την επίσημη εφαρμογή μας για να απολαύσετε εξατομικευμένη εμπειρία και αποκλειστικά προνόμια.