Produto 1
Descrição adaptável
€19,99
Desempenho
Movimento reduzido, zoom, adaptabilidade
Respeitando preferências de movimento
Exemplo ruim
Animações padrão
Cartão saltitante
Esta animação dispara constantemente
Exemplo bom
Animações respeitosas
Cartão respeitoso
Animação leve apenas ao passar o mouse
Explicação: Usuários podem configurar seu sistema para reduzir animações. Esta preferência deve ser respeitada para evitar náuseas e distrações.
Suporte a zoom e tamanho de fonte grande
Exemplo ruim
Interface fixa
Produto 1
Descrição curta
€19,99
Produto 2
Descrição curta
€24,99
Exemplo bom
📏 Tamanho do texto: 100%
Interface adaptável
Produto 2
Descrição adaptável
€24,99
Explicação: A interface deve permanecer funcional e legível até 200% de zoom. Os textos devem se adaptar às preferências de tamanho de fonte do usuário.
Design adaptável e responsivo
Exemplo ruim
Interface desktop fixa
Logo
Entre em contato
Nossos detalhes de contato
Rua da Paz, 123
75001 Paris
+33 1 23 45 67 89
Exemplo bom
Interface adaptável
Logo
Entre em contato
Explicação: A interface deve funcionar em todos os dispositivos e orientações, com controles de tamanho apropriado para toque.
Lazy Loading: carregar apenas recursos visíveis
Exemplo ruim
❌ Carregar tudo de uma vez (Eager Loading)
Exemplo concreto: Um site de e-commerce com 50 produtos carrega todas as imagens imediatamente, mesmo aquelas no final da página que o usuário pode nunca ver.
📚 Termo técnico: Eager Loading = carregamento imediato de todos os recursos
- 📥 Problema 1: 50 imagens × 200 KB = 10 MB baixados imediatamente
- ⏱️ Problema 2: tempo de espera de 8-15 segundos antes de ver a página
- 📱 Problema 3: Consome dados móveis desnecessariamente
- 🔋 Problema 4: Estressa o processador e drena a bateria
📄 HTML (20 KB)
🎨 CSS (50 KB)
⚙️ JavaScript (200 KB)
🖼️ Imagem 1 visível (200 KB)
🖼️ Imagem 2 visível (200 KB)
🖼️ Imagem 3 no final da página (200 KB)
🖼️ Imagem 4 no final da página (200 KB)
🖼️ Imagem 5 no final da página (200 KB)
⏱️ Tempo total de carregamento: 8 segundos
📊 Dados consumidos: 1,27 MB (incluindo 600 KB desnecessários)
Exemplo bom
✅ Carregamento progressivo (Lazy Loading + Cache)
Exemplo concreto: O mesmo site de e-commerce primeiro carrega o conteúdo visível, depois as imagens subsequentes apenas quando o usuário rola a página.
📚 Termos técnicos: Lazy Loading = carregamento diferido • HTTP Cache = memória temporária do navegador
Teste as otimizações:
📄 HTML (20 KB) - Carregado
🎨 CSS (50 KB) - Carregado
⚙️ JavaScript (200 KB) - Carregado
🖼️ Imagem 1 visível (200 KB) - Carregada
🖼️ Imagem 2 visível (200 KB) - Carregada
🖼️ Imagem 3 (carregada ao rolar)
🖼️ Imagem 4 (carregada ao rolar)
🖼️ Imagem já vista (em cache, 0 KB)
⏱️ Tempo de carregamento inicial: 2 segundos
📊 Dados economizados: 600 KB (47%)
💡 Impacto na acessibilidade:
Velocidade (FCP)
First Contentful Paint mais rápido = página visível imediatamente
Dados móveis
Essencial para usuários com plano de dados limitado ou rede lenta (3G)
Bateria
Menos transferência de rede = economia significativa de energia
Dispositivos antigos
Menos recursos para processar = funciona em hardware antigo
Explicação: Lazy loading (carregamento diferido) permite carregar imagens e recursos apenas quando o usuário precisar deles, em vez de baixar tudo de uma vez quando a página carrega.