Taustakuvat ovat pahasta

Opi miksi taustakuvia tulisi välttää verkkosivustollasi, miten löydät taustakuvat nopeasti ja miten korjaat tämän ongelman

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-11-27

Taustakuvat ovat pahasta

Ne teistä, jotka tuntevat minut tai ovat kuulleet minun puhuvan, ovat ehkä kuulleet minun puhuvan taustakuvista. Ne teistä, jotka eivät ole: en todellakaan pidä taustakuvista. Tässä artikkelissa selitän nopeasti, miksi en pidä taustakuvista, miten löydät nopeasti sivuja, joissa on taustakuvia, ja miten korjaat ne!

Miksi taustakuvat ovat haitallisia Core Web Vitals -mittareille

Verkkosivua ladattaessa jokaisella elementillä on oma aikansa ja paikkansa. Nykyaikaisilla tekniikoilla, kuten lykkäämisellä, esilatauksella, asynkronisella latauksella, ajoituksella, fetchpriority-määrittelyllä jne., saamme kaikki kriittiset resurssit melko hyvin hallintaan. Paitsi taustakuvat! 

Tarkastele tätä todellista esimerkkiä:

Päivittäin, useimmiten WordPress-sivustoilla, näen tämän kaavan. Kaikki normaalit kuvat ladataan laiskasti ja jotkut kuvat (tässä tapauksessa sosiaalisen median kuvakkeet alatunnisteessa) ovat taustakuvia. Arvaatko mitä tapahtuu?

<html>
<head>
    <style>
        footer {
            /* a margin of 100 vh wil make the footer off-screen !*/
            margin-top: 100vh;
            >.social {
                >.facebook {background-image: url('img/facebook.jpg');}
                >.instagram {background-image: url('img/instagram.jpg');}
                >.linkedin {background-image: url('img/linkedin.jpg');}
                >.email {background-image: url('img/email.jpg');}
            }
        }
    </style>
</head>
<body>
    <!-- yes this image is lazy loaded, because tiny mistakes happen! -->
    <img loading="lazy" src="img/hero.jpg"></img>
    <footer>
        <div class="social">
            <span class="facebook"></span>            <span class="instagram"></span>            <span class="linkedin"></span>            <span class="email"></divspan        </div>
    </footer>
</body>
</html>

Olet ehkä arvannut sen: näytön ulkopuolella olevat taustakuvat asetetaan latausjonoon ennen paljon tärkeämpää 'hero.jpg'-kuvaa josta yleensä tulee sivun Largest Contentful Paint -elementti.

lazy lcp with bg img

Mutta siinä ei ole vielä kaikki!

Kuten sanoin, taustakuvat ovat pahasta! Tämä johtuu siitä, että oudon prioriteetin lisäksi, jonka ne joskus saavat, taustakuvilta puuttuvat hienot ominaisuudet, jotka normaalit kuvat saavat!

  • Ei lazy loading -tukea: taustakuville ei ole loading-attribuuttia
  • Ei asynkronista dekoodausta: taustakuville ei ole decoding-attribuuttia
  • Ei fetchpriority-tukea: taustakuville ei ole fetchpriority -attribuuttia
  • Responsiiviset kuvalähteet: Taustakuvien image-set()-attribuutilla ei ole samoja tehokkaita ominaisuuksia kuin hyvällä responsiivisella suunnittelulla.
  • Ei width- ja height-attribuuttia. Koska yksinkertaista width- ja height-attribuuttia ei voi asettaa, joudut käyttämään kiertoteitä, jotka vaativat koodia (enemmän koodia on aina hitaampaa kuin vähemmän koodia samalla monimutkaisuudella!)
  • Ei alt-tekstiä: vaikka tämä ei

Löydä nopeasti kaikki taustakuvat sivulta

Miten siis saamme selville, onko verkkosivulla taustakuvia? Voit tarkistaa verkkoanalysoijan, suodattaa kuvien perusteella, napsauttaa valikkoriviä hiiren oikealla painikkeella, ottaa käyttöön initiator-sarakkeen ja tarkistaa aloittajan, mutta on paljon helpompaa liittää tämä koodi kehittäjäkonsoliin.

Avaa yksinkertaisesti kehittäjäkonsoli painamalla Ctrl-Shift-I, siirry Console-välilehdelle ja liitä tämä koodi. Se näyttää sinulle kaikki sivun taustakuvat
let bgimg = performance.getEntriesByType('resource')
  .filter(rs => rs.initiatorType == 'css')
  .map(rs => {
  return {
    name: rs.name,
    initiator: rs.initiatorType
  }
}) || [];

(bgimg.length > 0)?
    console.table(bgimg):
    console.log('No background images on this page!');

Tämä näyttää sinulle siististi muotoillun taulukon kaikkien taustakuvien nimillä ja aloittajilla

background img console table

Miten välttää taustakuvat

Taustakuvat ovat helposti vältettävissä. Tapa riippuu itse kuvasta. Menetelmiä on karkeasti kaksi.

Normaalien kuvien tapauksessa

Et uskoisi, jos kertoisin, mutta suurimmassa osassa tapauksista, joissa löydän taustakuvia, kuvan tausta-osalla ei ole edes tarkoitusta. Kuvien pitää vain 'olla jossain sivulla' ja background-image:url() -määrittelyä käytetään väärin tähän tarkoitukseen.
Jos näin on, lisää vain normaali img-tagi ja poista taustakuva tyylitiedostosta.

Peittokuvien tapauksessa:

Peittokuvat ovat kuvia, jotka peittävät kokonaan yläelementin. Taustakuvien käyttö peittokuvina on jossain määrin ymmärrettävää, koska kauan sitten tämä oli ainoa tapa saada peittokuvia, ja luulen ihmisten pitäytyvän siinä, minkä tuntevat. Onneksi meillä on käytettävissä parempia vaihtoehtoja. Korjataan se!
Peittokuvien tapauksessa poista vain tyyli   background-image: url(hero.jpg); background-size: cover; ja aseta normaali kuva samaan elementtiin ja muokkaa CSS näyttämään tältä:

<style>
.img-container {
    position: relative;
    > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       z-index: 1;
   }
}
<style>

<div class="img-container">
  <img 
       height="500" 
       width="300" 
       decoding="async" 
       loading="lazy" 
       src="hero.jpg"
       srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
       alt="alt text"
       fetchpriority="low"
  >
</div>


Compare your segments.

Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.

Analyze Segments >>

  • Device filtering
  • Route Analysis
  • Connection Types
Taustakuvat ovat pahastaCore Web Vitals Taustakuvat ovat pahasta