Lehe laadimiskiirus ei seisne ainult piltide tihendamises ja vahemällu salvestamises. Mõnikord on kõik saidi <img> sildid juba laisalt laaditud atribuudiga loading="lazy", kuid PageSpeed Insights kurdab endiselt Elementori sektsioonide taustapiltide üle. Põhjus on selles, et CSS-i background-image ei toeta laiska laadimist kohe karbist välja võttes, brauser laadib ustavalt alla kõik taustapildid stiilide parsimisel, isegi kui sektsioon asub kaugel allpool esmapilti.

See mõjutab eriti pikki maandumislehti: esimene ekraan võib renderduda 1,2 sekundiga, kuid selleks kulub 4 sekundit, sest brauser laadib alla 8 taustapilti jalusest, kuhu kasutaja järgmise minuti jooksul ei keri. Lahendus on olemas ja viimase paari aasta jooksul on tekkinud võimalusi igale oskustasemele, alates „linnukese märkimisest" kuni kohandatud JavaScriptini.

💡 Kiire ülevaade:

• Luba sisseehitatud taustapiltide laisk laadimine Elementori seadetes.
• Seadista IntersectionObserver API kohandatud CSS-i taustade ja vanemate pluginaversioonide jaoks.
• Rakenda jQuery koos data-atribuutidega saitidel, kus see raamistik on juba kasutusel.

Sisseehitatud laisk laadimine Elementoris

Alates versioonist 3.9 lisas Elementor eksperimentaalse funktsiooni Lazy Load Background Images ja versiooniks 3.15+ muutus see stabiilseks ning uutel paigaldustel vaikimisi lubatuks. Kapoti all on see sama IntersectionObserver API nagu brauseri omalaadsed lahendused, kuid pakendatud mugavaks lülitiks.

Kuidas lubada: minge Elementor → Settings → Features (või venekeelses liideses Settings → Experiments), leidke rida Lazy Load Background Images ja lülitage see aktiivseks. Salvestage muudatused ja kõik standardse Elementori liidese kaudu määratud sektsioonide, konteinerite ja veergude taustapildid hakkavad laadima alles siis, kui kasutaja nendeni kerib.

Mida see meetod EI hõlma: käsitsi Elementori CSS-i vahelehe kaudu kirjutatud kohandatud taustu (selector { background-image: url(...); }) ja kolmandate osapoolte vidinapluginatega lisatud taustu. Nende jaoks kasutage allolevaid meetodeid.

Plussid: null koodi, Elementori meeskonna poolt hooldatud, automaatselt ühilduv vahemällu salvestamise pluginatega. Miinused: ainult standardsete Elementori taustade jaoks, nõuab versiooni 3.9+.

Eraldi tasub mainida taustapildi formaati. Google PageSpeed Insights karistab JPEG-taustu, kui saadaval on WebP või AVIF, ja see karistus ei sõltu sellest, millist meetodit laadimise edasilükkamiseks kasutasite. Teisendage kõik taustapildid WebP-vormingusse (kvaliteedikadu on silmale märkamatu ja failimaht on 25-35% väiksem kui JPEG-l) või AVIF-i (50% väiksem kui JPEG, kuid nõuab varu <picture> Safari puhul, mis on vanem kui 16.0). Pluginad nagu Converter for Media või Imagify teevad seda automaatselt meediateeki üleslaadimisel, sealhulgas Elementori liidese kaudu üles laaditud taustade puhul.

IntersectionObserver: kaasaegne JavaScript ilma jQueryta

Kui teie Elementori versioon on alla 3.9 või taustad on määratud kohandatud CSS-iga või soovite lihtsalt täielikku kontrolli, lahendab IntersectionObserver API ülesande puhtalt, ilma kerimissündmuste ülekoormuseta.

Miks mitte scroll töötleja? scroll sündmus käivitub kümneid kordi sekundis ja teostab elementide asukohaarvutusi põhilõimes igal tikil. Isegi throttle'iga on see nõrkadel seadmetel märgatav. IntersectionObserver töötab asünkroonselt brauseri komposiitorlõimes, see lihtsalt teatab, kui element on ületanud nähtavuse läve, ilma pidevate arvutusteta.

1. samm. Märgendus ja CSS. Lisage CSS-klass lazy-bg-section sektsioonidele, mis vajavad laiska laadimist:

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ärv #f0f0f0 toimib visuaalse kohatäitjana, sektsioon ei tundu tühi, kuni kasutaja kerib. Klass .loaded lisatakse JavaScriptist, kui sektsioon siseneb vaatevälja.

2. samm. JavaScript, Observeri initsialiseerimine. Paigutage kood oma teema skriptifaili või plugina (nt Code Snippets) kaudu:

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

Oluline detail: rootMargin: '200px 0px' tähendab, et Observer käivitub 200 pikslit enne, kui sektsioon tegelikult ekraanile ilmub. Kasutaja ei näe laadimishetke, pilt on juba paigas.

3. samm. Märgendus Elementoris. Avage vajalik sektsioon → Advanced vaheleht → CSS Classes väli, sisestage lazy-bg-section. Samas kohas, väljal Custom Attributes, lisage data-bg atribuut väärtusega, mis on taustapildi täielik URL.

See lähenemine töötab igas kaasaegses brauseris (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), see tähendab kõikjal alates 2016. aastast. Internet Exploreri jaoks vajate polüfili, kuid sellised projektid on nüüd haruldased.

JQuery ja data-atribuudid: klassikaline lähenemine

Väga vanadel saitidel, kus jQuery on juba igal lehel laaditud ja virna ümberkirjutamine ei ole võimalik, töötab meetod data-atribuutide ja kerimistöötlejaga. See on vähem jõudluslik kui IntersectionObserver, kuid aastate jooksul tõestatud ega nõua kaasaegseid brauseri API-sid.

1. samm. Sektsiooni klass. Elementori sektsiooni seadetes, Advanced vaheleht → CSS Classes, määrake lazy-background:

2. samm. CSS-stiilid tausta jaoks. Et taustapilt pärast laadimist korrektselt üle kogu sektsiooni veniks, määrake stiilid. Elementoris tehakse seda konkreetse sektsiooni Advanced → Custom CSS vahelehe kaudu:

Täisekraani tausta põhistiilid:

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
}

Pange tähele selektorit #OO2, see on sektsiooni CSS-identifikaator, mille määrate samal Advanced → CSS ID vahelehel. Iga oma taustaga sektsiooni puhul peab identifikaator olema unikaalne, et stiilid ei kattuks.

Valik väikeste piltide jaoks (mitte täissektsioon). Kui teil on vaja paigutada sektsiooni väike pilt, mitte täisekraani taust, näiteks logo või dekoratiivne element jaluses, kohandage stiile konkreetse suuruse ja asukoha jaoks:

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
}

Siin on taust paigutatud jaluse sektsiooni paremasse alumisse nurka fikseeritud laiusega 350px ja veergudele on antud z-index: 2, et sisu ei oleks taustakihiga kaetud.

3. samm. Responsiivsed pildid. Vältimaks 2-megabaidise pildi laadimist 400px laiusel mobiiliekraanil, valmistage ette 6 pildivarianti erinevate resolutsioonide jaoks:

4. samm. Data-atribuudid. Laadige pildid üles WordPressi meediateeki ja määrake nende teed sektsiooni data-atribuutides. Elementoris: Advanced → Custom Attributes:

Iga atribuudi formaat:

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

Skript (vt allpool) loeb neid atribuute, määrab praeguse ekraani laiuse window.matchMedia abil ja sisestab vajaliku suurusega pildi URL-i.

5. samm. jQuery skript. Lisage kood oma teema skriptifaili või plugina kaudu:

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

Kuidas see töötab: lehe laadimisel ja igal kerimissündmusel kontrollib skript iga .lazy-background klassiga sektsiooni asukohta. Kui sektsioon siseneb tsooni „ekraan + 100px puhver", määratakse praegune vaateava laius matchMedia abil, valitakse vajalik data-atribuut, luuakse eellaadimiseks ajutine Image objekt ja pärast edukat laadimist lisatakse sektsioonile <div class="lazy-bg"> koos taustapildiga. Töödeldud sektsioon eemaldatakse jälgimismassiivist, korduvaid laadimisi ei toimu.

Millist meetodit valida: võrdlus

Praktiline valikukriteerium on lihtne: kui teie Elementor on versioon 3.9 või uuem ja taustad on määratud standardsel viisil, lubage sisseehitatud funktsioon ja unustage probleem. Kui taustad on kohandatud (CSS-i vaheleht, kolmandate osapoolte vidinad), kasutage IntersectionObserverit puhtas JavaScriptis, ilma jQueryta. Jätke jQuery meetod projektidele, kus jQuery on juba olemas ja ümberkirjutamiseks pole eelarvet või kus on vaja Internet Exploreri tuge.

Sõltumata valitud meetodist jääb taustapilt füüsiliselt samaks failiks serveris. Kui see kaalub 800 kilobaiti, ei muuda laisk laadimine seda kergemaks, see lihtsalt lükkab edasi hetke, mil brauser hakkab neid 800 kilobaiti alla laadima. Seetõttu kehtib ka siin reegel „kõigepealt optimeeri, seejärel laadi laisalt": esmalt tihendage WebP-ks või AVIF-iks ja muutke suurus sihtrühma maksimaalsele ekraanilaiusele vastavaks ning alles seejärel rakendage ükskõik millist kolmest laisa laadimise meetodist. Vahemällu salvestamise pluginad (WP Rocket, LiteSpeed Cache, Flying Press) ei ole vastuolus ühegi kolmest lähenemisest, kuna CSS-i background-image kaudu laaditud tausta salvestab brauser vahemällu samamoodi nagu tavalist <img>-i.

⁉️🤔 Korduma kippuvad küsimused

Miks mitte lihtsalt kasutada loading="lazy" taustapiltide jaoks?

Atribuut loading="lazy" töötab ainult <img> ja <iframe> siltidega, kuid mitte CSS-i background-image omadusega. Brauser ei tea, et teie CSS sisaldab pildi URL-i, mida saaks edasi lükata, enne kui ta stiililehe parsimise lõpetab, ja selleks hetkeks on päring juba võrku läinud. Just seepärast vajavad taustad eraldi mehhanismi.

Millise meetodi peaksin valima, kui sait on 3 aastat vana ja Elementor on versioon 3.12?

Elementori sisseehitatud laisk laadimine. Versioon 3.12 sisaldab seda funktsiooni juba stabiilses staatuses, minge lihtsalt Settings, Features ja lubage see. Koodi kirjutamist pole vaja.

Kas jQuery meetod aeglustab oluliselt mobiilseadmetes?

Odavatel 2019-2020 aasta Android-seadmetel on see märgatav. scroll sündmus koos offset().top-iga koormab põhilõime igal kerimiskaadril. Kui saidi publik on valdavalt mobiilne, minge üle IntersectionObserverile või uuendage Elementor versioonile 3.9+ ja lubage sisseehitatud funktsioon.

Kas ma saan ühel saidil lähenemisi kombineerida?

Jah, ja see on normaalne praktika. Enamikku standardse Elementori liidese kaudu seadistatud taustasektsioone käsitleb sisseehitatud laisk laadimine. Ülejäänud kohandatud sektsioonid käsitsi CSS-iga ühendate IntersectionObserveri külge. Konflikti ei ole: Observer käivitub ainult määratud klassiga elementidel ja Elementori sisseehitatud mehhanism ignoreerib neid.

Kas on kohustuslik valmistada ette 6 pildisuurust või piisab ühest?

Kuus suurust on maksimum sisuka detailsuse jaoks. Praktikas piisab enamiku saitide jaoks kolmest: 1920px lauaarvutile, 1024px tahvlile ja 768px mobiilile. Neli murdepunkti, lisades 400px väikestele ekraanidele, on juba hea tasakaal kvaliteedi ja pingutuse vahel. Üks pilt kõikide resolutsioonide jaoks töötab, kuid laadib mobiilis üleliigseid kilobaitte, Google PageSpeed Insights märkab seda.

Kas 2026. aastal tasub kohandatud koodiga vaeva näha?

Kui teil on Elementor 3.9 või uuem, siis peaaegu kindlasti mitte. Sisseehitatud funktsioon katab valdava enamuse saitide vajadused: lubage see, kontrollige PageSpeed Insightsis, unustage ära. Kohandatud meetodid (IntersectionObserver ja eriti jQuery) on õigustatud täpselt kahel juhul: Elementori versioon on mõjuval põhjusel alla 3.9 külmutatud või taustad on lisatud mittestandardsel viisil ja standardne lüliti ei näe neid.

Uue projekti puhul värskel Elementoril on õige tegevuste järjekord: lubage sisseehitatud laisk laadimine, laske sait PageSpeed Insightsist läbi ja ainult siis, kui konkreetsed taustapildid on endiselt probleemsetena märgistatud, tegelege nendega individuaalselt IntersectionObserveri kaudu. Ärge kirjutage kohandatud koodi ette „igaks juhuks", iga üleliigne JavaScripti rida, mille kirjutamata saate jätta, säästab teie hooldusaega.