Obrazy tła to zło
Dowiedz się, dlaczego warto unikać obrazów tła na swojej stronie, jak szybko znaleźć obrazy tła i jak naprawić ten problem
Obrazy tła to zło
Ci z was, którzy mnie znają lub słyszeli moje wystąpienia, mogli słyszeć, jak mówię o obrazach tła. Ci z was, którzy nie słyszeli: naprawdę, naprawdę nie lubię obrazów tła. W tym artykule szybko wyjaśnię, dlaczego nie lubię obrazów tła, jak szybko znaleźć strony z obrazami tła i jak je naprawić!
Dlaczego obrazy tła są złe dla Core Web Vitals
Podczas ładowania strony internetowej każdy element ma swój czas i miejsce. Dzięki nowoczesnym technikom, takim jak odraczanie, preloading, ładowanie asynchroniczne, planowanie, definiowanie fetchpriority itp., możemy w dużej mierze kontrolować wszystkie krytyczne zasoby. Z wyjątkiem obrazów tła!
Rozważ ten przykład z życia wzięty:
Na co dzień, głównie na stronach WordPress, widzę ten wzorzec. Wszystkie normalne obrazy są ładowane leniwie, a niektóre obrazy (w tym przypadku ikony społecznościowe w stopce) to obrazy tła. Czy zgadniesz, co się dzieje?
<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>Pewnie zgadłeś: obrazy tła poza ekranem są kolejkowane do pobrania przed znacznie ważniejszym obrazem 'hero.jpg' który zazwyczaj staje się elementem Largest Contentful Paint na stronie.
Ale to nie wszystko!
Jak mówiłem, obrazy tła to zło! Dzieje się tak, ponieważ oprócz dziwnego priorytetu, jaki czasami otrzymują, obrazom tła brakuje fajnych funkcji, które mają normalne obrazy!
- Brak lazy loading: dla obrazów tła nie ma atrybutu loading
- Brak asynchronicznego dekodowania: dla obrazów tła nie ma atrybutu decoding
- Brak fetchpriority: dla obrazów tła nie ma atrybutu fetchpriority
- Responsywne źródła obrazów: Atrybut image-set() dla obrazów tła nie ma takiej samej mocy funkcji, jaką uzyskujesz przy dobrym responsywnym designie.
- Brak atrybutów width i height. Brak możliwości ustawienia prostych atrybutów width i height zmusi cię do stosowania obejść wymagających kodu (więcej kodu jest zawsze wolniejsze niż mniej kodu o tej samej złożoności!)
- Brak tekstu alt: chociaż to nie
Szybko znajdź wszystkie obrazy tła na stronie
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!'); Wyświetli to czysto sformatowaną tabelę ze wszystkimi nazwami obrazów tła i inicjatorami
Jak unikać obrazów tła
Obrazów tła można łatwo uniknąć. Sposób zależy od samego obrazu. Istnieją z grubsza 2 metody.
W przypadku „zwykłych obrazów”
Nie uwierzysz, ale w większości przypadków, w których znajduję obrazy tła, część tła obrazu nie ma nawet celu. Obrazy po prostu „muszą być gdzieś na stronie”, a background-image:url() jest niewłaściwie używane w tym celu.
Jeśli tak jest, po prostu dodaj normalny tag obrazu i usuń obraz tła z arkusza stylów.
W przypadku obrazów cover:
Obrazy cover to obrazy, które całkowicie pokrywają kontener nadrzędny. Używanie obrazów tła jako obrazów cover ma pewien sens, ponieważ dawno temu był to jedyny sposób na uzyskanie obrazów cover i chyba ludzie trzymają się tego, co znają. Na szczęście mamy do dyspozycji lepsze opcje. Więc naprawmy to!
W przypadku obrazów cover po prostu usuń styl background-image: url(hero.jpg); background-size: cover; i umieść normalny obraz w tym samym kontenerze i edytuj CSS, aby wyglądał tak:
<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.
- Real-Time Insights
- Faster Debugging
- Instant Feedback
