Το χαρακτηριστικό loading="lazy" λέει στο browser να αναβάλει τη φόρτωση μιας εικόνας ή iframe μέχρι να είναι έτοιμη να μπει στο viewport — εξοικονομώντας bandwidth και επιταχύνοντας το αρχικό load, χωρίς JavaScript.
html
Το χαρακτηριστικό loading="lazy" λέει στο browser να αναβάλει τη φόρτωση μιας εικόνας ή iframe μέχρι να είναι έτοιμη να μπει στο viewport — εξοικονομώντας bandwidth και επιταχύνοντας το αρχικό load, χωρίς JavaScript.
lazy — φόρτωση μόνο όταν το scrolling την πλησιάζει στο viewport.eager (προεπιλογή) — άμεση φόρτωση, ανεξάρτητα της θέσης.Το browser χρησιμοποιεί ένα περιθώριο (φορτώνει λίγο πριν το στοιχείο μπει στην προβολή) ώστε η εικόνα να είναι συνήθως έτοιμη όταν την δει ο χρήστης.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Χωρίς διαστάσεις (ή aspect-ratio), η εικόνα που φορτώνεται με lazy loading δεν έχει κρατημένο χώρο, οπότε όταν φορτωθεί η σελίδα πηδάει — βλάπτοντας το Cumulative Layout Shift (CLS). Πάντα κρατήστε χώρο.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Το lazy-loading της εικόνας Largest Contentful Paint στην πραγματικότητα βλάπτει την απόδοση — καθυστερεί το πιο σημαντικό pixel. Κάντε lazy-load μόνο το off-screen media.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Το native loading="lazy" αφαίρεσε την ανάγκη για αυτό στις περισσότερες περιπτώσεις (αν και το IntersectionObserver είναι ακόμα χρήσιμο για custom logic).
Το native lazy loading μειώνει τα αρχικά bytes και τα requests για μεγάλες σελίδες με πολλές εικόνες — ένα μεγάλο κέρδος για mobile — δωρεάν.
Οι λεπτομέρειες έχουν σημασία: κρατήστε διαστάσεις για να προστατεύσετε το CLS, και διατηρήστε το above-the-fold/LCP content eager (ακόμα και fetchpriority="high"), ώστε το σημαντικό περιεχόμενο να φορτώνεται ταχύ.