Sivun latausnopeus ei ole pelkästään kuvien pakkaamista ja välimuistitusta. Joskus kaikki sivuston <img>-tagit on jo lazy-loadattu loading="lazy"-määreellä, mutta PageSpeed Insights valittaa silti Elementor-osioiden taustakuvista. Tämä johtuu siitä, että CSS:n background-image ei tue lazy loadingia suoraan, vaan selain hakee tunnollisesti jokaisen taustakuvan tyylejä jäsentäessään, vaikka osio olisi kaukana ruudun alapuolella.

Tämä iskee erityisesti pitkiin laskeutumissivuihin: ensimmäinen ruutu voisi renderöityä 1,2 sekunnissa, mutta siihen meneekin 4 sekuntia, koska selain lataa 8 taustakuvaa alatunnisteesta, jonne käyttäjä ei rullaa vielä minuuttiin. Ratkaisu on olemassa, ja viime vuosien aikana on tullut vaihtoehtoja joka taitotasolle "rasti ruutuun" -ratkaisusta räätälöityyn JavaScriptiin.

💡 Pikaopas:

• Ota käyttöön sisäänrakennettu taustakuvien lazy loading Elementorin asetuksista.
• Määritä IntersectionObserver-rajapinta mukautetuille CSS-taustakuville ja vanhemmille liitännäisversioille.
• Käytä jQuerya ja data-attribuutteja sivustoilla, joilla tämä kehys on jo käytössä.

Sisäänrakennettu lazy loading Elementorissa

Versiosta 3.9 alkaen Elementor lisäsi kokeellisen Lazy Load Background Images -ominaisuuden, ja versioon 3.15+ mennessä se vakiintui ja on oletuksena käytössä uusissa asennuksissa. Konepellin alla se on sama IntersectionObserver-rajapinta kuin selaimen natiivit ratkaisut, mutta käärittynä kätevään kytkimeen.

Käyttöönotto: mene kohtaan Elementor → Settings → Features (tai Settings → Experiments venäjänkielisessä käyttöliittymässä), etsi rivi Lazy Load Background Images ja käännä kytkin Active-asentoon. Tallenna muutokset, niin kaikki Elementorin vakioliittymän kautta asetettujen osioiden, konttien ja sarakkeiden taustakuvat alkavat latautua vasta, kun käyttäjä rullaa niiden kohdalle.

Mitä tämä menetelmä EI kata: käsin Elementorin CSS-välilehden kautta kirjoitetut mukautetut taustat (selector { background-image: url(...); }) ja kolmannen osapuolen widget-liitännäisten kautta lisätyt taustat. Niihin käytä alla olevia menetelmiä.

Hyödyt: ei koodia, Elementor-tiimin ylläpitämä, automaattisesti yhteensopiva välimuistiliitännäisten kanssa. Haitat: vain Elementorin vakiotaustoille, vaatii version 3.9+.

Erikseen kannattaa mainita taustakuvien tiedostomuoto. Google PageSpeed Insights rankaisee JPEG-taustakuvista, kun WebP tai AVIF on saatavilla, ja tämä rankaisu on riippumaton siitä, millä menetelmällä lykkäsit latausta. Muunna kaikki taustakuvat WebP:ksi (laadun heikkeneminen on silmälle näkymätöntä, ja tiedostokoko on 25-35% pienempi kuin JPEG) tai AVIF:ksi (50% pienempi kuin JPEG, mutta vaatii fallback-<picture>-elementin Safari-selaimille, jotka ovat vanhempia kuin 16.0). Liitännäiset, kuten Converter for Media tai Imagify, tekevät tämän automaattisesti mediakirjastoon ladattaessa, mukaan lukien Elementorin käyttöliittymän kautta ladatut taustat.

IntersectionObserver: moderni JavaScript ilman jQuerya

Jos Elementor-versiosi on alle 3.9, tai taustat on asetettu mukautetulla CSS:llä, tai haluat yksinkertaisesti täyden hallinnan, IntersectionObserver-rajapinta ratkaisee tehtävän siististi ilman scroll-tapahtumien aiheuttamaa kuormaa.

Miksi ei scroll-käsittelijää? scroll-tapahtuma laukeaa kymmeniä kertoja sekunnissa ja suorittaa elementtien sijaintilaskelmia pääsäikeessä joka tikillä. Jopa throttle-tekniikalla tämä on havaittavissa heikoilla laitteilla. IntersectionObserver toimii asynkronisesti selaimen komposiittisäikeessä, se yksinkertaisesti raportoi, kun elementti on ylittänyt näkyvyyskynnyksen, ilman jatkuvia laskelmia.

Vaihe 1. Merkkaus ja CSS. Lisää CSS-luokka lazy-bg-section osioihin, jotka tarvitsevat lazy loadingin:

1
.lazy-bg-section {
2
  background-color: #f0f0f0; /* placeholder until background loads */
3
  background-repeat: no-repeat;
4
  background-position: center;
5
  background-size: cover;
6
}
7
 
8
.lazy-bg-section.loaded {
9
  background-color: transparent;
10
}

Taustaväri #f0f0f0 toimii visuaalisena paikkamerkkinä, osio ei näytä tyhjältä käyttäjän rullatessa. .loaded-luokka lisätään JavaScriptistä, kun osio tulee näkymään.

Vaihe 2. JavaScript, Observerin alustus. Sijoita koodi teemasi skriptitiedostoon tai liitännäisen, kuten Code Snippetsin, kautta:

1
document.addEventListener('DOMContentLoaded', () => {
2
  const sections = document.querySelectorAll('.lazy-bg-section');
3
 
4
  if (!sections.length || !('IntersectionObserver' in window)) return;
5
 
6
  const observer = new IntersectionObserver(
7
    (entries) => {
8
      entries.forEach((entry) => {
9
        if (entry.isIntersecting) {
10
          const bgUrl = entry.target.dataset.bg;
11
          if (bgUrl) {
12
            entry.target.style.backgroundImage = `url(${bgUrl})`;
13
          }
14
          entry.target.classList.add('loaded');
15
          observer.unobserve(entry.target);
16
        }
17
      });
18
    },
19
    { rootMargin: '200px 0px' }
20
  );
21
 
22
  sections.forEach((section) => observer.observe(section));
23
});

Keskeinen yksityiskohta: rootMargin: '200px 0px' tarkoittaa, että Observer laukeaa 200 pikseliä ennen kuin osio todella ilmestyy ruudulle. Käyttäjä ei näe lataushetkeä, kuva on jo paikallaan.

Vaihe 3. Merkkaus Elementorissa. Avaa haluttu osio → Advanced-välilehti → CSS Classes -kenttä, kirjoita lazy-bg-section. Samassa paikassa, Custom Attributes -kohdassa, lisää data-bg-attribuutti, jonka arvona on taustakuvan koko URL-osoite.

Tämä lähestymistapa toimii kaikissa moderneissa selaimissa (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), eli kaikkialla vuodesta 2016 lähtien. Internet Exploreriin tarvitset polyfillin, mutta tällaiset projektit ovat nykyään harvinaisia.

JQuery ja data-attribuutit: klassinen lähestymistapa

Todella vanhoilla sivustoilla, joilla jQuery on jo ladattu jokaisella sivulla eikä pinon uudelleenkirjoitus ole vaihtoehto, data-attribuutteihin ja scroll-käsittelijään perustuva menetelmä toimii. Se on vähemmän suorituskykyinen kuin IntersectionObserver, mutta vuosien varrella hyväksi havaittu eikä vaadi moderneja selainrajapintoja.

Vaihe 1. Osion luokka. Elementorin osion asetuksissa, Advanced-välilehti → CSS Classes, määritä lazy-background:

Vaihe 2. CSS-tyylit taustalle. Jotta taustakuva asettuu oikein koko osion alueelle latauksen jälkeen, aseta tyylit. Elementorissa tämä tehdään kyseisen osion Advanced → Custom CSS -välilehden kautta:

Perustyylit koko ruudun taustalle:

1
#OO2 .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: center;
4
  background-size: cover;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: -1;
11
  background-attachment: fixed;
12
}

Huomaa valitsin #OO2, tämä on osion CSS-tunniste, jonka asetat samalla Advanced → CSS ID -välilehdellä. Jokaiselle osiolle, jolla on oma taustansa, tunnisteen on oltava yksilöllinen, jotta tyylit eivät mene päällekkäin.

Vaihtoehto pienille kuville (ei koko osion tausta). Jos osioon on tarkoitus sijoittaa pieni kuva koko ruudun taustan sijaan, esimerkiksi logo tai koriste-elementti alatunnisteeseen, säädä tyylit tietylle koolle ja sijainnille:

1
section#SDStudio-Footer .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: right bottom;
4
  background-size: 350px;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: 0;
11
  background-attachment: fixed;
12
}
13
 
14
section#SDStudio-Footer .elementor-column.elementor-col-25,
15
.elementor-column[data-col="25"] {
16
  width: 25%;
17
  z-index: 2;
18
}

Tässä tausta on sijoitettu alatunnisteosion oikeaan alakulmaan kiinteällä 350px leveydellä, ja sarakkeille on annettu z-index: 2, jotta sisältö ei peity taustakerroksen alle.

Vaihe 3. Responsiiviset kuvat. Jotta vältät 2 megatavun kuvan lataamisen 400px leveälle mobiiliruudulle, valmistele 6 kuvavarianttia eri resoluutioille:

Vaihe 4. Data-attribuutit. Lataa kuvat WordPressin mediakirjastoon ja määritä polut niihin osion data-attribuuteissa. Elementorissa: Advanced → Custom Attributes:

Kunkin attribuutin muoto:

1
data-bg-min-1701 | /wp-content/uploads/2020/03/Background-min-width-1701px.jpg
2
data-bg-max-1700 | /wp-content/uploads/2020/03/Background-max-width-1700px.jpg
3
data-bg-max-1200 | /wp-content/uploads/2020/03/Background-max-width-1200px.jpg
4
data-bg-max-1024 | /wp-content/uploads/2020/03/Background-max-width-1024px.jpg
5
data-bg-max-768  | /wp-content/uploads/2020/03/Background-max-width-768px.jpg
6
data-bg-max-400  | /wp-content/uploads/2020/03/Background-max-width-400px.jpg

Skripti (katso alla) lukee nämä attribuutit, määrittää nykyisen ruudun leveyden window.matchMedia-metodilla ja lisää tarvittavan kokoisen kuvan URL-osoitteen.

Vaihe 5. jQuery-skripti. Lisää koodi teemasi skriptitiedostoon tai liitännäisen kautta:

1
jQuery(document).ready(function ($) {
2
  var $window = $(window),
3
    lazyBgArr = [];
4
 
5
  $window.on('load resize scroll', function () {
6
    for (var i = 0; i < lazyBgArr.length; i++) {
7
      var func = lazyBgArr[i];
8
      if (func !== undefined) {
9
        func();
10
      }
11
    }
12
  });
13
 
14
  function lazyBg(strEl, intPos) {
15
    return function () {
16
      var intCheckVal = $window.scrollTop() + $window.height() + 100;
17
      if (intCheckVal > strEl.offset().top) {
18
        var data_bg;
19
 
20
        if (window.matchMedia('(min-width: 1701px)').matches) {
21
          data_bg = 'data-bg-min-1701';
22
        } else if (
23
          window.matchMedia('(min-width: 1201px) and (max-width: 1700px)').matches
24
        ) {
25
          data_bg = 'data-bg-max-1700';
26
        } else if (
27
          window.matchMedia('(min-width: 1025px) and (max-width: 1200px)').matches
28
        ) {
29
          data_bg = 'data-bg-max-1200';
30
        } else if (
31
          window.matchMedia('(min-width: 769px) and (max-width: 1024px)').matches
32
        ) {
33
          data_bg = 'data-bg-max-1024';
34
        } else if (
35
          window.matchMedia('(min-width: 401px) and (max-width: 768px)').matches
36
        ) {
37
          data_bg = 'data-bg-max-768';
38
        } else if (window.matchMedia('(max-width: 400px)').matches) {
39
          data_bg = 'data-bg-max-400';
40
        }
41
 
42
        if (!data_bg) return;
43
 
44
        var tmpImg = new Image(),
45
          strSrc = strEl.attr(data_bg);
46
        tmpImg.src = strSrc;
47
        delete lazyBgArr[intPos];
48
 
49
        $(tmpImg).on('load', function () {
50
          strEl.append('<div class="lazy-bg"></div>').css('opacity', 1);
51
          strEl.addClass('loaded');
52
        });
53
      }
54
    };
55
  }
56
 
57
  $('.lazy-background').each(function (i) {
58
    lazyBgArr.push(lazyBg($(this), i));
59
  });
60
});

Miten se toimii: sivun latauksessa ja jokaisessa scroll-tapahtumassa skripti tarkistaa jokaisen .lazy-background-luokan omaavan osion sijainnin. Jos osio tulee "ruutu + 100px puskuri" -vyöhykkeelle, nykyinen näkymän leveys määritetään matchMedia-metodilla, tarvittava data-attribuutti valitaan, väliaikainen Image-objekti luodaan esilatausta varten, ja onnistuneen latauksen jälkeen osioon lisätään <div class="lazy-bg"> taustakuvan kanssa. Käsitelty osio poistetaan seurantataulukosta, toistuvia latauksia ei tapahdu.

Minkä menetelmän valitsen: vertailu

Käytännön valintakriteeri on yksinkertainen: jos Elementorisi on versio 3.9 tai uudempi ja taustat on asetettu vakiotavalla, ota sisäänrakennettu ominaisuus käyttöön ja asia on loppuun käsitelty. Jos taustat ovat mukautettuja (CSS-välilehti, kolmannen osapuolen widgetit), käytä IntersectionObserveria vanilla JavaScriptillä, ilman jQuerya. Jätä jQuery-menetelmä projekteihin, joissa jQuery on jo läsnä eikä uudelleenkirjoitukseen ole budjettia, tai joissa tarvitaan Internet Explorer -tukea.

Valitusta menetelmästä riippumatta taustakuva pysyy fyysisesti samana tiedostona palvelimella. Jos se painaa 800 kilotavua, lazy loading ei tee siitä kevyempää, se vain lykkää hetkeä, jolloin selain alkaa ladata niitä 800 kilotavua. Siksi sääntö "optimoi ensin, lazy loadaa toiseksi" pätee tässäkin: pakkaa ensin WebP:ksi tai AVIF:ksi ja muuta koko kohdeyleisön suurimman ruudun leveyden mukaiseksi, ja vasta sitten käytä mitä tahansa kolmesta lazy loading -menetelmästä. Välimuistiliitännäiset (WP Rocket, LiteSpeed Cache, Flying Press) eivät ole ristiriidassa minkään kolmen lähestymistavan kanssa, koska CSS:n background-image-ominaisuuden kautta ladattu tausta tallentuu selaimen välimuistiin samalla tavalla kuin tavallinen <img>.

⁉️🤔 Usein kysytyt kysymykset

Miksei vain käyttäisi loading="lazy"-määrettä taustakuville?

loading="lazy"-määre toimii vain <img>- ja <iframe>-tageissa, mutta ei CSS:n background-image-ominaisuuden kanssa. Selain ei tiedä, että CSS:si sisältää kuva-URL:n, jota voisi lykätä, ennen kuin se jäsentää tyylitiedoston, ja siinä vaiheessa pyyntö on jo lähtenyt verkkoon. Juuri siksi taustat tarvitsevat erillisen mekanismin.

Mikä menetelmä kannattaa valita, jos sivusto on 3 vuotta vanha ja Elementor on versio 3.12?

Elementorin sisäänrakennettu lazy loading. Versio 3.12 sisältää tämän ominaisuuden jo vakaana, mene vain kohtaan Settings, Features ja ota se käyttöön. Koodia ei tarvitse kirjoittaa.

Hidastaako jQuery-menetelmä merkittävästi mobiilissa?

Edullisilla Android-laitteilla vuosilta 2019-2020, huomattavasti. scroll-tapahtuma yhdistettynä offset().top-metodiin kuormittaa pääsäiettä jokaisella rullauksen ruudulla. Jos sivuston yleisö on pääasiassa mobiilikäyttäjiä, vaihda IntersectionObserveriin tai päivitä Elementor versioon 3.9+ ja ota sisäänrakennettu ominaisuus käyttöön.

Voiko lähestymistapoja yhdistää yhdellä sivustolla?

Kyllä, ja se on normaali käytäntö. Suurin osa Elementorin vakioliittymän kautta määritetyistä taustaosioista hoidetaan sisäänrakennetulla lazy loadingilla. Loput mukautetut osiot, joissa on manuaalinen CSS, liität IntersectionObserveriin. Ristiriitaa ei ole: Observer laukeaa vain elementeissä, joilla on määritetty luokka, ja Elementorin sisäänrakennettu mekanismi jättää ne huomiotta.

Onko pakko valmistella 6 kuvakokoa, vai riittääkö yksi?

Kuusi kokoa on maksimi merkitykselliselle yksityiskohtaisuudelle. Käytännössä useimmille sivustoille kolme riittää: 1920px työpöydälle, 1024px tabletille ja 768px mobiilille. Neljä taitekohtaa, lisäten 400px pienille ruuduille, on jo hyvä tasapaino laadun ja vaivan välillä. Yksi kuva kaikille resoluutioille toimii, mutta lataa ylimääräisiä kilotavuja mobiilissa, Google PageSpeed Insights huomaa tämän.

Kannattaako mukautetun koodin kanssa nähdä vaivaa vuonna 2026?

Jos sinulla on Elementor 3.9 tai uudempi, lähes varmasti ei. Sisäänrakennettu ominaisuus kattaa valtaosan sivustojen tarpeet: ota se käyttöön, tarkista PageSpeed Insightsissa, unohda koko asia. Mukautetut menetelmät (IntersectionObserver ja erityisesti jQuery) ovat perusteltuja tasan kahdessa tapauksessa: Elementor-versio on jäädytetty alle 3.9:ään pätevästä syystä, tai taustat on lisätty epästandardilla tavalla eikä vakiokytkin näe niitä.

Uudessa projektissa tuoreella Elementorilla oikea toimintajärjestys on: ota sisäänrakennettu lazy loading käyttöön, aja sivusto PageSpeed Insightsin läpi, ja vain jos tietyt taustakuvat yhä merkitään ongelmallisiksi, käsittele ne yksitellen IntersectionObserverilla. Älä kirjoita mukautettua koodia etukäteen "varmuuden vuoksi", jokainen ylimääräinen JavaScript-rivi, jonka voit välttää kirjoittamasta, säästää ylläpitoaikaasi.