Nopeammat Elementor-hero-kuvat 2 minuutissa!

Nopeammat Elementor-hero-kuvat

Elementor, suosittu WordPress-sivueditori, yksinkertaistaa sivujen suunnittelua. Valitettavasti se usein hidastaa sivustoja. Joskus käyttäjävirheiden vuoksi ja joskus Elementorin suunnitteluratkaisujen takia. Esimerkki, jonka näen lähes päivittäin, on se, miten Elementor käsittelee hero-kuvia. Oletuksena Elementor käyttää taustakuvia näihin, mikä hidastaa sivun latautumista joka kerta.

Elementorin taustakuvien houkutus

Elementor lisää hero-kuvat oletuksena taustakuvana. Sivua muokatessa Elementorilla klikkaa vain ensimmäistä säilöä, siirry tyyleihin ja lisää kuvasi. Se on helppoa, kätevää ja idioottivarmaa. Jos tämä riittää sinulle, lopeta lukeminen tähän, mutta jos välität kävijöistäsi, lue eteenpäin ja opi luomaan Elementor-hero-kuvat oikein.

Elementorin taustakuvien ongelma

Mitä vikaa taustakuvissa sitten on, saatat kysyä? Taustakuvat tunnetaan tästä käyttäytymisestä: ne kattavat elementin koko taustan. Se tekee mitä pitääkin. Mutta suorituskyvyn kustannuksella:

• Myöhäinen löytäminen: Teknisestä näkökulmasta taustakuvat ovat kaikkea muuta kuin ihanteellisia. Elementorin taustakuvia ei löydetä välittömästi HTML:stä. Nämä taustakuvat on linkitetty tyylitiedostoihin. Koska tyylitiedostot täytyy ladata ja jäsentää erikseen, ne löydetään paljon myöhemmin renderöintiprosessin aikana.
• Ei optimoitu nopeudelle:  Taustakuvia ei ole optimoitu nopeudelle, koska niiltä puuttuvat uudemmat ominaisuudet kuten natiivi lazy loading, fetchpriority ja asynkroninen dekoodaus.
• Ei responsiivinen: Viimeisenä muttei vähäisimpänä, Elementorin taustakuvat eivät ole responsiivisia ja lataavat aina täysikokoisen työpöytäkuvan, jopa pienille mobiililaitteille.

En mene paljon enempää yksityiskohtiin (jos olet kiinnostunut, lue miksi taustakuvat ovat pahasta), mutta riittää kun sanon, että tällä asetuksella sivu todennäköisesti epäonnistuu Core Web Vitals -testeissä.

2 minuutin korjaus hitaisiin taustakuviin

Hitaiden taustakuvien ei tarvitse olla ongelma. Yksinkertaisella CSS-säädöllä ne voidaan muuttaa nopeiksi, responsiivisiksi kuviksi.  Salaisuus? Käytetään object-fit: cover kuvan skaalaamiseen ja yhdistetään se position: relative -asetukseen säilössä ja position: absolute -asetukseen kuvassa. 

Hauska fakta: Otin tänään aikaa itseltäni muuntaessani Elementorin taustakuvia salamannopeiksi responsiivisiksi kuviksi. Se vei alle 2 minuuttia! 

Jos tämä kuulostaa monimutkaiselta, älä huoli! Opastan sinua askel askeleelta. Ja lopussa odottaa vielä ohjevideo!

Vaihe 1: lisää tarvittavat tyylit

Hitaiden taustakuvien korjaamiseksi aloita soveltamalla muutamia olennaisia CSS-tyylejä. Nämä tyylit saavat kuvan käyttäytymään kunnollisen taustakuvan tavoin ja varmistavat, ettei se ole ristiriidassa Elementorin apudivien kanssa.

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

Mitä tämä tekee:

• .relative: Tekee ylätason säilöstä suhteellisen, jotta lapsielementit voidaan sijoittaa sen sisällä.
• .relative .elementor-*: Nollaa Elementorin apudivit asetteluristiriitojen välttämiseksi.
• .heroimg: Varmistaa, että kuva skaalautuu täyttämään säilön samalla kun se jää sen taakse.

Tyylien lisääminen:

• Siirry WordPressin hallintapaneeliin.
• Mene kohtaan Ulkoasu > Mukauta.
• Klikkaa Lisä-CSS.
• Liitä yllä oleva CSS-koodi ja tallenna muutokset.

Tämä luo perustan hitaiden taustakuvien muuntamiselle responsiivisiksi, optimoiduiksi hero-kuviksi. Seuraavaksi lisää .relative- ja .heroimg-luokat hero-osioosi ja näe taikuus toiminnassa! 

Vaihe 2: Valmistele säilö

Nyt kun tyylit ovat paikoillaan, on aika valmistella säilö uutta hero-kuvaa varten. Tämä tarkoittaa olemassa olevan taustakuvan poistamista ja .relative-luokan lisäämistä säilöön.

Vaiheet:

• Muokkaa säilöä:
• Siirry Elementor-editoriin ja valitse säilö, jossa hero-kuva on tällä hetkellä.
• Poista taustakuva:
• Siirry Tyyli-välilehteen.
• Etsi Tausta-osio, jossa kuva on käytössä.
• Klikkaa roskakorikuvaketta poistaaksesi taustakuvan.
• Lisää .relative-luokka:
• Vaihda Lisäasetukset-välilehteen.
• Kirjoita CSS-luokat-kenttään relative.

Vaihe 3: Lisää uusi kuva ja aseta uudet luokat

Kun säilö on valmis, on aika lisätä responsiivinen ja optimoitu hero-kuva Elementorilla. Näin teet sen:

Mitä odottaa: Viimeisen vaiheen aikana hero-kuva saattaa näyttää väärin kohdistetulta tai oudolta ennen luokkien lisäämistä! Tämä on normaalia! .heroimg-luokka muuttaa kuvan responsiiviseksi, koko levyiseksi hero-kuvaksi, joka käyttäytyy kuin taustakuva. Kun kaikki on valmista, optimoitu hero-kuvasi on säilön takana ja tarjoaa saman visuaalisen vaikutelman huomattavasti paremmalla suorituskyvyllä.

Vaiheet:

• Lisää kuvaelementti:
• Klikkaa Elementor-editorissa vasemman yläkulman plus-kuvaketta lisätäksesi uuden elementin.
• Vedä ja pudota Kuva-widgetti ylimpään säilöön (se, jossa on .relative-luokka).
• Lataa ja valitse kuvasi:
• Klikkaa kuva-asetuksissa vasemmassa paneelissa kuvan paikanvaraajaa.
• Lataa koko näytön kuva, jota haluat käyttää, tai valitse olemassa oleva WordPress-mediakirjastostasi.
• Lisää .heroimg-luokka:
• Kun kuva on edelleen valittuna, siirry Elementor-valikossa Lisäasetukset-välilehteen.
• Kirjoita CSS-luokat-kenttään heroimg.

Valmis, nauti nopeammasta sivusta!

Selvisit! Tässä vaiheessa hero-kuvasi on täysin optimoitu ja valmis tarjoamaan nopeamman sivukokemuksen. 

Kun julkaiset sivun, tarkasta elementti, ja huomaat jotain hienoa: hidas taustakuva on korvattu responsiivisella, nopealla etualakuvalla. Tämä kuva ladataan nyt todennäköisesti korkealla fetchpriority-asetuksella, mikä varmistaa nopeamman latauksen ja parantaa sekä Core Web Vitals -tuloksia että user experience -kokemusta.

Onnittelut nopeamman ja tehokkaamman sivun luomisesta. Kävijäsi huomaavat eron!

Ennen: 2,6 sek

Jälkeen: 0,6 sek

Bonus: esilataa hero-kuva

Katso koko läpikäynti YouTubessa.