Site 3D pesa? Como o monólito da Brave Cross foi projetado para 60 fps no celular

Pesa quando é mal montado. Na medição de laboratório da Brave Cross em outubro de 2026, a home com o monólito 3D transferiu 404 KB, bloqueou a thread principal por 30 ms e não teve nenhum deslocamento de layout. Os 60 fps são meta de projeto, e o custo que sobrou é outro.

Por que um site 3D fica pesado?

O peso de um site 3D aparece em quatro lugares. O primeiro é o download: modelo, texturas e bibliotecas. O segundo é o bloqueio: decodificar geometria e compilar shaders na thread principal, com a página surda ao toque.

O terceiro é a estabilidade: um canvas que nasce sem espaço reservado empurra o texto para baixo. O quarto é o quadro a quadro. Segundo o guia de desempenho de renderização do web.dev (atualizado em dezembro de 2023), a maioria das telas atualiza 60 vezes por segundo, o navegador tem 16,66 ms por quadro e o seu código deveria terminar em cerca de 10 ms.

Os três primeiros aparecem nos Core Web Vitals. O web.dev define como bom um LCP de até 2,5 s, um INP de até 200 ms e um CLS de até 0,1, medidos no percentil 75 das visitas reais. Explicamos cada métrica em Core Web Vitals em 2026. O quarto, a fluidez, nenhuma dessas métricas mede.

Quanto pesa a home da Brave Cross, medida de verdade?

Rodamos o Lighthouse 12.8.2 na home da Brave Cross em 7 de outubro de 2026, com celular emulado, rede simulada e CPU quatro vezes mais lenta, numa única execução. É dado de laboratório: explica a arquitetura, não promete resultado.

Dos 404 KB, os scripts somam 219 KB, as fontes 124 KB e o HTML 45 KB. O visitante vê o pôster enquanto o 3D chega por trás.

Onde a home perde pontos, e por quê?

A pontuação de performance foi 78 de 100, na faixa "precisa melhorar". O motivo não é o 3D. O elemento que o Lighthouse marca como LCP é o texto do herói, que entra desfocado por uma cortina de abertura de cerca de 1,2 s.

A cortina roda no compositor, pela Web Animations API, sem shader síncrono, e por isso não bloqueia nada. Mas ela adia de propósito o momento em que o texto aparece inteiro. Trocamos velocidade medida por uma entrada encenada, coerente com o que defendemos em A primeira dobra é o julgamento.

É uma escolha de projeto, e está na lista para revisar. Quem decide é o dado de campo, no percentil 75 das visitas reais.

O que "60 fps" exige, se o Lighthouse não mede fps?

O Lighthouse mede carregamento, não fluidez. Por isso não dizemos que o monólito "mede" 60 fps: ele foi projetado para 60 fps, e a prova está no painel de desempenho do navegador e num celular real, rolando a página. A meta exige quatro disciplinas.

Só transform e opacity no que se move. O guia de animações do web.dev recomenda restringir animações a essas duas propriedades para que fiquem na etapa de composição. Na Brave Cross, toda animação infinita segue essa regra.

Canvas adiado. O 3D não disputa o primeiro quadro. Primeiro vêm texto, pôster e layout; o modelo carrega depois. Os scripts de terceiros esperam uma interação ou 4 s.

Um só loop de animação. Cena, rolagem e efeitos obedecem a um único relógio. Dois loops concorrentes dividem os mesmos 16,66 ms e perdem quadros.

Geometria comprimida. Nos projetos de 3D com geometria pesada, exportamos do Blender em GLB com Draco; o monolith.glb, de 36 KB, vai ao ar sem Draco. A documentação do DRACOLoader do three.js avisa o custo: a geometria fica bem menor, mas o aparelho gasta tempo decodificando, o que o carregador distribui em Web Workers e faz em WASM quando o navegador permite. Comparamos as ferramentas em Three.js, Spline ou React Three Fiber.

Como otimizar um GLB sem perder o desenho?

As técnicas são abertas e documentadas. O glTF Transform traz comandos para comprimir geometria com Draco, comprimir geometria e animação com Meshopt, converter texturas para WebP ou para KTX com Basis (ETC1S e UASTC), e um comando optimize que combina etapas. Segundo o Khronos Group, o KTX 2.0 mantém a textura comprimida também na memória da GPU, reduzindo memória, banda e consumo de energia.

Fonte: medição de laboratório da Brave Cross (Lighthouse 12.8.2, celular emulado) e dados do repositório, outubro de 2026. Limites de referência do web.dev, consultado em outubro de 2026.

Os arquivos que compõem o herói estão em Anatomia de um herói 3D.

Perguntas frequentes

Site 3D deixa o site lento no celular?

Não obrigatoriamente. Na medição de laboratório da Brave Cross em outubro de 2026, a home com um monólito 3D transferiu 404 KB e bloqueou a thread principal por 30 ms, porque nenhum GLB entra no primeiro quadro do celular. A lentidão vem de modelo e shaders carregados antes do conteúdo.

Quanto deve pesar um arquivo GLB para um site?

Não existe um número universal: depende de quantos modelos a cena tem e de quando cada um carrega. O monólito da home da Brave Cross tem 36 KB e entra depois do primeiro quadro. A regra prática é medir o que chega no primeiro carregamento e adiar o resto, comprimindo geometria com Draco ou Meshopt.

Draco ou Meshopt, qual usar?

Os dois comprimem geometria; o glTF Transform documenta que o Meshopt também comprime animação. A documentação do three.js avisa que a compressão Draco custa tempo de decodificação no aparelho. Teste os dois no seu modelo e meça o arquivo e o tempo de abertura num celular real.

Animação prejudica o Core Web Vitals?

Pode prejudicar o LCP, se adiar o conteúdo principal, e o CLS, se empurrar o layout. O web.dev considera bom um LCP de até 2,5 s e um CLS de até 0,1. Na home da Brave Cross o CLS é zero, mas a cortina de abertura leva o LCP de laboratório a 4,6 s, uma escolha em revisão.

Como medir os fps de um site?

O Lighthouse não mede fps: ele avalia carregamento. A fluidez se mede gravando a rolagem no painel de desempenho do navegador e contando os quadros perdidos, de preferência num celular real. O alvo vem do web.dev (dezembro de 2023): a 60 Hz, cada quadro tem 16,66 ms, e o código deve caber em cerca de 10 ms.

Quer um site 3D que abre rápido?

O 3D não precisa ser o vilão da performance. Com pôster leve, canvas adiado, animação no compositor e geometria comprimida, o peso fica sob controle; o que sobra são escolhas de encenação, a medir e rever. O panorama completo está no guia de site 3D, e o cuidado com quem pede menos movimento está em Animação sem enjoar.

Para aprender a construir com essa disciplina, a Brave Cross Education tem cursos de Front-End e Next.js. Se você quer um site 3D medido desde o primeiro quadro, fale com a Brave Cross.