Τι είναι το lazy loading και πώς λειτουργεί

Δεν χρειάζεται να φορτώνει κάθε εικόνα μιας σελίδας την ίδια στιγμή. Το lazy loading εικόνων καθυστερεί τη λήψη των εικόνων που δεν είναι ακόμη ορατές στο viewport του επισκέπτη, ώστε ο browser να εστιάζει στο περιεχόμενο που ο επισκέπτης μπορεί πραγματικά να δει, αντί να φορτώνει ολόκληρη τη σελίδα μονομιάς. Για σελίδες με πολλές εικόνες, αυτή η αλλαγή από μόνη της μπορεί να μειώσει σημαντικά τον αρχικό χρόνο φόρτωσης και να βελτιώσει τους δείκτες που μετράνε και για την εμπειρία των επισκεπτών και για την κατάταξη στην αναζήτηση. Αυτό το άρθρο εξηγεί τι είναι το lazy loading, πώς λειτουργεί τεχνικά, τι πρέπει και τι δεν πρέπει να φορτώνεται με lazy loading και πώς επηρεάζει τις βαθμολογίες Core Web Vitals.

Όταν ένας browser φορτώνει μια σελίδα χωρίς lazy loading, κατεβάζει κάθε εικόνα της σελίδας, ανεξάρτητα από το αν κάποια είναι ήδη ορατή. Ένας επισκέπτης που ανοίγει μια σελίδα και φεύγει αμέσως προκαλεί παρ' όλα αυτά τη λήψη κάθε εικόνας κάτω από το ορατό τμήμα. Αυτό είναι χαμένο εύρος ζώνης και επιβραδύνει τη φόρτωση όλων όσων βρίσκονται στο ορατό τμήμα και τα οποία βλέπει πραγματικά ο επισκέπτης. Το lazy loading το αλλάζει ώστε να κατεβαίνει μόνο το περιεχόμενο που είναι τώρα σε προβολή. Για το πώς ταιριάζει αυτό στη γενικότερη εικόνα της ταχύτητας φόρτωσης σελίδας, δες το άρθρο για το πώς να μειώσεις τον χρόνο φόρτωσης της ιστοσελίδας σου.

Τι είναι το lazy loading;

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

Τι αλλάζει το lazy loading στην ακολουθία φόρτωσης

• Χωρίς lazy loading: ο browser ζητά όλες τις εικόνες όταν φορτώνει πρώτα η σελίδα, ανεξάρτητα από το αν βρίσκονται στο viewport
• Με lazy loading: ο browser ζητά μόνο τις εικόνες που βρίσκονται μέσα ή κοντά στο τρέχον viewport. Οι υπόλοιπες ζητούνται καθώς ο επισκέπτης κυλά προς το μέρος τους
• Ο συνολικός όγκος δεδομένων που μεταφέρεται κατά τη διάρκεια μιας πλήρους κύλισης της σελίδας είναι ο ίδιος, αλλά η αρχική φόρτωση είναι σημαντικά πιο ελαφριά
• Οι επισκέπτες που δεν κυλούν πέρα από ένα συγκεκριμένο σημείο της σελίδας δεν προκαλούν ποτέ τη λήψη εικόνων που δεν φτάνουν

Πώς λειτουργεί τεχνικά το lazy loading;

Υπάρχουν δύο τρόποι να υλοποιήσεις lazy loading για εικόνες: το εγγενές χαρακτηριστικό του browser και οι λύσεις με JavaScript.

Εγγενές lazy loading

• Όλοι οι μεγάλοι browser υποστηρίζουν εγγενές lazy loading μέσω του χαρακτηριστικού loading="lazy" που προστίθεται απευθείας στην ετικέτα της εικόνας
• Δεν χρειάζεται JavaScript ή εξωτερικές βιβλιοθήκες. Ο browser χειρίζεται εγγενώς τη συμπεριφορά φόρτωσης
• Αυτή είναι πλέον η τυπική προσέγγιση για lazy loading εικόνων στο διαδίκτυο και απαιτεί ελάχιστες τεχνικές γνώσεις για να εφαρμοστεί
• Ο browser αποφασίζει πότε θα αρχίσει να φορτώνει μια εικόνα με βάση την απόστασή της από το viewport, ένα όριο που ποικίλλει ελαφρώς ανάμεσα στους browser

Lazy loading με JavaScript

• Πριν το εγγενές lazy loading υποστηριχθεί ευρέως, οι προγραμματιστές χρησιμοποιούσαν βιβλιοθήκες JavaScript που παρακολουθούσαν τη θέση κύλισης και ενεργοποιούσαν τη φόρτωση εικόνων καθώς αυτές έμπαιναν στο viewport
• Το Intersection Observer API είναι η τυπική προσέγγιση με JavaScript, που ανιχνεύει πότε ένα στοιχείο μπαίνει ή βγαίνει από το viewport χωρίς να βασίζεται σε listeners συμβάντων κύλισης
• Το lazy loading με JavaScript χρησιμοποιείται ακόμη για πιο σύνθετα σενάρια, όπως το lazy loading εικόνων φόντου που ορίζονται σε CSS ή περιεχομένου βίντεο
• Για τυπικά στοιχεία εικόνας, το εγγενές lazy loading με loading="lazy" είναι πιο απλό και πιο αξιόπιστο

Τι άλλο εκτός από εικόνες μπορεί να φορτώνεται με lazy loading;

Iframes

• Το χαρακτηριστικό loading="lazy" δουλεύει και σε iframes σε όλους τους μεγάλους browser
• Ενσωματωμένοι χάρτες, φόρμες και περιεχόμενο τρίτων σε iframes μπορούν να αναβληθούν μέχρι ο επισκέπτης να κυλήσει προς το μέρος τους
• Είναι ιδιαίτερα χρήσιμο για σελίδες με ενσωματωμένους χάρτες ή widgets τρίτων κοντά στο κάτω μέρος της σελίδας, καθώς αυτά περιλαμβάνουν συχνά βαριά εξωτερικά scripts

Βίντεο

• Τα αρχεία βίντεο είναι σημαντικά μεγαλύτερα από τις εικόνες και μπορούν να έχουν μεγάλη επίδραση στον αρχικό χρόνο φόρτωσης όταν βρίσκονται κάτω από το ορατό τμήμα
• Το lazy loading βίντεο απαιτεί προσέγγιση με JavaScript, αφού το εγγενές χαρακτηριστικό loading δεν ισχύει για στοιχεία βίντεο
• Μια συνηθισμένη προσέγγιση είναι να φορτώνεται αρχικά μόνο μια μικρογραφία ή εικόνα poster και να αρχίζει η λήψη του αρχείου βίντεο μόνο όταν ο επισκέπτης αλληλεπιδρά με αυτό ή κυλά προς το μέρος του

Components και ενότητες

• Σε εφαρμογές με πολλή JavaScript, ολόκληρες ενότητες σελίδας ή components μπορούν να φορτώνονται με lazy loading, δηλαδή ο κώδικας και το περιεχόμενό τους δεν λαμβάνονται μέχρι ο επισκέπτης να φτάσει σε εκείνο το σημείο της σελίδας
• Είναι προχωρημένη τεχνική που χρησιμοποιείται σε σύνθετες εφαρμογές ιστού και την αναλαμβάνει συνήθως το framework αντί να υλοποιείται χειροκίνητα

Τι δεν πρέπει να φορτώνεται με lazy loading;

Το lazy loading βελτιώνει την απόδοση όταν εφαρμόζεται σωστά, αλλά αν το εφαρμόσεις σε λάθος σημείο προκαλεί προβλήματα αντί να τα λύνει.

Εικόνες στο ορατό τμήμα

• Η εικόνα hero, το λογότυπο ή κάθε εμφανές οπτικό περιεχόμενο που φαίνεται όταν ανοίγει πρώτα η σελίδα πρέπει να φορτώνει αμέσως
• Αν εφαρμόσεις lazy loading σε εικόνες του ορατού τμήματος, καθυστερεί το LCP, κάτι που χειροτερεύει τις βαθμολογίες Core Web Vitals και την εμπειρία των επισκεπτών
• Ο κανόνας είναι απλός: ό,τι φαίνεται χωρίς κύλιση πρέπει να φορτώνει αμέσως. Ό,τι βρίσκεται κάτω από το ορατό τμήμα μπορεί να φορτώνει με lazy loading

Εικόνες κοντά στο όριο του ορατού τμήματος

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

Κρίσιμο περιεχόμενο σε σελίδες που φορτώνουν γρήγορα

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

Πώς επηρεάζει το lazy loading τα Core Web Vitals;

Το lazy loading έχει άμεση επίδραση σε δύο δείκτες Core Web Vitals και καμία στον τρίτο, όταν εφαρμόζεται σωστά.

Largest Contentful Paint (LCP)

• Το lazy loading δεν πρέπει να εφαρμόζεται ποτέ στο στοιχείο που είναι πιθανό να είναι υποψήφιο LCP, συνήθως την εικόνα hero
• Όταν εφαρμόζεται σωστά, το lazy loading μειώνει τον αριθμό των πόρων που ανταγωνίζονται για εύρος ζώνης κατά την αρχική φόρτωση, κάτι που μπορεί να βελτιώσει το LCP επιτρέποντας στο περιεχόμενο του ορατού τμήματος να φορτώσει πιο γρήγορα
• Αν εφαρμοστεί λανθασμένα σε εικόνες του ορατού τμήματος, το lazy loading χειροτερεύει άμεσα το LCP, καθυστερώντας το μεγαλύτερο ορατό στοιχείο

Interaction to Next Paint (INP)

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

Cumulative Layout Shift (CLS)

• Το lazy loading δεν επηρεάζει άμεσα το CLS, αλλά οι εικόνες με lazy loading που δεν έχουν ορισμένα χαρακτηριστικά πλάτους και ύψους μπορούν να προκαλέσουν μετατοπίσεις διάταξης όταν φορτώνουν
• Όρισε πάντα ρητές διαστάσεις στις εικόνες με lazy loading, ώστε ο browser να δεσμεύει τον σωστό χώρο πριν φορτώσει η εικόνα

Για πλήρη ανάλυση του πώς βαθμολογούνται τα LCP, INP και CLS και ποια είναι τα όρια, δες το άρθρο για το τι είναι τα Core Web Vitals.

Επηρεάζει το lazy loading το SEO;

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

Πώς χειρίζονται οι μηχανές αναζήτησης το περιεχόμενο με lazy loading

• Οι crawlers των μηχανών αναζήτησης αποδίδουν τις σελίδες παρόμοια με τους browser και μπορούν να ευρετηριάσουν περιεχόμενο που φορτώνεται με lazy loading
• Οι εικόνες που φορτώνονται με lazy loading εξακολουθούν να σαρώνονται και μπορούν να εμφανιστούν στα αποτελέσματα αναζήτησης εικόνων
• Το όφελος για το SEO προέρχεται κυρίως από τις βελτιώσεις ταχύτητας που επιτρέπει το lazy loading. Οι σελίδες με καλύτερες βαθμολογίες Core Web Vitals, που το lazy loading μπορεί να βοηθήσει να βελτιωθούν, έχουν πλεονέκτημα κατάταξης

Το εναλλακτικό κείμενο (alt text) ισχύει ακόμη

• Οι εικόνες με lazy loading χρειάζονται το ίδιο alt text με κάθε άλλη εικόνα. Το χαρακτηριστικό alt πρέπει να συμπληρώνεται με περιγραφή της εικόνας, είτε φορτώνεται με lazy loading είτε όχι
• Για οδηγίες σχετικά με το πώς να γράφεις αποτελεσματικό alt text, δες το άρθρο για το πώς να χρησιμοποιείς εικόνες στην ιστοσελίδα σου

Πώς προσθέτεις lazy loading στην ιστοσελίδα σου;

Για μεμονωμένες εικόνες σε HTML

• Πρόσθεσε loading="lazy" σε κάθε ετικέτα εικόνας που βρίσκεται κάτω από το ορατό τμήμα
• Φρόντισε κάθε εικόνα με lazy loading να έχει ρητά χαρακτηριστικά width και height, για να αποφεύγονται οι μετατοπίσεις διάταξης καθώς φορτώνουν οι εικόνες
• Μην προσθέτεις loading="lazy" στην εικόνα hero ή σε οποιαδήποτε εικόνα φαίνεται χωρίς κύλιση

Μέσω της πλατφόρμας της ιστοσελίδας σου

• Πολλοί δημιουργοί ιστοσελίδων εφαρμόζουν αυτόματα lazy loading σε εικόνες κάτω από το ορατό τμήμα, χωρίς να απαιτείται χειροκίνητη υλοποίηση
• Έλεγξε την τεκμηρίωση απόδοσης της πλατφόρμας σου για να επιβεβαιώσεις αν το χειρίζεται αυτόματα, πριν το προσθέσεις χειροκίνητα

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

Πώς το WEMASY χειρίζεται το lazy loading

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

Το lazy loading δουλεύει μαζί με τη συμπίεση εικόνων και την παράδοση μέσω CDN σε κάθε πακέτο του WEMASY. Αυτές οι τρεις βελτιώσεις μαζί μειώνουν και το αρχικό βάρος σελίδας και τον χρόνο παράδοσης των εικόνων, κάτι που συμβάλλει άμεσα σε πιο γρήγορο LCP και καλύτερες βαθμολογίες Core Web Vitals στο ταμπλό analytics.

Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τις επιλογές πακέτων στη σελίδα τιμών.

Συχνές ερωτήσεις