Sidehastighet handler ikke bare om bildekomprimering og hurtigbufring. Noen ganger er alle <img>-tagger på et nettsted allerede lastet dovent med loading="lazy", men PageSpeed Insights klager fortsatt på bakgrunnsbilder i Elementor-seksjoner. Det er fordi background-image i CSS ikke støtter doven lasting ut av boksen, nettleseren henter trofast alle bakgrunnsbilder når den analyserer stilarkene, selv om seksjonen er langt under folden.

Dette rammer spesielt lange landingssider: det første skjermbildet kan rendres på 1,2 sekunder, men det tar 4 sekunder fordi nettleseren laster ned 8 bakgrunnsbilder fra bunnteksten som brukeren ikke vil rulle til på et minutt. Det finnes en løsning, og i løpet av de siste par årene har det dukket opp alternativer for alle ferdighetsnivåer, fra «huk av i en boks» til tilpasset JavaScript.

💡 Rask oversikt:

• Aktiver innebygd doven lasting av bakgrunnsbilder i Elementor-innstillingene.
• Konfigurer IntersectionObserver API for tilpassede CSS-bakgrunner og eldre plugin-versjoner.
• Bruk jQuery med data-attributter for nettsteder der dette rammeverket allerede er i bruk.

Innebygd doven lasting i Elementor

Siden versjon 3.9 la Elementor til en eksperimentell funksjon for doven lasting av bakgrunnsbilder, og fra versjon 3.15+ ble den stabil og aktivert som standard på nye installasjoner. Under panseret er det det samme IntersectionObserver API-et som native nettleserløsninger, men pakket inn i en praktisk bryter.

Slik aktiverer du: gå til Elementor → Innstillinger → Funksjoner (eller Innstillinger → Eksperimenter i det russiske grensesnittet), finn raden Doven lasting av bakgrunnsbilder og sett bryteren til Aktiv. Lagre endringene, så vil alle bakgrunnsbilder i seksjoner, containere og kolonner satt via standard Elementor-grensesnitt begynne å lastes først når brukeren ruller til dem.

Hva denne metoden IKKE dekker: tilpassede bakgrunner skrevet manuelt via Elementors CSS-fane (selector { background-image: url(...); }), og bakgrunner lagt til via tredjeparts widget-plugins. For disse, bruk metodene nedenfor.

Fordeler: null kode, vedlikeholdes av Elementor-teamet, automatisk kompatibel med hurtigbuffer-plugins. Ulemper: kun for standard Elementor-bakgrunner, krever versjon 3.9+.

Separat er det verdt å nevne bildeformatet for bakgrunner. Google PageSpeed Insights straffer bakgrunner i JPEG når WebP eller AVIF er tilgjengelig, og denne straffen er uavhengig av hvilken metode du brukte for å utsette lasting. Konverter alle bakgrunnsbilder til WebP (kvalitetstapet er usynlig for øyet, og filstørrelsen er 25-35% mindre enn JPEG) eller AVIF (50% mindre enn JPEG, men krever et fallback <picture>-element for Safari eldre enn 16.0). Plugins som Converter for Media eller Imagify gjør dette automatisk ved opplasting til mediebiblioteket, inkludert bakgrunner lastet opp via Elementor-grensesnittet.

IntersectionObserver: moderne JavaScript uten jQuery

Hvis Elementor-versjonen din er under 3.9, eller bakgrunner er satt med tilpasset CSS, eller du rett og slett ønsker full kontroll, løser IntersectionObserver API oppgaven rent uten overhead fra scroll-hendelser.

Hvorfor ikke en scroll-handler? scroll-hendelsen fyres dusinvis av ganger per sekund og utfører posisjonsberegninger for elementer i hovedtråden ved hvert tick. Selv med throttle er dette merkbart på svake enheter. IntersectionObserver jobber asynkront i nettleserens compositor-tråd, den rapporterer bare når et element har krysset synlighetsterskelen, uten konstante beregninger.

Trinn 1. Markup og CSS. Legg til CSS-klassen lazy-bg-section på seksjoner som trenger doven lasting:

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
}

Bakgrunnsfargen #f0f0f0 fungerer som en visuell plassholder, seksjonen ser ikke tom ut mens brukeren ruller. Klassen .loaded legges til fra JavaScript når seksjonen kommer inn i visningsområdet.

Trinn 2. JavaScript, initialisering av Observer. Plasser koden i temaets script-fil eller via en plugin som Code Snippets:

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

Nøkkeldetalj: rootMargin: '200px 0px' betyr at Observeren fyres 200 piksler før seksjonen faktisk vises på skjermen. Brukeren ser ikke lasteøyeblikket, bildet er allerede på plass.

Trinn 3. Markup i Elementor. Åpne den aktuelle seksjonen → Avansert-fane → CSS-klasser-felt, skriv inn lazy-bg-section. Samme sted, under Tilpassede attributter, legg til et data-bg-attributt med verdien som full URL til bakgrunnsbildet.

Denne tilnærmingen fungerer i alle moderne nettlesere (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), det vil si overalt siden 2016. For Internet Explorer trenger du en polyfill, men slike prosjekter er nå sjeldne.

JQuery og data-attributter: den klassiske tilnærmingen

På virkelig gamle nettsteder der jQuery allerede er lastet på hver side og omskriving av stacken ikke er et alternativ, fungerer en metode med data-attributter og en scroll-handler. Den er mindre ytelseseffektiv enn IntersectionObserver, men utprøvd over år og krever ikke moderne nettleser-API-er.

Trinn 1. Seksjonsklasse. I Elementor-seksjonsinnstillinger, Avansert-fane → CSS-klasser, spesifiser lazy-background:

Trinn 2. CSS-stiler for bakgrunn. For å få bakgrunnsbildet til å strekke seg riktig over hele seksjonen etter lasting, sett stiler. I Elementor gjøres dette via Avansert → Tilpasset CSS-fanen for den spesifikke seksjonen:

Grunnleggende stiler for en fullskjermsbakgrunn:

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
}

Legg merke til selektoren #OO2, dette er seksjonens CSS-identifikator som du setter i samme Avansert → CSS-ID-fane. For hver seksjon med sin egen bakgrunn må identifikatoren være unik slik at stiler ikke overlapper.

Alternativ for små bilder (ikke full seksjon). Hvis du trenger å plassere et lite bilde i seksjonen i stedet for en fullskjermsbakgrunn, for eksempel en logo eller et dekorativt element i bunnteksten, juster stiler for den spesifikke størrelsen og posisjonen:

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
}

Her er bakgrunnen plassert i nedre høyre hjørne av bunntekstseksjonen med en fast bredde på 350px, og kolonner får z-index: 2 slik at innhold ikke dekkes av bakgrunnslaget.

Trinn 3. Responsive bilder. For å unngå å laste et bilde på 2 megabyte på en mobilskjerm med 400px bredde, forbered 6 bildevarianter for ulike oppløsninger:

Trinn 4. Data-attributter. Last opp bilder til WordPress-mediebiblioteket og spesifiser stier til dem i seksjonens data-attributter. I Elementor: Avansert → Tilpassede attributter:

Format for hvert attributt:

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

Scriptet (se nedenfor) leser disse attributtene, bestemmer gjeldende skjermbredde via window.matchMedia og setter inn URL-en for den nødvendige størrelsen.

Trinn 5. jQuery-script. Legg til koden i temaets script-fil eller via en plugin:

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

Slik fungerer det: ved sidelasting og hver scroll-hendelse sjekker scriptet posisjonen til hver seksjon med klassen .lazy-background. Hvis seksjonen kommer inn i sonen «skjerm + 100px buffer», bestemmes gjeldende visningsbredde via matchMedia, det nødvendige data-attributtet velges, et midlertidig Image-objekt opprettes for forhåndslasting, og etter vellykket lasting legges en <div class="lazy-bg"> med bakgrunnsbildet til i seksjonen. Den behandlede seksjonen fjernes fra overvåkingsarrayet, det er ingen gjentatte lastinger.

Hvilken metode du bør velge: sammenligning

Det praktiske utvalgskriteriet er enkelt: hvis Elementor er versjon 3.9 eller nyere og bakgrunner er satt på standard måte, aktiver den innebygde funksjonen og lukk saken. Hvis bakgrunner er tilpassede (CSS-fane, tredjeparts-widgets), bruk IntersectionObserver i vanilla JavaScript, uten jQuery. La jQuery-metoden være for prosjekter der jQuery allerede er til stede og det ikke er budsjett for omskriving, eller der Internet Explorer-støtte er nødvendig.

Uavhengig av valgt metode forblir bakgrunnsbildet fysisk den samme filen på serveren. Hvis det veier 800 kilobyte, vil ikke doven lasting gjøre det lettere, det vil bare utsette tidspunktet når nettleseren begynner å laste ned de 800 kilobytene. Derfor gjelder regelen «optimaliser først, last dovent etterpå» også her: komprimer først til WebP eller AVIF og endre størrelse til maksimal skjermbredde for målgruppen, og bruk deretter én av de tre metodene for doven lasting. Hurtigbuffer-plugins (WP Rocket, LiteSpeed Cache, Flying Press) kommer ikke i konflikt med noen av de tre tilnærmingene, siden en bakgrunn lastet via CSS background-image hurtigbufres av nettleseren på samme måte som en vanlig <img>.

⁉️🤔 Ofte stilte spørsmål

Hvorfor ikke bare bruke loading="lazy" for bakgrunnsbilder?

Attributtet loading="lazy" fungerer bare med <img>- og <iframe>-tagger, men ikke med CSS-egenskapen background-image. Nettleseren vet ikke at CSS-en din inneholder en bilde-URL som kunne vært utsatt før den analyserer stilarket, og på det tidspunktet har forespørselen allerede gått til nettverket. Det er nettopp derfor bakgrunner trenger en separat mekanisme.

Hvilken metode bør jeg velge hvis nettstedet er 3 år gammelt og Elementor er versjon 3.12?

Innebygd doven lasting fra Elementor. Versjon 3.12 inkluderer allerede denne funksjonen i stabil status, bare gå til Innstillinger, Funksjoner og aktiver den. Ingen kodeskriving nødvendig.

Bremser jQuery-metoden betydelig på mobil?

På budsjett Android-enheter fra 2019-2020, merkbart. scroll-hendelsen kombinert med offset().top treffer hovedtråden ved hvert scroll-bilde. Hvis nettstedets publikum hovedsakelig er mobilt, bytt til IntersectionObserver eller oppdater Elementor til 3.9+ og aktiver den innebygde funksjonen.

Kan jeg kombinere tilnærminger på ett nettsted?

Ja, og det er normal praksis. De fleste bakgrunnsseksjoner konfigurert via standard Elementor-grensesnitt håndteres av innebygd doven lasting. De gjenværende tilpassede seksjonene med manuell CSS kobler du til IntersectionObserver. Det er ingen konflikt: Observer fyres bare på elementer med den spesifiserte klassen, og Elementors innebygde mekanisme ignorerer dem.

Er det obligatorisk å forberede 6 bildestørrelser, eller holder det med én?

Seks størrelser er maksimum for meningsfull detaljrikdom. I praksis, for de fleste nettsteder, er tre nok: 1920px for desktop, 1024px for nettbrett og 768px for mobil. Fire brytepunkter, med tillegg av 400px for små skjermer, er allerede en god balanse mellom kvalitet og innsats. Ett bilde for alle oppløsninger fungerer, men laster ekstra kilobyte på mobil, Google PageSpeed Insights vil merke dette.

Er det verdt å bry seg med tilpasset kode i 2026?

Hvis du har Elementor 3.9 eller nyere, er svaret nesten helt sikkert nei. Den innebygde funksjonen dekker behovene til det store flertallet av nettsteder: aktiver den, sjekk i PageSpeed Insights, glem den. Tilpassede metoder (IntersectionObserver og spesielt jQuery) er berettiget i nøyaktig to tilfeller: Elementor-versjonen er fryst under 3.9 av en gyldig grunn, eller bakgrunner legges til på en ikke-standard måte og standardbryteren ser dem ikke.

For et nytt prosjekt på fersk Elementor er riktig rekkefølge av handlinger: aktiver innebygd doven lasting, kjør nettstedet gjennom PageSpeed Insights, og bare hvis spesifikke bakgrunnsbilder fortsatt flagges som problematiske, håndter dem individuelt via IntersectionObserver. Ikke skriv tilpasset kode på forhånd «for sikkerhets skyld», hver ekstra linje med JavaScript du kan unngå å skrive sparer deg vedlikeholdstid.