Performance et éco-conception
Une page rapide et légère améliore l’usage sur des appareils et réseaux variés. Les notions suivantes permettent de mesurer les ralentissements et de réduire les ressources réellement nécessaires.
Les tests de laboratoire et les mesures réelles sont complémentaires. Une optimisation utile doit être vérifiée sur les appareils, réseaux et parcours réellement concernés.
A
AVIF
AVIF est un format d’image moderne offrant généralement une compression efficace, notamment pour les photographies, avec transparence et grande profondeur de couleur. Son encodage peut être plus lent et le gain n’est pas identique pour tous les visuels. Des tests visuels restent nécessaires avant de généraliser son usage.
C
Cache navigateur
Le cache navigateur conserve temporairement certaines réponses afin de ne pas les télécharger à chaque visite. Le serveur contrôle cette réutilisation grâce aux en-têtes HTTP et à la version des fichiers. Un cache bien réglé accélère les visites suivantes, tandis qu’une stratégie incorrecte peut afficher des ressources obsolètes.
CLS
Le CLS, ou Cumulative Layout Shift, mesure les déplacements inattendus du contenu pendant la vie de la page. Une image sans dimensions, une police ou un bloc injecté tardivement peuvent faire bouger ce que l’utilisateur était en train de lire ou de cliquer. Réserver l’espace nécessaire est une correction fréquente.
Voir aussi : Optimiser le CLS
Compression
La compression réduit la quantité de données transférées ou la taille d’un fichier. Les textes peuvent être compressés à la volée avec Brotli ou gzip, tandis que les images et vidéos utilisent des formats adaptés. Une compression excessive peut détériorer visiblement un média ; son efficacité dépend du type de contenu.
Core Web Vitals
Les Core Web Vitals sont un ensemble de métriques centrées sur l’expérience réelle : LCP pour le chargement du contenu principal, INP pour la réactivité et CLS pour la stabilité visuelle. Elles sont évaluées à partir de distributions de données, pas uniquement d’un test isolé. Elles complètent d’autres critères de qualité et d’accessibilité.
Voir aussi : LCP, INP, CLS, Documentation Core Web Vitals
E
Éco-conception web
L’éco-conception web cherche à réduire les ressources nécessaires sur l’ensemble du cycle de vie d’un service numérique, tout en répondant au besoin réel. Elle favorise la sobriété fonctionnelle, des parcours courts, des contenus légers, une architecture durable et une mesure régulière. Une page légère isolée ne suffit pas si le service encourage des usages inutiles.
I
INP
L’INP, ou Interaction to Next Paint, évalue la latence observée entre les interactions de l’utilisateur et la prochaine mise à jour visuelle. Une page peut charger vite mais répondre lentement si le thread principal est occupé par trop de JavaScript ou des traitements longs. L’INP considère plusieurs interactions au cours de la visite.
L
Lazy loading
Le lazy loading reporte le chargement d’une ressource jusqu’au moment où elle devient utile, souvent lorsqu’elle approche de la zone visible. Il réduit les données initiales pour les contenus situés plus bas. Il ne doit pas être appliqué à l’élément principal visible au chargement, sous peine de dégrader le LCP.
LCP
Le LCP, ou Largest Contentful Paint, mesure le moment où le plus grand élément de contenu visible dans la zone d’affichage est rendu. Il représente la perception du chargement principal. L’image héro, les polices, le serveur, les ressources bloquantes et le JavaScript peuvent fortement l’influencer.
Voir aussi : Optimiser le LCP
Lighthouse
Lighthouse est un outil d’audit automatisé qui analyse une page dans des conditions simulées et produit des diagnostics sur la performance, l’accessibilité, le SEO et les bonnes pratiques. Son score facilite la comparaison, mais il peut varier et ne remplace ni les données d’utilisateurs réels ni les tests manuels.
M
Minification
La minification retire du code les espaces, commentaires et formes d’écriture inutiles à son exécution afin de réduire les fichiers CSS ou JavaScript. Elle est généralement automatisée au build. Elle ne remplace pas la suppression du code inutile : un gros fichier minifié reste un gros fichier à télécharger et à exécuter.
O
Optimisation d’image
L’optimisation d’image consiste à choisir les bonnes dimensions, le bon format, une compression adaptée et un chargement pertinent. Servir une image de 3000 pixels pour l’afficher à 300 pixels gaspille du réseau et du décodage. Les attributs width et height contribuent aussi à éviter les déplacements de mise en page.
P
Poids de page
Le poids de page correspond à la quantité totale de données transférées pour afficher et utiliser une page dans un scénario donné. Images, vidéos et JavaScript en constituent souvent la plus grande part. Le poids ne résume pas toute la performance, mais il influence le temps de téléchargement, la consommation de données et l’impact environnemental.
R
Requête HTTP
Une requête HTTP est un message envoyé par un client, comme un navigateur, vers un serveur pour obtenir ou modifier une ressource. Une page peut déclencher des requêtes pour le HTML, les styles, les scripts, les images et les API. Leur nombre, leur taille, leur priorité et leur origine influencent le chargement.
S
SVG
SVG est un format vectoriel basé sur XML, adapté aux logos, icônes, schémas et illustrations géométriques. Il reste net quelle que soit la taille et peut être stylé ou animé. Pour une photographie complexe, un format matriciel est généralement plus adapté ; un SVG mal nettoyé peut aussi contenir du code inutile ou dangereux.
W
WebP
WebP est un format d’image conçu pour le web qui prend en charge la compression avec ou sans perte, la transparence et l’animation. Il permet souvent des fichiers plus légers que JPEG ou PNG à qualité comparable. Le résultat dépend du type d’image et des paramètres d’encodage.