Achtergrondafbeeldingen zijn slecht
Leer waarom u achtergrondafbeeldingen op uw website moet vermijden, hoe u snel achtergrondafbeeldingen kunt vinden en hoe u dit probleem kunt oplossen
Achtergrondafbeeldingen zijn slecht
Degenen onder jullie die mij kennen of mij hebben horen spreken, hebben mij misschien over achtergrondafbeeldingen horen praten. Degenen onder jullie die dat niet hebben: ik hou echt niet van achtergrondafbeeldingen. In dit artikel zal ik snel uitleggen waarom ik achtergrondafbeeldingen niet leuk vind, hoe u snel pagina's met achtergrondafbeeldingen kunt vinden en hoe u ze kunt oplossen!
Waarom achtergrondafbeeldingen slecht zijn voor de Core Web Vitals
Bij het laden van een webpagina heeft elk element zijn tijd en zijn plaats. Met sommige moderne technieken zoals deferring, preloading, async loading, scheduling, het definiëren van de fetchpriority enz enz kunnen we alle kritieke bronnen vrijwel onder controle krijgen. Behalve achtergrondafbeeldingen!
Overweeg dit praktijkvoorbeeld:
Dagelijks zie ik dit patroon, vooral op WordPress-sites. Alle normale afbeeldingen worden lazy geladen en sommige afbeeldingen (in dit geval de sociale iconen in de footer) zijn achtergrondafbeeldingen Kun u raden wat er gebeurt?
<html>
<head>
<style>
footer {
/* een marge van 100 vh zorgt ervoor dat de footer off-screen is !*/
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>
<!-- ja deze afbeelding is lazy loaded, want kleine foutjes gebeuren! -->
<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>
U raadt het misschien al: de offscreen achtergrondafbeeldingen worden eerder in de wachtrij geplaatst voor download dan de veel belangrijkere 'hero.jpg' afbeelding die meestal het largest contentful paint element op de pagina zal worden.
Maar dat is niet alles!
Zoals ik al zei, achtergrondafbeeldingen zijn slecht! Dat komt omdat, afgezien van de rare prioriteit die ze soms krijgen, achtergrondafbeeldingen de coole functies missen die normale afbeeldingen krijgen!
- Geen lazy loading: er is geen loading attribuut voor achtergrondafbeeldingen
- Geen async decoding: er is geen decoding attribuut voor achtergrondafbeeldingen
- Geen fetchpriority: er is geen fetchpriority attribuut voor achtergrondafbeeldingen
- Responsieve afbeeldingsbronnen: Het image-set() attribuut voor achtergrondafbeeldingen heeft niet dezelfde kracht van functies die u krijgt met goed responsief ontwerp.
- Geen width en height attribuut. Door niet het eenvoudige width en height attribuut in te kunnen stellen, zult u workarounds gebruiken die code vereisen (meer code is altijd langzamer dan minder code met dezelfde complexiteit!)
- Geen alt tekst: terwijl dit niet
Vind snel alle achtergrondafbeeldingen op een pagina
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('Geen achtergrondafbeeldingen op deze pagina!');
Dit toont u een netjes geformatteerde tabel met alle namen van de achtergrondafbeeldingen en de initiators
Hoe achtergrondafbeeldingen te vermijden
Achtergrondafbeeldingen zijn gemakkelijk te vermijden. Hoe u dit doet, hangt af van de afbeelding zelf. Er zijn grofweg 2 methoden.
In het geval van 'normale afbeeldingen'
U zou het niet geloven als ik u vertelde, maar in de meeste gevallen waar ik achtergrondafbeeldingen vind, heeft het achtergrondgedeelte van de afbeelding niet eens een doel. De afbeeldingen moeten gewoon 'ergens op de pagina staan' en de background-image:url() wordt misbruikt voor dit doel.
Als dit het geval is, voeg dan gewoon een normale afbeeldingstag toe en verwijder de achtergrondafbeelding uit de stylesheet.
In het geval van cover afbeeldingen:
Cover afbeeldingen zijn afbeeldingen die een oudercontainer volledig bedekken. Het gebruik van achtergrondafbeeldingen als cover afbeeldingen is logisch omdat dit lange tijd de enige manier was om cover afbeeldingen te krijgen en ik denk dat mensen gewoon vasthouden aan wat ze weten. Gelukkig zijn er betere opties voor ons beschikbaar. Dus laten we het oplossen!
In het geval van cover afbeeldingen verwijdert u gewoon de stijl background-image: url(hero.jpg); background-size: cover;en plaatst u een normale afbeelding in diezelfde container en bewerkt u de CSS zodat deze er als volgt uitziet:
<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>Ask AI why your INP spiked.
CoreDash is the only RUM tool with MCP support. Connect it to your AI agent and query your Core Web Vitals data in natural language. No more clicking through dashboards.
See How It Works
