Taustakuvat ovat pahasta

Opi miksi sinun tulisi välttää taustakuvia 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 saattaneet kuulla minun puhuvan taustakuvista. Ne teistä, jotka eivät: en todellakaan pidä taustakuvista. Tässä artikkelissa selitän nopeasti, miksi en pidä taustakuvista, miten löydät nopeasti sivut, 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 viivästyksellä, esilatamisella, asynkronisella latauksella, aikataulutuksella, fetchpriority-määrittelyllä jne. saamme kaikki kriittiset resurssit melko hyvin hallintaan. Paitsi taustakuvat! 

Harkitse tätä tosielämän esimerkkiä:

Päivittäin, useimmiten WordPress-sivustoilla näen tämän kaavan. Kaikki normaalit kuvat on ladattu 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: näytön ulkopuolella olevat taustakuvat asetetaan latausjonoon ennen paljon tärkeämpää 'hero.jpg'-kuvaa josta tulee yleensä sivun Largest Contentful Paint -elementti.

Mutta se ei ole vielä kaikki!

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

  • Ei laiskaa latausta: 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 samaa ominaisuusvalikoimaa kuin hyvällä responsiivisella suunnittelulla.
  • Ei width- ja height-attribuuttia. Se, ettei yksinkertaista width- ja height-attribuuttia voi asettaa, pakottaa 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 selvitämme, onko verkkosivulla taustakuvia? Voisit tarkistaa verkko-inspektorin, suodattaa kuvat, klikata valikkopalkkia hiiren oikealla, ottaa käyttöön initiator-sarakkeen ja tarkistaa initiatorin, mutta on paljon helpompaa liittää tämä koodi dev-konsoliin.

Avaa yksinkertaisesti dev-konsoli painamalla Ctrl-Shift-I, siirry konsoli-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 nimistä ja initiator-tiedoista

Miten välttää taustakuvia

Taustakuvat on helppo välttää. Tapa riippuu itse kuvasta. Menetelmiä on karkeasti kaksi.

Normaalien kuvien tapauksessa

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

Peittokuvien tapauksessa:

Peittokuvat ovat kuvia, jotka peittävät kokonaan ylätason säiliön. Taustakuvien käyttäminen peittokuvina on tavallaan ymmärrettävää, koska kauan sitten tämä oli ainoa tapa saada peittokuvia, ja ihmiset pitävät kiinni siitä, minkä tuntevat. Onneksi meillä on nyt parempia vaihtoehtoja. Korjataan se!
Peittokuvien tapauksessa poista vain tyyli   background-image: url(hero.jpg); background-size: cover; ja aseta normaali kuva samaan säiliöön 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>


CrUX data is 28 days late.

Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.

Get Real-Time Data >>

  • Real-Time Insights
  • Faster Debugging
  • Instant Feedback
Taustakuvat ovat pahasta Core Web Vitals Taustakuvat ovat pahasta