Produit 1
Description adaptative
19.99€
Performance
Reduced motion, zoom, adaptabilité
Respect des préférences de mouvement
Mauvais exemple
Animations par défaut
Carte qui rebondit
Cette animation se déclenche constamment
Bon exemple
Animations respectueuses
Carte respectueuse
Animation légère au survol uniquement
Explication : Les utilisateurs peuvent configurer leur système pour réduire les animations. Il faut respecter cette préférence pour éviter les nausées et distractions.
Support du zoom et des grandes tailles de police
Mauvais exemple
Interface fixe
Produit 1
Description courte
19.99€
Produit 2
Description courte
24.99€
Bon exemple
📏 Taille du texte : 100%
Interface adaptative
Produit 2
Description adaptative
24.99€
Explication : L'interface doit rester fonctionnelle et lisible jusqu'à 200% de zoom. Les textes doivent s'adapter aux préférences de taille de police de l'utilisateur.
Design adaptatif et responsive
Mauvais exemple
Interface fixe desktop
Logo
Contactez-nous
Nos coordonnées
123 Rue de la Paix
75001 Paris
+33 1 23 45 67 89
Bon exemple
Interface adaptive
Logo
Contactez-nous
Explication : L'interface doit fonctionner sur tous les appareils et orientations, avec des contrôles de taille appropriée pour le tactile.
Lazy Loading : charger uniquement les ressources visibles
Mauvais exemple
❌ Tout charger d'un coup (Eager Loading)
Exemple concret : Un site e-commerce avec 50 produits charge toutes les images immédiatement, même celles en bas de page que l'utilisateur ne verra peut-être jamais.
📚 Terme technique : Eager Loading = chargement immédiat de toutes les ressources
- 📥 Problème 1 : 50 images × 200 Ko = 10 Mo téléchargés immédiatement
- ⏱️ Problème 2 : Temps d'attente de 8-15 secondes avant de voir la page
- 📱 Problème 3 : Consomme inutilement le forfait data mobile
- 🔋 Problème 4 : Sollicite le processeur et vide la batterie
📄 HTML (20 Ko)
🎨 CSS (50 Ko)
⚙️ JavaScript (200 Ko)
🖼️ Image 1 visible (200 Ko)
🖼️ Image 2 visible (200 Ko)
🖼️ Image 3 en bas de page (200 Ko)
🖼️ Image 4 en bas de page (200 Ko)
🖼️ Image 5 en bas de page (200 Ko)
⏱️ Temps de chargement total : 8 secondes
📊 Données consommées : 1.27 Mo (dont 600 Ko inutiles)
Bon exemple
✅ Chargement progressif (Lazy Loading + Cache)
Exemple concret : Le même site e-commerce charge d'abord le contenu visible, puis les images suivantes uniquement quand l'utilisateur scroll.
📚 Termes techniques : Lazy Loading = chargement différé • Cache HTTP = mémoire temporaire du navigateur
Testez les optimisations :
📄 HTML (20 Ko) - Chargé
🎨 CSS (50 Ko) - Chargé
⚙️ JavaScript (200 Ko) - Chargé
🖼️ Image 1 visible (200 Ko) - Chargé
🖼️ Image 2 visible (200 Ko) - Chargé
🖼️ Image 3 (chargée au scroll)
🖼️ Image 4 (chargée au scroll)
🖼️ Image déjà vue (en cache, 0 Ko)
⏱️ Temps de chargement initial : 2 secondes
📊 Données économisées : 600 Ko (47%)
💡 Impact sur l'accessibilité :
Rapidité (FCP)
First Contentful Paint plus rapide = page visible immédiatement
Données mobiles
Essentiel pour les utilisateurs avec forfait limité ou réseau lent (3G)
Batterie
Moins de transfert réseau = économie d'énergie significative
Vieux appareils
Moins de ressources à traiter = fonctionne sur matériel ancien
Explication : Le lazy loading (chargement différé) permet de charger les images et ressources uniquement quand l'utilisateur en a besoin, plutôt que tout télécharger d'un coup au chargement de la page.