Lazy Loading -tekniikka: Kattava opas

24.6.2024 | Artikkeleita, Drupal, IT, Joomla!, JSON, Koodaus, Nettisivut, Ohjelmointi, Tietoturva, Verkkokauppa, Verkkokehitys, Verkkosivut, Woocommerce, WordPress, WordPress-ylläpito

Lazy Loading

Lazy LoadingLazy 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

  1. Parannettu latausnopeus: Vähentää aloituslatauksen kokoa, mikä nopeuttaa sivun latautumista.
  2. Parempi käyttäjäkokemus: Käyttäjät näkevät sisällön nopeammin, mikä parantaa käyttökokemusta.
  3. Vähemmän kaistanleveyden Kulutusta: Vain näkyvät resurssit ladataan, mikä säästää kaistanleveyttä erityisesti mobiilikäyttäjille.
  4. 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:

  1. 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');

  1. 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);
}
});

  1. Muokkaa kuvien HTML-koodia lisäämällä class="lazy" ja data-src -attribuutit:

<img ”lazy” ”path/to/image.jpg” alt Lazy loaded image” >

Parhaat käytännöt

  1. Testaa Lazy Loadingin vaikutukset: Varmista, että lazy loading parantaa sivuston suorituskykyä testaamalla eri työkaluilla, kuten Google PageSpeed Insights tai GTmetrix.
  2. Käytä fallbackeja: Käytä fallback-ratkaisuja, jos käyttäjien selaimet eivät tue Intersection Observer APIa.
  3. 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.
  4. 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ä.

Samankaltaisia artikkeleita

WordPressin joustavuus

WordPressin joustavuus

WordPress on säilyttänyt asemansa maailman suosituimpana sisällönhallintajärjestelmänä jo yli 20 vuoden ajan. Yritykset eri toimialoilt...

20.11.2025
WordPressin kehityssuunta

WordPressin kehityssuunta

WordPress on ollut verkkokehityksen kulmakivi jo vuosikymmeniä, ja sen rooli on muuttunut dramaattisesti ajan myötä. Alun perin blogi...

20.11.2025
WordPressin ekosysteemi vuonna 2026

WordPressin ekosysteemi vuonna 2026

WordPress on laaja ja kehittyvä ekosysteemi, joka kattaa verkkosivujen, verkkokauppojen, sovellusten, integraatioiden ja tekoälypohjai...

20.11.2025
Verkkokauppa WordPressillä

Verkkokauppa WordPressillä

Tässä oppaassa käymme läpi vaiheet, työkalut ja parhaat käytännöt, jotta voit luoda toimivan ja optimoidun verkkokaupan.

20.11.2025