Product 1
Adaptive description
€19.99
Performance
Reduced motion, zoom, adaptability
Respecting motion preferences
Bad example
Default animations
Bouncing card
This animation triggers constantly
Good example
Respectful animations
Respectful card
Light animation on hover only
Explanation: Users can configure their system to reduce animations. This preference must be respected to avoid nausea and distractions.
Zoom and large font size support
Bad example
Fixed interface
Product 1
Short description
€19.99
Product 2
Short description
€24.99
Good example
📏 Text size: 100%
Adaptive interface
Product 2
Adaptive description
€24.99
Explanation: The interface must remain functional and readable up to 200% zoom. Texts must adapt to the user's font size preferences.
Adaptive and responsive design
Bad example
Fixed desktop interface
Logo
Contact us
Our contact details
123 Peace Street
75001 Paris
+33 1 23 45 67 89
Good example
Adaptive interface
Logo
Contact us
Explanation: The interface must work on all devices and orientations, with appropriately sized controls for touch.
Lazy Loading: load only visible resources
Bad example
❌ Load everything at once (Eager Loading)
Concrete example: An e-commerce site with 50 products loads all images immediately, even those at the bottom of the page that the user may never see.
📚 Technical term: Eager Loading = immediate loading of all resources
- 📥 Problem 1: 50 images × 200 KB = 10 MB downloaded immediately
- ⏱️ Problem 2: 8-15 second wait time before seeing the page
- 📱 Problem 3: Unnecessarily consumes mobile data allowance
- 🔋 Problem 4: Stresses the processor and drains battery
📄 HTML (20 KB)
🎨 CSS (50 KB)
⚙️ JavaScript (200 KB)
🖼️ Image 1 visible (200 KB)
🖼️ Image 2 visible (200 KB)
🖼️ Image 3 at bottom of page (200 KB)
🖼️ Image 4 at bottom of page (200 KB)
🖼️ Image 5 at bottom of page (200 KB)
⏱️ Total loading time: 8 seconds
📊 Data consumed: 1.27 MB (including 600 KB unnecessary)
Good example
✅ Progressive loading (Lazy Loading + Cache)
Concrete example: The same e-commerce site first loads visible content, then subsequent images only when the user scrolls.
📚 Technical terms: Lazy Loading = deferred loading • HTTP Cache = browser temporary memory
Test the optimizations:
📄 HTML (20 KB) - Loaded
🎨 CSS (50 KB) - Loaded
⚙️ JavaScript (200 KB) - Loaded
🖼️ Image 1 visible (200 KB) - Loaded
🖼️ Image 2 visible (200 KB) - Loaded
🖼️ Image 3 (loaded on scroll)
🖼️ Image 4 (loaded on scroll)
🖼️ Already seen image (cached, 0 KB)
⏱️ Initial loading time: 2 seconds
📊 Data saved: 600 KB (47%)
💡 Impact on accessibility:
Speed (FCP)
Faster First Contentful Paint = page visible immediately
Mobile data
Essential for users with limited data plan or slow network (3G)
Battery
Less network transfer = significant energy savings
Old devices
Fewer resources to process = works on old hardware
Explanation: Lazy loading (deferred loading) allows loading images and resources only when the user needs them, rather than downloading everything at once when the page loads.