Lazy-loading e aceleração UX

1) Objetivos e princípios

• Reduzir o TTI/LCP através de um caminho crítico.
• Estabilizar layout (CLS baixo) com dimensões previsíveis.
• Manter a bateria e o tráfego no mobil.
• Elevar conversão: o usuário vê a ação antes.

Princípios: prioridade → progresso → previsibilidade. Primeiro conteúdo crítico, depois preenchimento progressivo e melhorias pós-preenchimento.

2) Caminho crítico de renderização

HTML crítico: Execute «above-the-fold» imediatamente.
CSS crítico: inline ≤ 10-15 KB; o resto é 'media = «prince»' + swap/pré-operação.
JS como «defer »/« async», dividir-se em chancas, carregar a lógica nas rotas.
Fontes: 'font-display: swap' optional ', pré-processamento WOFF2, fallback' s do sistema.

3) Priorizar recursos de rede

Precisnect para CDN/fontes/imagens (TCP + TLS com antecedência).
O DNS prefetch para terceiros domínios.
Pretoad imagens críticas/fontes/script.
Priority Hants ('importance =' high 'low', 'fetchpriority =' high 'para a imagem hero').
HTTP/3/QUIC: menos latência; O CDN-edge está mais próximo do usuário.
Políticas em dinheiro: 'imutável' para assets versionados; ETag/Last-Modificed corretos.

4) Progressive Rendering e estados de download

Skeletons/Shimmer em vez de spinners - progresso visual sem «salto».
Placeholders com tamanho fixo (cartões, miniaturas) - CLS zero.
Streaming/Chunked HTML: fornecer rapidamente o esqueleto e depois complementar o conteúdo.
Optimistic UI (cuidado): ação instantânea com validação posterior.

5) Lazy-loading de mídia

Imagens: 'loading =' lazy ',' decoding = 'async', formatos de AVIF/WebP (folhetim JPEG/PNG).
Responsive: 'srcset '/' sizes' sob DPR/largura diferentes; não carregue 3 x onde você tiver 1 x suficiente.
Altura previsível: 'width/height' ou CSS 'aspect-ratio'.
Vídeo: 'Preteload =' metadata ', poster pós-zoom, auto-ausa fora viewport.
Ícones: sprite/inline SVG; evitar as demais solicitações HTTP.

6) Componentes preguiçosos e rotas

Código-splitting: importação dinâmica por rotas/widgets.
Componentes-ilhas/hidratação parcial - Revitalize apenas as áreas interativas.
SSR/SSG + ISR: Redefinir HTML no servidor, acalmar-se.
Suspense/Defer (no quadro usado): descomposição de dados e UI.

7) Listas e tabelas enormes

Virtualização (windowing): render apenas a área visível + tampão.
Pré-acionamento Anclar: mantenha a posição durante a reposição dos pacotes.
Atualizações Batch - Minimizar redesenhos em scroll.
Fixed-row height ou 'contain-intrinsic-size' para tamanhos previsíveis.

8) Aceleradores CSS e navegadores

'conteúdo-visibilidade: auto': navegador omite o invisível (cálculo mínimo).
'contain '/' will-mudança': limite a área de influência dos estilos/layout.
Animações: Apenas a trans/opacity; evitar efeitos pesados layout/paint.
Shadow e blur - econômico, especialmente nas listas.

9) Gerenciamento de eventos e carga JS

Ouvintes de scroll/tac passivos ('<passive: true 03').
Debounce/throttle em resize/scroll/processadores.
Inicialização adiada de widgets fora viewport (IntersectionObserver).
Transferência de computação pesada para Web Workers.

10) Contexto móvel

Rede: R3G/RPT mais lento - mais agressivo download preguiçoso.
Bateria e calor: limitar a frequência dos temporizadores, reduzir as animações FPS de fundo.
Compactação: Brotli para texto, correto 'Accept-Encoding'.
Prefetch Wi-Fi apenas para transições prováveis (histórico de cliques).

11) Disponibilidade e SEO

Conteúdo ≠ esqueleto: não interfere nos leitores; ordem lógica do foco.
HTML do servidor de texto-chave - Não esconda tudo atrás do JS.
Texto e cabeçalhos Alt permanecem disponíveis até a carga.
Conteúdo Lazy não deve bloquear rotas do teclado.

12) Métricas e metas

LCP (hero-imagem/cabeçalho): ≤ 2,5 s (mobile).
INP (resposta à entrada): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3 s.
Bytes over the wire (first view): orçamento rigoroso (por exemplo, ≤ de 200-300 KB creta. recursos).
Scroll-jank: <1% quadros> 16,7 ms.

• 'lazy _ enqueued '/' lazy _ loaded' (id, vista, tamanho, latency),
• 'component _ hydrated' (tempo, peso JS),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• erros ('img _ erro', 'decode _ timeout').

13) Pattern para áreas típicas

Principal/catálogo: SSR + cartão skeleton, lazy imagens, filtros progressivos.
Cartão de produto/jogo: imagem de herói proload + high priority; galeria - lazy; As críticas são por clique.
Artigos longos/wiki: TOC, leitura avançada, lazy para mídia/blocos de código, sumário adiado.
Fitas Live: virtualização de linhas, «pausa de scroll automático», limite de tampão.

14) Antipattern

Spinner para tela inteira> 1-2 s sem progresso.
Lazy sem localizadores → saltos de layout (CLS ↑).
Carregar «tudo JS imediatamente» por um cenário raro.
Inligir fontes pesadas/imagens para a parte crítica.
Tamanhos imprevisíveis de cartão → conteúdo «vagabundo».
Carregamento preguiçoso de crítica (logo, texto hero) - quebra o LCP.
Não há retorno de posição depois de «para trás».

15) Folha de cheque de implementação (passo a passo)

Sprint 1 - Diagnóstico: Mede LCP/INP/CLS/TTFB; mapeie os recursos e o caminho crítico.
Sprint 2 - Crítica/prioridade: CSS/HTML crítico, 'precisnect '/' pronoad', reduza o nível JS.
Sprint 3 - Mídia: AVIF/WebP, 'srcset/sizes', tamanho fixo, lazy para não-hero.
Sprint 4 - Listas: virtualização, pré-produção, skeletons/shimmer.
Sprint 5 - Arquitetura: hidração parcial/ilhas, SSR/SSG/ISR, streaming.
Sprint 6 - Configuração fina: 'conteúdo-visibilidade', priority hants, debounce, Web Workers.
Sprint 7 - A/B e telemetria: compare opções de esqueletos, níveis de lazy, orçamentos.
Sprint 8 - Higiene de lançamento, versões de assetas, cash basting, estratégias rollback.

16) Glossário (breve)

Lazy-loading - download adiado de conteúdo invisível.
LCP/INP/CLS/TTFB/TTI/TBT - métricas básicas de velocidade UX.
Código-splitting/Hidração/Ilhas - técnicas de fragmentação e revitalização da UI.
A virtualização é o render de uma janela de lista visível.
Priority Hints/Precisect/Pronoad - Instruir ao navegador o que carregar antes.
Conteúdo-visibilidade - omissão de computação para conteúdo invisível.

17) Resultado

Lazy-loading não é «colocados 'loading =' lazy 'e pronto». Este sistema é um caminho crítico, formatos de mídia corretos, interatividade da ilha, virtualização e telemetria. Tornem o importante instantâneo, o secundário imperceptível e barato, e o layout previsível. Então o produto será rapidamente sentido em qualquer dispositivo e rede.