O que e:
Core Web Vitals sao metricas do Google que medem a experiencia real do usuario. Sao tres indicadores essenciais: LCP (carregamento), INP (interatividade) e CLS (estabilidade visual). Afetam diretamente o SEO e a percepcao de qualidade do site.
Por que aprender:
Google usa Core Web Vitals como fator de ranking. Sites com boas metricas aparecem mais alto nas buscas. Alem disso, usuarios abandonam sites lentos - cada segundo de delay pode custar conversoes. Entender essas metricas permite comunicar requisitos de performance para IAs de forma precisa.
Conceitos-chave:
LCP (Largest Contentful Paint)
Tempo para renderizar o maior elemento visivel
INP (Interaction to Next Paint)
Tempo de resposta a interacoes do usuario
CLS (Cumulative Layout Shift)
Estabilidade visual - quanto o layout "pula"
O que e:
Loading states sao estados visuais de carregamento que comunicam ao usuario que algo esta acontecendo. Incluem spinners, progress bars, mensagens e animacoes que mantem o usuario informado e reduzem a frustracao durante esperas.
Por que aprender:
Um loading state bem desenhado faz 3 segundos parecerem 1. Sem feedback visual, usuarios pensam que o site travou. E uma tecnica de design que melhora drasticamente a percepcao de performance, mesmo sem mudar a velocidade real. Spinners e progress bars sao decisoes de design, nao apenas tecnicas.
Conceitos-chave:
Spinner
Indicador circular de carregamento indeterminado
Loading Dots
Pontos pulsantes para estados de espera
Progress Bar
Barra que mostra progresso determinado
Button Loading
Estado de carregamento em botoes
O que e:
Skeleton screens sao placeholders animados que mostram a estrutura do conteudo antes dele carregar. Em vez de um spinner generico, o usuario ve "fantasmas" dos elementos reais - boxes cinzas onde texto e imagens vao aparecer. Usado por Facebook, YouTube, LinkedIn.
Por que aprender:
Estudos mostram que skeleton screens fazem o tempo percebido de carregamento parecer ate 30% menor. O cerebro processa a estrutura e "antecipa" o conteudo, criando uma sensacao de progresso continuo. E a tecnica de perceived performance mais eficaz disponivel.
Conceitos-chave:
Skeleton de Card
Skeleton de Lista
Dica: O efeito shimmer (brilho que passa) indica movimento e progresso. Skeletons estaticos parecem travados.
O que e:
Lazy loading e carregar conteudo sob demanda - so quando o usuario precisa. Imagens abaixo da dobra, videos, e componentes pesados sao carregados apenas quando entram na viewport. A parte "visual" e como apresentar esse carregamento de forma elegante.
Por que aprender:
Uma pagina com 20 imagens nao precisa carregar todas de uma vez. Lazy loading reduz o tempo inicial de carregamento drasticamente, economiza banda do usuario e melhora LCP. O aspecto visual (blur, fade-in, placeholder) transforma uma tecnica em experiencia de design.
Conceitos-chave:
Blur-up / LQIP
Low Quality Image Placeholder - imagem minuscula borrada que da lugar a HD
Fade-in
Imagem aparece gradualmente quando carrega
Color Placeholder
Cor dominante da imagem como placeholder
loading="lazy"
Atributo nativo HTML para lazy loading
<img loading="lazy" src="..." />
O que e:
Perceived performance e como o usuario SENTE a velocidade, nao a velocidade real medida. Truques psicologicos podem fazer 3 segundos parecerem 1. E a diferenca entre metricas tecnicas e experiencia humana. Um site de 2s que parece lento e pior que um de 3s que parece rapido.
Por que aprender:
Nem sempre podemos tornar tudo instantaneo - APIs externas, processamento pesado, rede lenta. Mas SEMPRE podemos melhorar a percepcao. Entender psicologia de espera permite criar experiencias que "enganam" o cerebro de forma etica, mantendo usuarios engajados.
Conceitos-chave:
Resposta Imediata
Qualquer interacao deve ter feedback visual em menos de 100ms. Mesmo que o processamento demore, o botao deve mudar de estado instantaneamente.
Progresso Aparente
Progress bars que comecam rapido e desaceleram parecem mais rapidas que lineares. O cerebro registra o inicio como "ja esta acontecendo".
Animacoes de Transicao
Transicoes suaves entre estados mascaram tempos de carregamento. O usuario processa a animacao enquanto dados carregam em background.
Optimistic UI
Mostrar resultado antes da confirmacao do servidor. Like no Twitter aparece imediatamente, mesmo que a requisicao ainda esteja em andamento.
O que e:
Progressive enhancement e uma filosofia: comece com o basico funcional, adicione melhorias em camadas. O conteudo principal funciona sem JavaScript. CSS adiciona visual. JS adiciona interatividade. Se algo falhar, as camadas abaixo ainda funcionam.
Por que aprender:
Sites que dependem 100% de JavaScript para mostrar qualquer conteudo falham em conexoes lentas, bloqueadores, e bugs. Progressive enhancement garante que a experiencia MINIMA sempre funcione. E uma abordagem de resiliencia que beneficia todos os usuarios, especialmente em condicoes adversas.
Conceitos-chave:
Camada 1: HTML (Conteudo)
Semantica e conteudo puro. Links funcionam. Formularios submetem. Informacao esta acessivel. Funciona em qualquer navegador, qualquer dispositivo.
Camada 2: CSS (Apresentacao)
Layout, cores, tipografia. Se CSS falhar, conteudo ainda e legivel. Animacoes e transicoes sao bonus, nao requisitos.
Camada 3: JavaScript (Comportamento)
Interatividade avancada, validacao em tempo real, carregamento dinamico. Se JS falhar, formularios ainda submetem via HTML nativo.
Graceful Degradation vs Progressive Enhancement
Graceful Degradation: Comeca com tudo, remove para navegadores antigos.
Progressive Enhancement: Comeca basico, adiciona para navegadores modernos.
PE e mais robusto e recomendado.
🎯 Vocabulario para Prompts
Use estes termos ao conversar com IAs para comunicar conceitos de performance de forma precisa:
Core Web Vitals
otimizar para LCP abaixo de 2.5 segundos
evitar layout shift (CLS baixo)
melhorar tempo de interacao (INP)
Loading States
spinner de carregamento sutil
estado de loading no botao
progress bar com porcentagem
Skeleton Screens
skeleton loader com shimmer effect
placeholder animado durante carregamento
skeleton que espelha estrutura do card
Lazy Loading
lazy loading de imagens abaixo da dobra
blur-up placeholder (LQIP)
fade-in suave quando imagem carrega
Perceived Performance
feedback imediato em cliques (menos de 100ms)
optimistic UI para acoes do usuario
transicoes suaves entre estados
Progressive Enhancement
funcionar sem JavaScript ativado
HTML semantico como base
JS como enhancement, nao dependencia
📝 Resumo do Modulo
Proximo Modulo:
3.4 - Acessibilidade Universal: WCAG, semantica HTML e design inclusivo