Προσωρινή αποθήκευση καθυστέρησης
Η προσωρινή αποθήκευση καθυστέρησης είναι μια τεχνική που καθυστερεί τη φόρτωση μη κρίσιμων πόρων, όπως εικόνες κάτω από την αρχική προβολή, μέχρι να χρειαστούν πραγματικά, βελτιώνοντας την ταχύτητα αρχικής φόρτωσης της σελίδας.
Η προσωρινή αποθήκευση καθυστέρησης είναι μια στρατηγική βελτιστοποίησης απόδοσης που αναβάλλει τη φόρτωση πόρων μέχρι να χρειαστούν. Αντί να φορτώνει κάθε εικόνα, βίντεο και script όταν ανοίγει πρώτα μια σελίδα, η προσωρινή αποθήκευση καθυστέρησης φορτώνει μόνο τους πόρους που είναι ορατοί στο αρχικό viewport και ανακτά τους υπόλοιπους καθώς ο χρήστης κάνει scroll προς τα κάτω. Η πιο συνηθισμένη εφαρμογή είναι η προσωρινή αποθήκευση καθυστέρησης εικόνων. Μια τυπική ιστοσελίδα μπορεί να έχει 20-50 εικόνες, αλλά μόνο 2-3 είναι ορατές όταν φορτώνει πρώτα η σελίδα.
Χωρίς προσωρινή αποθήκευση καθυστέρησης, ο περιηγητής κατεβάζει και τις 50 εικόνες αμέσως, σπαταλώντας εύρος ζώνης και επιβραδύνοντας την αρχική απόδοση. Με την προσωρινή αποθήκευση καθυστέρησης, φορτώνονται πρώτα μόνο οι ορατές εικόνες και οι υπόλοιπες φορτώνονται καθώς ο χρήστης κάνει scroll προς αυτές. Οι σύγχρονοι περιηγητές υποστηρίζουν εγγενώς την προσωρινή αποθήκευση καθυστέρησης με το χαρακτηριστικό loading="lazy" στα στοιχεία img και iframe. Πριν από την εγγενή υποστήριξη, οι λύσεις βασισμένες σε JavaScript με το Intersection Observer API ήταν η τυπική προσέγγιση.
Στην πράξη
- Ένα portfolio φωτογραφίας με 200 εικόνες ανά σελίδα μείωσε τον χρόνο αρχικής φόρτωσης από 12 δευτερόλεπτα σε 1,8 δευτερόλεπτα εφαρμόζοντας προσωρινή αποθήκευση καθυστέρησης σε όλες τις εικόνες κάτω από τις πρώτες τρεις σειρές
- Μια σελίδα κατηγορίας ηλεκτρονικού εμπορίου με 60 εικόνες προϊόντων υλοποίησε εγγενή προσωρινή αποθήκευση καθυστέρησης, μειώνοντας το αρχικό βάρος σελίδας από 8MB σε 800KB
- Ένας ειδησεογραφικός ιστότοπος εφαρμόζει προσωρινή αποθήκευση καθυστέρησης σε ενσωματωμένα βίντεο YouTube, αντικαθιστώντας τα με ελαφριά thumbnails μέχρι ο χρήστης να κάνει κλικ για αναπαραγωγή, εξοικονομώντας 1,5MB JavaScript ανά βίντεο
- Μια σελίδα άρθρου μεγάλης φόρμας εφαρμόζει προσωρινή αποθήκευση καθυστέρησης σε widgets σχετικών άρθρων και ενότητες σχολίων στο κάτω μέρος, δίνοντας προτεραιότητα στο περιεχόμενο του άρθρου για την ταχύτερη δυνατή αρχική απόδοση
Περισσότερα για: Απόδοση
Δεν είστε σίγουροι πώς εφαρμόζεται σε εσάς;
Ένας έμπειρος μηχανικός εξετάζει τον ιστότοπό σας, την παρουσία σας στις αναζητήσεις και τον τρόπο που σας φτάνουν τα αιτήματα, και μετά καταγράφει τα τρία πράγματα που αξίζει να διορθωθούν πρώτα. Κρατάτε το έγγραφο είτε έτσι είτε αλλιώς.