gitadmin/sass-imobiliaria
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
sass-imobiliaria/specs/032-performance-homepage/spec.md
MatheusAlves96 cf5603243c
Some checks failed
CI/CD → Deploy via SSH / Build & Push Docker Images (push) Successful in 1m0s
Details
CI/CD → Deploy via SSH / Deploy via SSH (push) Successful in 4m35s
Details
CI/CD → Deploy via SSH / Validate HTTPS & Endpoints (push) Failing after 46s
Details
feat: features 025-032 - favoritos, contatos, trabalhe-conosco, area-cliente, navbar, hero-light-dark, performance-homepage 
- feat(025): favoritos locais com FavoritesContext, HeartButton, PublicFavoritesPage
- feat(026): central de contatos admin (leads/contatos unificados)
- feat(027): configuração da página de contato via admin
- feat(028): trabalhe conosco - candidaturas com upload e admin
- feat(029): UX área do cliente - visitas, comparação, perfil
- feat(030): navbar UX - menu mobile, ThemeToggle, useFavorites
- feat(031): hero light/dark - imagens separadas por tema, upload, preview, seed
- feat(032): performance homepage - Promise.all parallel fetches, sessionStorage cache,
  preload hero image, loading=lazy nos cards, useInView hook, will-change carrossel,
  keyframes em index.css, AgentsCarousel e HomeScrollScene via props
- fix: light mode HomeScrollScene - gradiente, cores de texto, scroll hint

migrations: g1h2i3j4k5l6 (source em leads), h1i2j3k4l5m6 (contact_config),
            i1j2k3l4m5n6 (job_applications), j2k3l4m5n6o7 (hero theme images)
2026-04-22 22:35:17 -03:00

3.7 KiB
Raw Blame History

Spec — 032: Performance Homepage

Identificação

  • ID: 032
  • Nome: performance-homepage
  • Prioridade: Alta
  • Tipo: Refatoração / Otimização
  • Dependências: Nenhuma nova tabela ou endpoint. Apenas frontend.

Problema

A página inicial apresenta waterfall de requests, imagem hero sem priorização correta e re-renders desnecessários que degradam os Core Web Vitals (LCP, CLS, INP). Detalhes completos em performance-audit.md.

Objetivo

Atingir LCP < 2.5 s, CLS < 0.1 e INP < 150 ms na página inicial sem alterar a aparência visual ou quebrar funcionalidades existentes.

Escopo

Incluído

  • Paralelização dos 3 fetches da home (homepageConfig, featuredProperties, agents)
  • Preload dinâmico da imagem hero quando URL estiver disponível
  • fetchPriority="high" + loading="eager" + decoding="async" na hero image
  • loading="lazy" nas imagens dos PropertyRowCard dentro da home
  • Mover @keyframes fadeDown de inline para index.css
  • will-change: transform no track do AgentsCarousel
  • Hook compartilhado useInView para RiseCard
  • Cache de homepageConfig em sessionStorage com TTL de 5 minutos
  • Skeleton de altura fixa na área hero para evitar CLS
  • React.memo em PropertyRowCard e AgentSlide
  • Consolidação de resolvedTheme / isLight para evitar chamada dupla ao ThemeContext

Excluído

  • Mudanças no backend
  • Mudanças em outras páginas que não sejam dependências diretas
  • SSR / SSG
  • CDN ou otimização de infraestrutura
  • Bundle splitting (separado, escopo de build)

Requisitos Funcionais

ID Requisito
RF-01 Todos os dados da home devem ser buscados em paralelo no mount de HomePage
RF-02 A imagem hero deve ter fetchPriority="high" quando backgroundImage estiver disponível
RF-03 Um <link rel="preload"> deve ser inserido no <head> assim que backgroundImage for resolvida
RF-04 As imagens dos cards de propriedades devem ter loading="lazy"
RF-05 AgentsCarousel deve receber agents e loading via props em vez de fazer fetch próprio
RF-06 HomeScrollScene deve receber properties e loadingProperties via props
RF-07 homepageConfig deve ser cacheado em sessionStorage por 5 minutos
RF-08 O skeleton da hero deve ter min-height: 100svh antes do config carregar para evitar CLS

Requisitos Não Funcionais

ID Requisito
RNF-01 LCP medido via Lighthouse deve ser < 2.5 s em conexão Fast 3G emulada
RNF-02 CLS deve ser < 0.1
RNF-03 INP deve ser < 150 ms
RNF-04 Nenhuma regressão visual nos temas light e dark
RNF-05 Build TypeScript sem erros após todas as mudanças
RNF-06 Nenhuma mudança na API pública dos componentes exceto as necessárias para passar dados via props

Impacto em Componentes

Componente Tipo de mudança
HomePage.tsx Paralelizar fetches, preload, cache, passar props
HomeScrollScene.tsx Receber props de dados, mover keyframes, consolidar theme
AgentsCarousel.tsx Receber props em vez de fetch interno, will-change
PropertyRowCard.tsx loading="lazy" no SlideImage
index.css Adicionar @keyframes fadeDown
hooks/useInView.ts Criar hook novo

Critérios de Aceite

  • Lighthouse (Mobile, Fast 3G) reporta LCP < 2.5 s
  • Lighthouse reporta CLS < 0.1
  • DevTools Network mostra os 3 fetches disparando simultaneamente
  • Segunda visita à home não faz request a /homepage-config dentro do TTL
  • Nenhum erro TypeScript (npm run build passa)
  • Tema light e dark funcionam visualmente como antes
  • AgentsCarousel e cards de destaque renderizam normalmente