Lazy Loading on tekniikka, joka parantaa verkkosivuston suorituskykyä ja käyttäjäkokemusta lataamalla sisältöä vasta, kun se tulee näkyviin käyttäjän selaimess
Lazy Loading vähentää alkuperäisen sivulatauksen kokoa ja nopeuttaa sivun renderöitymistä. Tässä artikkelissa käsitellään Lazy Loadingin perusteet, edut, käytännön toteutukset ja parhaat käytännöt.
Mitä Lazy Loading on?
Lazy Loading on optimoiva tekniikka, joka lataa kuvia, videoita ja muita elementtejä vasta, kun ne tulevat näkyviin selainikkunassa. Sen vastakohta on ”eager loading,” jossa kaikki sivun resurssit ladataan heti sivun latautuessa.
Lazy Loadingin edut
- Parannettu latausnopeus: Vähentää aloituslatauksen kokoa, mikä nopeuttaa sivun latautumista.
- Parempi käyttäjäkokemus: Käyttäjät näkevät sisällön nopeammin, mikä parantaa käyttökokemusta.
- Vähemmän kaistanleveyden Kulutusta: Vain näkyvät resurssit ladataan, mikä säästää kaistanleveyttä erityisesti mobiilikäyttäjille.
- SEO-edut: Parempi latausnopeus voi parantaa sivuston hakukonenäkyvyyttä, koska Google arvostaa nopeita sivustoja.
Lazy Loading -työkalut
1. JavaScript-kirjastot
- Lozad.js: Erittäin kevyt (alle 1KB) lazy loading -kirjasto ilman riippuvuuksia.
- Lazysizes: Täysimittainen lazy loading -kirjasto, joka tukee myös responsive images -ominaisuutta.
- Vanilla-lazyload: Kevyt ja riippuvuuksista vapaa lazy loading -kirjasto.
2. Native Lazy Loading
HTML5
myötä monissa moderneissa selaimissa on natiivi lazy loading -tuki. Tämä voidaan ottaa käyttöön lisäämällä loading="lazy" -attribuutti kuva- tai iframe-elementteihin.
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">
Lazy Loadingin Implementointi
1. JavaScriptin käyttö
Jos haluat käyttää JavaScriptiä lazy loadingin toteuttamiseen, voit hyödyntää esimerkiksi Intersection Observer APIa:
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
let lazyLoadThrottleTimeout;
function lazyLoad() {
if(lazyLoadThrottleTimeout) {
clearTimeout(lazyLoadThrottleTimeout);
}
lazyLoadThrottleTimeout = setTimeout(function() {
let scrollTop = window.pageYOffset;
lazyImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyImages.length == 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationChange", lazyLoad);
}
}, 20);
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationChange", lazyLoad);
}
});
HTML-tiedostossa kuville lisätään class="lazy" ja data-src -attribuutit:
<img class="lazy" data-src="path/to/image.jpg" alt="Lazy loaded image">
2. WordPressissä Lazy Loading
WordPressissä lazy loading on helppo toteuttaa käyttäen lisäosia tai manuaalisesti lisäämällä koodia.
Lisäosien käyttö
Suosittuja lazy loading -lisäosia WordPressille ovat:
- a3 Lazy Load: Tukee kuvien, videoiden ja iframe-elementtien lazy loadingia.
- Lazy Load by WP Rocket: Tehokas ja kevyt lisäosa, joka tukee myös iframe- ja video-elementtejä.
- Smush: Kuvien optimointiin keskittyvä lisäosa, joka sisältää myös lazy loading -ominaisuuden.
Manuaalinen toteutus
Voit lisätä lazy loading -ominaisuuden myös manuaalisesti teemasi functions.php-tiedostoon tai käyttämällä omaa laajennustasi.
Esimerkki manuaalisesta toteutuksesta:
- Lisää JavaScript-tiedosto teemasi js-kansioon ja liitä se functions.php-tiedostoon.
function enqueue_lazy_load_script() {
wp_enqueue_script('lazyload', get_template_directory_uri() . '/js/lazyload.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_lazy_load_script');
- Lisää lazy load -toiminto JavaScript-tiedostoon (esimerkiksi lazyload.js).
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
let lazyLoadThrottleTimeout;
function lazyLoad() {
if(lazyLoadThrottleTimeout) {
clearTimeout(lazyLoadThrottleTimeout);
}
lazyLoadThrottleTimeout = setTimeout(function() {
let scrollTop = window.pageYOffset;
lazyImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyImages.length == 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationChange", lazyLoad);
}
}, 20);
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationChange", lazyLoad);
}
});
- Muokkaa kuvien HTML-koodia lisäämällä
class="lazy"jadata-src-attribuutit:
<img ”lazy” ”path/to/image.jpg” alt Lazy loaded image” >
Parhaat käytännöt
- Testaa Lazy Loadingin vaikutukset: Varmista, että lazy loading parantaa sivuston suorituskykyä testaamalla eri työkaluilla, kuten Google PageSpeed Insights tai GTmetrix.
- Käytä fallbackeja: Käytä fallback-ratkaisuja, jos käyttäjien selaimet eivät tue Intersection Observer APIa.
- Varmista SEO: Varmista, että lazy loading ei haittaa hakukoneiden kykyä indeksoida sisältöäsi. Googlen hakubotit tukevat nykyään lazy loadingia, mutta testaus on silti suositeltavaa.
- Optimoi kuvat: Käytä kuvien optimointia yhdessä lazy loadingin kanssa parhaan suorituskyvyn saavuttamiseksi.
Lazy Loading on tehokas tekniikka verkkosivuston suorituskyvyn ja käyttäjäkokemuksen parantamiseen. Käyttämällä oikeita työkaluja ja noudattamalla parhaita käytäntöjä voit varmistaa, että sivustosi latautuu nopeasti ja tehokkaasti kaikilla laitteilla ja yhteyksillä.
