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

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

Θα εξερευνήσετε την έννοια της τεμπέλης φόρτωσης εικόνων και θα μάθετε πώς να την εφαρμόσετε χρησιμοποιώντας HTML και JavaScript με το Intersection Observer API.

Τι είναι το Lazy Loading;

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

Γιατί να χρησιμοποιήσετε Lazy Loading;

instagram viewer

Υπάρχουν αρκετοί επιτακτικοί λόγοι για να χρησιμοποιήσετε την αργή φόρτωση εικόνων στον ιστότοπό σας, όπως:

  • Ταχύτερη αρχική φόρτωση σελίδας: Η αργή φόρτωση εμποδίζει τη φόρτωση όλων των εικόνων ταυτόχρονα, μειώνοντας τον αρχικό χρόνο φόρτωσης της σελίδας. Οι χρήστες μπορούν να αρχίσουν να αλληλεπιδρούν με τον ιστότοπό σας νωρίτερα, οδηγώντας σε καλύτερη εμπειρία χρήστη.
  • Βελτιωμένη ανταπόκριση σελίδας: Με τη φόρτωση εικόνων καθώς οι χρήστες κάνουν κύλιση, ο ιστότοπος παραμένει ανταποκρινόμενος και ρευστός, εξασφαλίζοντας ομαλή κύλιση και πλοήγηση χωρίς να χρειάζεται να περιμένετε να φορτώσει όλο το περιεχόμενο.
  • Εξοικονόμηση εύρους ζώνης: Η αργή φόρτωση εξοικονομεί εύρος ζώνης, καθιστώντας την ιδανική για χρήστες κινητών και για όσους έχουν αργές συνδέσεις στο Διαδίκτυο. Αυτό μπορεί μειώστε την κατανάλωση δεδομένων του ιστότοπού σας, προς όφελος των χρηστών.
  • Οφέλη SEO: Μηχανές αναζήτησης όπως η Google θεωρήστε την ταχύτητα σελίδας ως παράγοντα κατάταξης. Τεμπέλης φόρτωση μπορεί επηρεάζουν θετικά την απόδοση SEO του ιστότοπού σας βελτιώνοντας τον χρόνο φόρτωσης.

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

Εφαρμογή Lazy Loading: Η σήμανση HTML

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

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

ο φόρτωση Το χαρακτηριστικό χρησιμοποιείται σε HTML για τον έλεγχο της συμπεριφοράς φόρτωσης των στοιχείων σε μια ιστοσελίδα. Όταν ρυθμίσετε φόρτωση = "τεμπέλης" πάνω σε ετικέτα, λέει στο πρόγραμμα περιήγησης να αναβάλει τη φόρτωση του πόρου μέχρι να τον χρειαστεί.

Αυτή τη στιγμή, η σελίδα μοιάζει με αυτό:

Εφαρμογή Lazy Loading: Η υλοποίηση JavaScript

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

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

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



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Εδώ, η κύρια πηγή εικόνας είναι η έκδοση χαμηλής ποιότητας και η εικόνα υψηλής ποιότητας είναι η δευτερεύουσα πηγή. Τότε η σελίδα μοιάζει με αυτό:

Στη συνέχεια, επιλέξτε όλες τις εικόνες που θέλετε να φορτώσετε lazy:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Μετά από αυτό, δημιουργήστε ένα IntersectionObserver αντικείμενο.

const observer = new IntersectionObserver();

Στη συνέχεια περάστε τις εγγραφές (ένας πίνακας από IntersectionObserverEntry αντικείμενα, που αντιπροσωπεύουν τα στοιχεία που παρατηρούνται και την τομή τους με το παράθυρο προβολής) και τον παρατηρητή (το IntersectionObserver η ίδια η περίπτωση).

const observer = new IntersectionObserver((lazyImages, observer) => { });

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

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Τέλος, αρχικοποιήστε την παρατήρηση για κάθε στοιχείο.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Και με αυτό, έχετε εφαρμόσει τεμπέλης φόρτωση με JavaScript.

Θέματα Lazy Loading

Κατά την ενσωμάτωση lazy loading, είναι ζωτικής σημασίας να ληφθούν υπόψη οι ακόλουθες πτυχές:

  • Προσιτότητα: Για να διασφαλίσετε την προσβασιμότητα, παρέχετε εναλλακτικό κείμενο για εικόνες με το alt Χαρακτηριστικό. Αυτές οι πληροφορίες χρησιμεύουν ως σημείο εμπιστοσύνης για τους αναγνώστες οθόνης.
  • Συμβατότητα προγράμματος περιήγησης: Πριν από την εφαρμογή του lazy loading, επιβεβαιώστε τη συμβατότητά του με διαφορετικά προγράμματα περιήγησης. Δεν επεκτείνουν όλα τα προγράμματα περιήγησης την υποστήριξη αυτής της δυνατότητας. Σε ορισμένες περιπτώσεις, η συμπερίληψη ενός πολυγεμίσματος μπορεί να καταστεί επιτακτική, ειδικά για παλαιότερα προγράμματα περιήγησης. Ένα εργαλείο σαν Μπορώ να χρησιμοποιήσω είναι ένας πολύτιμος πόρος για την αξιολόγηση της συμβατότητας του προγράμματος περιήγησης.
  • Δοκιμές: Η ολοκληρωμένη δοκιμή της εφαρμογής lazy loading σε ένα φάσμα συσκευών και διαστάσεων οθόνης αποκτά ύψιστη σημασία.

Βελτίωση της ταχύτητας του ιστότοπου και της εμπειρίας χρήστη

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

Επιπλέον, θα απολαύσετε καλύτερο SEO και θα εξοικονομήσετε εύρος ζώνης. Λοιπόν, γιατί να περιμένετε; Ξεκινήστε τη βελτιστοποίηση του ιστότοπού σας σήμερα με αυτήν την απλή αλλά ισχυρή μέθοδο.