Raskere Elementor hero-bilder på 2 minutter!

Raskere Elementor hero-bilder

Elementor, en populær WordPress-sideredigerer, forenkler sidedesign. Dessverre bremser den ofte ned nettsteder. Noen ganger på grunn av brukerfeil og noen ganger på grunn av Elementors designvalg. Et eksempel jeg ser nesten daglig er hvordan Elementor håndterer hero-bilder. Som standard bruker Elementor bakgrunnsbilder for disse, noe som bremser sideinnlastingen hver gang.

Fristelsen med Elementor-bakgrunnsbilder

Elementor legger til hero-bilder som bakgrunnsbilde som standard. Mens du redigerer siden med Elementor, klikker du bare på den første containeren, navigerer til stil og legger til bildet ditt. Det er enkelt, praktisk og idiotsikkert. Hvis det er godt nok for deg, slutt å lese her, men hvis du bryr deg om besøkende, les videre og lær hvordan du lager Elementor hero-bilder på riktig måte.

Problemet med Elementor-bakgrunnsbilder

Hva er egentlig galt med bakgrunnsbilder, spør du kanskje? Bakgrunnsbilder er kjent for denne oppførselen: de dekker hele bakgrunnen til et element. Det gjør det det skal. Men til en ytelseskostnad:

• Sen oppdagelse: Fra et teknisk perspektiv er bakgrunnsbilder langt fra ideelle. Elementor-bakgrunnsbilder oppdages ikke umiddelbart i HTML-en. Disse bakgrunnsbildene er lenket i stilark. Siden stilark må lastes ned og analyseres separat, betyr det at de oppdages mye senere i gjengivelsesprosessen.
• Ikke optimalisert for hastighet:  Bakgrunnsbilder er ikke optimalisert for hastighet fordi de mangler nyere egenskaper som native lazy loading, fetchpriority og async decoding.
• Ikke responsive: Sist men ikke minst er Elementor-bakgrunnsbilder ikke responsive og vil alltid laste et fullstørrelse skrivebordsbilde, selv for små mobilenheter.

Jeg skal ikke gå inn i mye mer detalj (hvis du er interessert kan du lese om hvorfor bakgrunnsbilder er onde) men det holder å si at en side med dette oppsettet sannsynligvis vil feile Core Web Vitals.

2-minuttersfiksen for trege bakgrunnsbilder

Trege bakgrunnsbilder trenger ikke være et problem. Med en enkel CSS-justering kan de forvandles til raske, responsive bilder.  Hemmeligheten? Bruk av object-fit: cover for å skalere bildet og kombinere det med position: relative på containeren og position: absolute på bildet. 

Morsomt faktum: Jeg tok tiden på meg selv i dag mens jeg konverterte Elementor-bakgrunnsbilder til lynraske responsive bilder. Det tok meg mindre enn 2 minutter! 

Hvis dette høres komplisert ut, ikke bekymre deg! Jeg guider deg steg for steg. Og det venter til og med en instruksjonsvideo på deg til slutt!

Steg 1: legg til de nødvendige stilene

For å fikse trege bakgrunnsbilder, start med å legge til noen essensielle CSS-stiler. Disse stilene vil få bildet til å oppføre seg som et skikkelig bakgrunns-cover-bilde og sikrer  at det ikke kommer i konflikt med Elementor-hjelpediver.

/* 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;
  }

Hva dette gjør:

• .relative: Gjør den overordnede containeren relativ for å posisjonere barneelementer inni den.
• .relative .elementor-*: Tilbakestiller Elementor-hjelpediver for å unngå layoutkonflikter.
• .heroimg: Sikrer at bildet skaleres til å dekke containeren mens det ligger bak den.

Slik legger du til stilene:

• Naviger til WordPress-dashboardet ditt.
• Gå til Utseende > Tilpass.
• Klikk på Ekstra CSS.
• Lim inn CSS-koden over og lagre endringene dine.

Dette legger grunnlaget for å konvertere de trege bakgrunnsbildene til responsive, optimaliserte hero-bilder. Neste steg er å legge til .relative- og .heroimg-klassene på hero-seksjonen din for å se magien i aksjon! 

Steg 2: Forbered containeren

Nå som stilene er på plass, er det på tide å forberede containeren for det nye hero-bildet. Dette innebærer å fjerne det eksisterende bakgrunnsbildet og legge til .relative-klassen på containeren.

Steg:

• Rediger containeren:
• Gå til Elementor-editoren din og velg containeren der hero-bildet for øyeblikket er brukt.
• Fjern bakgrunnsbildet:
• Naviger til Stil-fanen.
• Finn Bakgrunn-seksjonen der bildet er brukt.
• Klikk på søppelbøtteikonet for å fjerne bakgrunnsbildet.
• Legg til .relative-klassen:
• Bytt til Avansert-fanen.
• Under CSS-klasser, skriv relative.

Steg 3: Legg til et nytt bilde og bruk de nye klassene

Med containeren klar er det på tide å legge til det responsive og optimaliserte hero-bildet med Elementor. Slik gjør du det:

Hva du kan forvente: Under det siste steget kan hero-bildet se feilplassert eller rart ut før du legger til klassene! Dette er normalt! .heroimg-klassen vil forvandle bildet til et responsivt hero-bilde i full bredde som oppfører seg som en bakgrunns-cover. Når det er fullført, vil det optimaliserte hero-bildet ditt ligge bak containeren og gi den samme visuelle effekten med betydelig forbedret ytelse.

Steg:

• Legg til et bildeelement:
• I Elementor-editoren, klikk på plussikonet øverst til venstre for å legge til et nytt element.
• Dra og slipp Bilde-widgeten inn i den øverste containeren (den med .relative-klassen).
• Last opp og velg bildet ditt:
• I bildeinnstillingene i venstre panel, klikk på bildeplassholderen.
• Last opp fullskjermbildet du vil bruke eller velg et eksisterende fra WordPress-mediebiblioteket ditt.
• Legg til .heroimg-klassen:
• Med bildet fortsatt valgt, naviger til Avansert-fanen i Elementor-menyen.
• I CSS-klasser-feltet, skriv heroimg.

Ferdig, nyt en raskere side!

Du klarte det! På dette punktet er hero-bildet ditt fullt optimalisert og klart til å levere en raskere sideopplevelse. 

Når du publiserer siden, inspiser elementet, og du vil legge merke til noe flott: det trege bakgrunnsbildet er erstattet med et responsivt, raskt forgrunnsbilde. Dette bildet lastes nå sannsynligvis med høy fetchpriority, noe som sikrer at det lastes raskere og forbedrer både Core Web Vitals og user experience.

Gratulerer med å ha laget en raskere, mer effektiv side. Besøkende vil merke forskjellen!

Før: 2,6 sek

Etter: 0,6 sek

Bonus: forhåndslast hero-bildet

Se hele gjennomgangen på YouTube.