Snabbare Elementor hero-bilder på 2 minuter!

Snabbare Elementor hero-bilder

Elementor, en populär WordPress-sidredigerare, förenklar siddesign. Tyvärr saktar det ofta ner webbplatser. Ibland på grund av användarfel och ibland på grund av Elementors designval. Ett exempel jag ser nästan dagligen är hur Elementor hanterar hero-bilder. Som standard använder Elementor bakgrundsbilder för dessa, vilket saktar ner sidladdningen varje gång.

Lockelsen med Elementor bakgrundsbilder

Elementor lägger till hero-bilder som bakgrundsbild som standard. När du redigerar sidan med Elementor, klicka helt enkelt på den första containern, navigera till style och lägg till din bild. Det är enkelt, bekvämt och idiotsäkert. Om det räcker för dig kan du sluta läsa här, men om du bryr dig om dina besökare, läs vidare och lär dig hur du skapar Elementor hero-bilder på rätt sätt.

Problemet med Elementor bakgrundsbilder

Nu kanske du undrar vad som är fel med bakgrundsbilder? Bakgrundsbilder är kända för detta beteende: de sträcker sig över hela bakgrunden av ett element. Det gör vad det ska göra. Men till en prestandakostnad:

• Sen upptäckt: Ur ett tekniskt perspektiv är bakgrundsbilder långt ifrån ideala. Elementor bakgrundsbilder upptäcks inte omedelbart i HTML. Dessa bakgrundsbilder är länkade i stilmallar. Eftersom stilmallar måste laddas ner och tolkas separat innebär det att de upptäcks mycket senare under renderingsprocessen.
• Inte optimerade för hastighet:  Bakgrundsbilder är inte optimerade för hastighet eftersom de saknar nyare egenskaper som inbyggd lazy loading, fetchpriority och asynkron avkodning.
• Inte responsiva: Sist men inte minst är Elementor bakgrundsbilder inte responsiva och kommer alltid att ladda en fullstor skrivbordsbild, även för små mobila enheter.

Jag går inte in på mer detaljer (om du är intresserad kan du läsa om [url=/pagespeed/background-images-are-evil]varför bakgrundsbilder är onda[/url]) men det räcker med att säga att en sida med denna konfiguration troligen kommer att misslyckas med Core Web Vitals.

2-minutersfixen för långsamma bakgrundsbilder

Långsamma bakgrundsbilder behöver inte vara ett problem. Med en enkel CSS-justering kan de omvandlas till snabba, responsiva bilder.  Hemligheten? Använd object-fit: cover för att skala bilden och kombinera det med position: relative på containern och position: absolute på bilden. 

Kul fakta: Jag tog tid på mig själv idag medan jag konverterade Elementor bakgrundsbilder till blixtsnabba responsiva bilder. Det tog mig mindre än 2 minuter! 

Om detta låter komplicerat, oroa dig inte! Jag guidar dig steg för steg. Och det finns till och med en instruktionsvideo som väntar på dig i slutet!

Steg 1: lägg till de nödvändiga stilarna

För att fixa långsamma bakgrundsbilder, börja med att applicera några viktiga CSS-stilar. Dessa stilar får bilden att bete sig som en riktig bakgrundsomslagsbild och säkerställer att den inte krockar med Elementors hjälp-divs.

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

Vad detta gör:

• .relative: Gör föräldracontainern relativ för att positionera underordnade element inom den.
• .relative .elementor-*: Återställer Elementors hjälp-divs för att undvika layoutkonflikter.
• .heroimg: Säkerställer att bilden skalas för att täcka containern medan den sitter bakom den.

Hur du lägger till stilarna:

• Navigera till din WordPress Dashboard.
• Gå till Utseende > Anpassa.
• Klicka på Ytterligare CSS.
• Klistra in CSS-koden ovan och spara dina ändringar.

Detta lägger grunden för att konvertera de långsamma bakgrundsbilderna till responsiva, optimerade hero-bilder. Applicera sedan klasserna .relative och .heroimg på din hero-sektion för att se magin i aktion! 

Steg 2: Förbered containern

Nu när stilarna är på plats är det dags att förbereda containern för den nya hero-bilden. Detta innebär att ta bort den befintliga bakgrundsbilden och applicera klassen .relative på containern.

Steg:

• Redigera containern:
• Gå till din Elementor-redigerare och välj containern där hero-bilden för närvarande är applicerad.
• Ta bort bakgrundsbilden:
• Navigera till fliken Style.
• Hitta sektionen Background där bilden är applicerad.
• Klicka på papperskorgsikonen för att ta bort bakgrundsbilden.
• Applicera klassen .relative:
• Byt till fliken Advanced.
• Under CSS Classes, skriv relative.

Steg 3: Lägg till en ny bild och applicera de nya klasserna

Med containern redo är det dags att lägga till den responsiva och optimerade hero-bilden med Elementor. Så här gör du:

Vad du kan förvänta dig: Under det sista steget kan hero-bilden se feljusterad eller konstig ut innan klasserna appliceras! Detta är normalt! Klassen .heroimg kommer att omvandla bilden till en responsiv hero-bild i full bredd som beter sig som en bakgrundsomslagsbild. När det är klart kommer din optimerade hero-bild att sitta bakom containern och erbjuda samma visuella effekt med avsevärt förbättrad prestanda.

Steg:

• Lägg till ett bildelement:
• I Elementor-redigeraren, klicka på plusikonen i det övre vänstra hörnet för att lägga till ett nytt element.
• Dra och släpp Image-widgeten i den övre containern (den med klassen .relative).
• Ladda upp och välj din bild:
• I bildinställningarna på den vänstra panelen, klicka på bildplatshållaren.
• Ladda upp den fullskärmsbild du vill använda eller välj en befintlig från ditt WordPress-mediabibliotek.
• Applicera klassen .heroimg:
• Med bilden fortfarande vald, navigera till fliken Advanced i Elementor-menyn.
• I fältet CSS Classes, skriv heroimg.

Klart, njut av en snabbare sida!

Du har klarat det! Vid det här laget är din hero-bild helt optimerad och redo att leverera en snabbare sidupplevelse. 

När du publicerar sidan, inspektera elementet, och du kommer att märka något fantastiskt: den långsamma bakgrundsbilden har ersatts med en responsiv, snabb förgrundsbild. Denna bild laddas nu troligen med hög fetchpriority, vilket säkerställer att den laddas snabbare och förbättrar både Core Web Vitals och user experience.

Grattis till att du skapat en snabbare och effektivare sida. Dina besökare kommer att märka skillnaden!

Bonus: förinläs hero-bilden

Se hela genomgången på YouTube.