Snellere Elementor hero-afbeeldingen in 2 minuten!

Snellere Elementor hero-afbeeldingen

Elementor, een populaire WordPress page editor, vereenvoudigt het ontwerpen van pagina's. Helaas vertraagt het vaak websites. Soms door gebruikersfouten en soms door ontwerpkeuzes van Elementor zelf. Een voorbeeld dat ik bijna dagelijks zie, is hoe Elementor omgaat met hero-afbeeldingen. Standaard gebruikt Elementor hiervoor background images, wat het laden van de pagina elke keer vertraagt.

De aantrekkingskracht van Elementor Background Images

Elementor voegt hero-afbeeldingen standaard toe als een background image. Terwijl je de pagina bewerkt met Elementor, klik je gewoon op de eerste container, navigeer je naar 'style' en voeg je je afbeelding toe. Het is makkelijk, handig en idioot-proof. Als dat goed genoeg voor je is, stop dan hier met lezen. Maar als je om je bezoekers geeft, lees dan verder en leer hoe je Elementor hero-afbeeldingen op de juiste manier maakt.

Het probleem met Elementor Background Images

Wat is er mis met background images, vraag je je misschien af? Background images staan bekend om dit gedrag: ze vullen de volledige achtergrond van een element. Ze doen wat ze moeten doen, maar wel ten koste van de performance:

• Late discovery: Vanuit een technisch perspectief zijn background images verre van ideaal. Elementor background images worden niet direct in de HTML ontdekt. Deze afbeeldingen worden gelinkt in stylesheets. Omdat stylesheets apart gedownload en geparsed moeten worden, worden ze pas veel later in het rendering proces ontdekt.
• Niet geoptimaliseerd voor snelheid:  Background images zijn niet geoptimaliseerd voor snelheid omdat ze nieuwere eigenschappen zoals native lazy loading, fetchpriority en async decoding missen.
• Niet responsive: Tot slot zijn Elementor background images niet responsive en laden ze altijd een afbeelding van desktopformaat, zelfs op kleine mobiele apparaten.

Ik ga hier niet veel dieper op in (als je geïnteresseerd bent, lees dan over waarom background images slecht zijn), maar het volstaat te zeggen dat een pagina met deze opzet waarschijnlijk niet zal slagen voor de Core Web Vitals.

De 2-minuten-fix voor trage Background Images

Trage background images hoeven geen probleem te zijn. Met een simpele CSS-tweak transformeer je ze in snelle, responsive afbeeldingen.  Het geheim? Gebruik object-fit: cover om de afbeelding te schalen en combineer dit met position: relative op de container en position: absolute op de afbeelding. 

Leuk feitje: Ik heb vandaag de tijd opgenomen terwijl ik Elementor background images omzette naar razendsnelle responsive afbeeldingen. Het kostte me minder dan 2 minuten! 

Als dit ingewikkeld klinkt, geen zorgen! Ik begeleid je stap voor stap. En aan het einde wacht er zelfs een instructievideo op je!

Stap 1: voeg de benodigde styles toe

Om trage background images te verhelpen, begin je met het toepassen van een paar essentiële CSS-styles. Deze styles zorgen ervoor dat de afbeelding zich gedraagt als een echte background cover-afbeelding en voorkomen conflicten met de helper-divs van Elementor.

/* The relative parent container */
  .relative{
      position: relative;
  }
  
  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Wat dit doet:

• .relative: Maakt de parent container relative, zodat child-elementen erin gepositioneerd kunnen worden.
• .relative .elementor-*: Reset de helper-divs van Elementor om layout-conflicten te voorkomen.
• .heroimg: Zorgt ervoor dat de afbeelding schaalt om de container te bedekken, terwijl deze erachter zit.

Hoe voeg je de styles toe:

• Navigeer naar je WordPress Dashboard.
• Ga naar Appearance > Customize.
• Klik op Additional CSS.
• Plak de bovenstaande CSS-code en sla je wijzigingen op.

Dit legt de basis voor het omzetten van die trage background images naar responsive, geoptimaliseerde hero-afbeeldingen. Pas vervolgens de klassen .relative en .heroimg toe op je hero-sectie om de magie in actie te zien! 

Stap 2: Bereid de container voor

Nu de styles zijn ingesteld, is het tijd om de container voor te bereiden op de nieuwe hero-afbeelding. Dit houdt in dat je de bestaande background image verwijdert en de class .relative toevoegt aan de container.

Stappen:

• Bewerk de Container:
• Ga naar je Elementor editor en selecteer de container waar de hero-afbeelding momenteel is toegepast.
• Verwijder de Background Image:
• Navigeer naar de Style-tab.
• Zoek de Background-sectie waar de afbeelding is toegepast.
• Klik op het prullenbakicoon om de background image te verwijderen.
• Pas de .relative Class toe:
• Schakel over naar de Advanced-tab.
• Typ relative onder CSS Classes.

Stap 3: Voeg een nieuwe afbeelding toe en pas de nieuwe classes toe

Nu de container klaar is, is het tijd om de responsive en geoptimaliseerde hero-afbeelding toe te voegen met Elementor. Zo doe je dat:

Wat je kunt verwachten: Tijdens de laatste stap kan de hero-afbeelding er vreemd of verkeerd uitgelijnd uitzien voordat je de classes toepast. Dit is normaal! De .heroimg-class transformeert de afbeelding in een responsive, full-width hero-afbeelding die zich gedraagt als een background cover. Eenmaal voltooid, zit je geoptimaliseerde hero-afbeelding achter de container en biedt dezelfde visuele impact met aanzienlijk betere performance.

Stappen:

• Voeg een Image Element toe:
• Klik in de Elementor editor op het plus-icoon linksboven om een nieuw element toe te voegen.
• Sleep de Image-widget naar de bovenste container (degene met de .relative class).
• Upload en selecteer je afbeelding:
• Klik in de afbeeldingsinstellingen in het linkerpaneel op de image placeholder.
• Upload de full-screen afbeelding die je wilt gebruiken of selecteer een bestaande uit je WordPress mediagalerij.
• Pas de .heroimg Class toe:
• Terwijl de afbeelding nog steeds geselecteerd is, navigeer je naar de Advanced-tab in het Elementor-menu.
• Typ heroimg in het CSS Classes-veld.

Klaar, geniet van een snellere pagina!

Je hebt het voor elkaar! Op dit punt is je hero-afbeelding volledig geoptimaliseerd en klaar om een snellere page experience te leveren. 

Zodra je de pagina publiceert en het element inspecteert, zul je iets geweldigs opmerken: de trage background image is vervangen door een responsive, snelle foreground image. Deze afbeelding wordt nu waarschijnlijk geladen met een hoge fetchpriority, waardoor deze sneller laadt en zowel de Core Web Vitals als de user experience verbetert.

Gefeliciteerd met het creëren van een snellere, efficiëntere pagina. Je bezoekers zullen het verschil merken!

Voor: 2,6 sec

Na: 0,6 sec

Bonus: preload de hero-afbeelding

Bekijk de volledige walkthrough op YouTube.