Les images d'arrière-plan sont nuisibles
Apprenez pourquoi éviter les images d'arrière-plan sur votre site web, comment les trouver rapidement et comment résoudre ce problème
Les images d'arrière-plan sont nuisibles
Ceux d'entre vous qui me connaissent ou qui m'ont entendu parler ont peut-être déjà entendu mes propos sur les images d'arrière-plan. Pour les autres : je n'aime vraiment, vraiment pas les images d'arrière-plan. Dans cet article, j'expliquerai rapidement pourquoi je ne les aime pas, comment trouver rapidement les pages contenant des images d'arrière-plan et comment les corriger !
Pourquoi les images d'arrière-plan sont mauvaises pour les Core Web Vitals
Lors du chargement d'une page web, chaque élément a son moment et sa place. Grâce à certaines techniques modernes comme le chargement différé, le préchargement, le chargement asynchrone, la planification, la définition de la fetchpriority, etc., nous pouvons maîtriser presque toutes les ressources critiques. Sauf les images d'arrière-plan !
Considérez cet exemple réel :
Au quotidien, principalement sur les sites WordPress, je vois ce schéma. Toutes les images normales sont chargées en lazy loading et certaines images (ici les icônes de réseaux sociaux dans le pied de page) sont des images d'arrière-plan. Devinez ce qui se passe ?
<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>Vous l'avez peut-être deviné : les images d'arrière-plan hors écran sont mises en file d'attente de téléchargement avant l'image 'hero.jpg' bien plus importante qui deviendra généralement l'élément Largest Contentful Paint de la page.
Mais ce n'est pas tout !
Comme je l'ai dit, les images d'arrière-plan sont nuisibles ! C'est parce que, outre la priorité étrange qu'elles obtiennent parfois, les images d'arrière-plan manquent des fonctionnalités intéressantes dont bénéficient les images normales !
- Pas de lazy loading : il n'y a pas d'attribut loading pour les images d'arrière-plan
- Pas de décodage asynchrone : il n'y a pas d'attribut decoding pour les images d'arrière-plan
- Pas de fetchpriority : il n'y a pas d'attribut fetchpriority pour les images d'arrière-plan
- Sources d'images réactives : L'attribut image-set() pour les images d'arrière-plan n'a pas la même puissance de fonctionnalités que celle obtenue avec un bon responsive design.
- Pas d'attributs width et height. Ne pas pouvoir définir les simples attributs width et height vous obligera à utiliser des contournements nécessitant du code (plus de code est toujours plus lent que moins de code à complexité égale !)
- Pas de texte alt : alors que cela n
Trouver rapidement toutes les images d'arrière-plan sur une page
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!'); Cela vous affichera un tableau proprement formaté avec tous les noms des images d'arrière-plan et les initiateurs
Comment éviter les images d'arrière-plan
Les images d'arrière-plan sont facilement évitables. La méthode dépend de l'image elle-même. Il existe environ 2 méthodes.
Dans le cas d''images normales'
Vous ne me croiriez pas si je vous le disais, mais dans la majorité des cas où je trouve des images d'arrière-plan, la partie arrière-plan de l'image n'a même pas de but. Les images doivent juste 'être quelque part sur la page' et le background-image:url() est détourné à cette fin.
Si c'est le cas, ajoutez simplement une balise d'image normale et supprimez l'image d'arrière-plan de la feuille de style.
Dans le cas d'images de couverture :
Les images de couverture sont des images qui couvrent complètement un conteneur parent. Utiliser des images d'arrière-plan comme images de couverture a du sens car il y a longtemps, c'était la seule façon d'obtenir des images de couverture et je suppose que les gens s'en tiennent à ce qu'ils connaissent. Heureusement, de meilleures options s'offrent à nous. Alors corrigeons ça !
Dans le cas d'images de couverture, supprimez simplement le style background-image: url(hero.jpg); background-size: cover; et placez une image normale dans ce même conteneur et modifiez le CSS pour qu'il ressemble à ceci :
<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>Your dev team is busy.
Delegate the performance architecture to a specialist. I handle the optimization track while your team ships the product.
- Parallel Workflows
- Specialized Expertise
- Faster Delivery
