Producto 1
Descripción adaptativa
€19.99
Rendimiento
Movimiento reducido, zoom, adaptabilidad
Respetar las preferencias de movimiento
Mal ejemplo
Animaciones predeterminadas
Tarjeta que rebota
Esta animación se activa constantemente
Buen ejemplo
Animaciones respetuosas
Tarjeta respetuosa
Animación ligera solo al pasar el ratón
Explicación: Los usuarios pueden configurar su sistema para reducir animaciones. Esta preferencia debe respetarse para evitar náuseas y distracciones.
Soporte de zoom y tamaño de fuente grande
Mal ejemplo
Interfaz fija
Producto 1
Descripción corta
€19.99
Producto 2
Descripción corta
€24.99
Buen ejemplo
📏 Tamaño del texto: 100%
Interfaz adaptativa
Producto 2
Descripción adaptativa
€24.99
Explicación: La interfaz debe permanecer funcional y legible hasta un zoom del 200%. Los textos deben adaptarse a las preferencias de tamaño de fuente del usuario.
Diseño adaptativo y responsive
Mal ejemplo
Interfaz de escritorio fija
Logo
Contáctanos
Nuestros datos de contacto
123 Calle de la Paz
28001 Madrid
+34 91 123 45 67
Buen ejemplo
Interfaz adaptativa
Logo
Contáctanos
Explicación: La interfaz debe funcionar en todos los dispositivos y orientaciones, con controles de tamaño apropiado para el tacto.
Lazy Loading: cargar solo recursos visibles
Mal ejemplo
❌ Cargar todo de una vez (Eager Loading)
Ejemplo concreto: Un sitio de comercio electrónico con 50 productos carga todas las imágenes inmediatamente, incluso las que están al final de la página que el usuario puede que nunca vea.
📚 Término técnico: Eager Loading = carga inmediata de todos los recursos
- 📥 Problema 1: 50 imágenes × 200 KB = 10 MB descargados inmediatamente
- ⏱️ Problema 2: Tiempo de espera de 8-15 segundos antes de ver la página
- 📱 Problema 3: Consume innecesariamente el plan de datos móviles
- 🔋 Problema 4: Estresa el procesador y agota la batería
📄 HTML (20 KB)
🎨 CSS (50 KB)
⚙️ JavaScript (200 KB)
🖼️ Imagen 1 visible (200 KB)
🖼️ Imagen 2 visible (200 KB)
🖼️ Imagen 3 al final de página (200 KB)
🖼️ Imagen 4 al final de página (200 KB)
🖼️ Imagen 5 al final de página (200 KB)
⏱️ Tiempo de carga total: 8 segundos
📊 Datos consumidos: 1.27 MB (incluyendo 600 KB innecesarios)
Buen ejemplo
✅ Carga progresiva (Lazy Loading + Cache)
Ejemplo concreto: El mismo sitio de comercio electrónico primero carga el contenido visible, luego las imágenes posteriores solo cuando el usuario se desplaza.
📚 Términos técnicos: Lazy Loading = carga diferida • HTTP Cache = memoria temporal del navegador
Prueba las optimizaciones:
📄 HTML (20 KB) - Cargado
🎨 CSS (50 KB) - Cargado
⚙️ JavaScript (200 KB) - Cargado
🖼️ Imagen 1 visible (200 KB) - Cargada
🖼️ Imagen 2 visible (200 KB) - Cargada
🖼️ Imagen 3 (cargada al desplazarse)
🖼️ Imagen 4 (cargada al desplazarse)
🖼️ Imagen ya vista (en caché, 0 KB)
⏱️ Tiempo de carga inicial: 2 segundos
📊 Datos ahorrados: 600 KB (47%)
💡 Impacto en la accesibilidad:
Velocidad (FCP)
First Contentful Paint más rápido = página visible inmediatamente
Datos móviles
Esencial para usuarios con plan de datos limitado o red lenta (3G)
Batería
Menos transferencia de red = ahorro significativo de energía
Dispositivos antiguos
Menos recursos a procesar = funciona en hardware antiguo
Explicación: La carga diferida (lazy loading) permite cargar imágenes y recursos solo cuando el usuario los necesita, en lugar de descargar todo de una vez cuando se carga la página.