Le immagini di sfondo sono il male
Scopri perché evitare le immagini di sfondo sul tuo sito web, come trovarle rapidamente e come risolvere questo problema
Le immagini di sfondo sono il male
Quelli di voi che mi conoscono o mi hanno sentito parlare potrebbero avermi sentito parlare delle immagini di sfondo. Quelli di voi che non lo sanno: davvero davvero non mi piacciono le immagini di sfondo. In questo articolo spiegherò rapidamente perché non mi piacciono le immagini di sfondo, come trovare rapidamente le pagine con immagini di sfondo e come risolverle!
Perché le immagini di sfondo sono dannose per i Core Web Vitals
Quando si carica una pagina web, ogni elemento ha il suo tempo e il suo posto. Con alcune tecniche moderne come il deferring, il preloading, il caricamento asincrono, lo scheduling, la definizione della fetchpriority ecc ecc possiamo tenere praticamente sotto controllo tutte le risorse critiche. Tranne le immagini di sfondo!
Consideriamo questo esempio reale:
Quotidianamente, soprattutto nei siti WordPress, vedo questo schema. Tutte le immagini normali sono caricate in lazy loading e alcune immagini (in questo caso le icone social nel footer) sono immagini di sfondo. Riesci a indovinare cosa succede?
<html>
<head>
<style>
footer {
/* a margin of 100 vh wil make the footer off-screen !*/
>.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>Potresti averlo indovinato: le immagini di sfondo fuori schermo vengono messe in coda per il download prima della ben più importante immagine 'hero.jpg' che di solito diventerà l'elemento Largest Contentful Paint della pagina.
Ma non è tutto!
Come ho detto, le immagini di sfondo sono il male! Questo perché, oltre alla strana priorità che a volte ricevono, le immagini di sfondo mancano delle fantastiche funzionalità che le immagini normali hanno!
- Nessun lazy loading: non esiste un attributo loading per le immagini di sfondo
- Nessuna decodifica asincrona: non esiste un attributo decoding per le immagini di sfondo
- Nessuna fetchpriority: non esiste un attributo fetchpriority per le immagini di sfondo
- Sorgenti immagine responsive: L'attributo image-set() per le immagini di sfondo non ha la stessa potenza di funzionalità che si ottiene con un buon design responsive.
- Nessun attributo width e height. Non poter impostare i semplici attributi width e height ti costringerà a usare soluzioni alternative che richiedono codice (più codice è sempre più lento di meno codice con la stessa complessità!)
- Nessun testo alt: anche se questo non
Trovare rapidamente tutte le immagini di sfondo su una 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('No background images on this page!'); Questo ti mostrerà una tabella formattata in modo pulito con tutti i nomi delle immagini di sfondo e i rispettivi initiator
Come evitare le immagini di sfondo
Le immagini di sfondo sono facilmente evitabili. Come farlo dipende dall'immagine stessa. Ci sono sostanzialmente 2 metodi.
Nel caso di 'immagini normali'
Non ci crederesti se te lo dicessi, ma nella maggior parte dei casi in cui trovo immagini di sfondo, la parte background dell'immagine non ha nemmeno uno scopo. Le immagini devono semplicemente 'essere da qualche parte nella pagina' e il background-image:url() viene usato impropriamente per questo scopo.
Se questo è il caso, aggiungi semplicemente un normale tag immagine e rimuovi l'immagine di sfondo dal foglio di stile.
Nel caso di immagini cover:
Le immagini cover sono immagini che coprono completamente un contenitore padre. Usare le immagini di sfondo come immagini cover ha un certo senso perché molto tempo fa questo era l'unico modo per ottenere immagini cover e immagino che le persone si attengano a ciò che conoscono. Fortunatamente ci sono opzioni migliori a nostra disposizione. Quindi risolviamolo!
Nel caso di immagini cover, rimuovi semplicemente lo stile background-image: url(hero.jpg);background-size: cover; e posiziona un'immagine normale nello stesso contenitore e modifica il CSS in questo modo:
<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>Performance is a Feature.
Treating speed as an afterthought fails. Build a performance culture with a dedicated 2-sprint optimization overhaul.
- 2-Sprint Overhaul
- Culture Building
- Sustainable Speed
