Dans le monde du développement web durable, la performance ne se résume pas à la vitesse ; il s’agit aussi d’une utilisation efficace des ressources. Si la propriété CSS will-change est un outil puissant pour fluidifier les animations, elle peut aussi avoir un impact négatif sur l’autonomie de la batterie et la mémoire des appareils mobiles. Voici comment auditer et optimiser son utilisation sur votre GPU.
Qu’est-ce que la propriété will-change ?
La propriété CSS `will-change` signale au navigateur qu’un élément spécifique, comme une carte ou un menu, va être animé ou transformé. Le navigateur anticipe alors le traitement de cet élément en le plaçant dans sa propre couche de composition sur le GPU. Cela évite au thread principal de redessiner la page entière à chaque déplacement d’un petit élément. En résumé, cette propriété optimise la mémoire du périphérique pour une expérience visuelle plus fluide.
Quand l’utiliser (et quand l’éviter) ?
La propriété « will-change » est un outil de précision, pas de généralité. Elle est idéale pour les petits éléments : micro-interactions, déclencheurs de menus mobiles ou boutons d’action flottants. La surface de ces éléments étant très réduite, le coût en mémoire est négligeable, tandis que le gain en expérience utilisateur est important.
En revanche, il est préférable de l’éviter pour les grandes sections ou les conteneurs d’arrière-plan. Placer une image 1920×1080 sur son propre calque peut instantanément consommer une grande partie de la VRAM. Son utilisation excessive sur de grandes zones entraîne une « explosion de calques », ce qui, paradoxalement, ralentit le site, décharge la batterie des appareils mobiles et augmente l’empreinte carbone numérique de la session utilisateur.
Comment mesurer le « poids » sur le GPU ?
Pour vérifier si votre site consomme beaucoup de ressources GPU, vous pouvez analyser vos calques directement dans la console des outils de développement. Le script ci-dessous calcule la surface totale en pixels de chaque élément promu et la multiplie par un facteur de mémoire standard (3 octets par pixel) pour afficher la surcharge cachée :
function reportWillChangeWeights() {
// Récupérer tous les éléments visibles avec l’attribut will-change
const elements = Array.from(document.querySelectorAll(‘*’)).filter(el => {
const style = getComputedStyle(el);
return style.willChange && style.willChange !== ‘auto’ && style.display !== ‘none’;
});
let totalPixels = 0;
console.log(`Found ${elements.length} elements with will-change:`);
elements.forEach(el => {
const rect = el.getBoundingClientRect();
const area = rect.width * rect.height;
const weight = area * 3; // facteur de mémoire GPU approximatif
totalPixels += weight;
console.log(el, `→ will-change weight: ${Math.round(weight).toLocaleString()} px`);
});
console.log(‘————————————-‘);
console.log(`Poids total approximatif des pixels will-change: ${Math.round(totalPixels).toLocaleString()} px`);
}
reportWillChangeWeights();
Bonne pratique : Supprimez will-change une fois l’animation terminée.
Pour une durabilité maximale, considérez will-change comme un état temporaire. Au lieu de le laisser dans votre CSS globale, appliquez-le via JavaScript juste avant une interaction et supprimez-le une fois l’opération terminée. Cela permet de préserver les ressources de l’appareil et de réduire sa consommation d’énergie. Voici un extrait de code JavaScript pour activer ou désactiver l’attribut `willChange` :
function enableWillChange() {
const box = document.getElementById(“box”);
box.style.willChange = “transform”;
}
function disableWillChange() {
const box = document.getElementById(“box”);
box.style.willChange = “auto”; // ou “”
}
Conclusion :
Optimiser la vitesse et la durabilité, c’est prendre soin du matériel de l’utilisateur. En utilisant `willChange` sur les petits éléments et en l’évitant sur les grandes sections, vous créez un site à la fois performant et respectueux de l’environnement.