Files

manoel.neto 9ab2beb3ea perf: servir imagens de conteúdo em webp e descrever sizes corretamente (MAN-109)

Fecha a meta de LCP ≤ 2,5 s da SPEC §6.6 em todas as páginas, nos dois presets.
Continuação direta do commit anterior: com fontes e marca resolvidas, o elemento
de LCP de toda página no mobile passou a ser a imagem do hero, e o Load Delay de
1,88 s era contenção de banda pura.

## Variantes webp

`ResponsiveImage::generate()` escreve uma variante `.webp` ao lado de cada
variante no formato original, e `x-media.image` a oferece num
`<source type="image/webp">`. O `<img>` continua apontando para o formato
original: o `<source>` é preferência, não substituição, então nada quebra em
quem não decodifica webp, e mídia antiga sem irmãos webp renderiza `<img>` puro
como antes.

O `<picture>` recebe `display: contents` porque os chamadores estilizam o `<img>`
com classes como `h-full w-full object-cover` que resolvem contra o pai grid ou
flex — um wrapper inline quebraria isso.

O nome do arquivo acrescenta a extensão em vez de trocá-la
(`photo-720.jpg.webp`): uploads usam UUID, então colisão já era improvável, mas
`photo-720.webp` colidiria com a variante webp de um `photo.png`.

## sizes que descreve a realidade

Nenhuma imagem do site ocupa a viewport inteira — todas ficam dentro de
`container-amare`, que reserva 1,5rem de padding de cada lado. Declarar `100vw`
fazia uma viewport de 412 px em DPR 1,75 pedir 721 px e pular para a variante de
960 para desenhar uma caixa de 637 px. Errar por um pixel custava um terço a mais
de bytes em toda página.

Com `calc(100vw - 3rem)` a home passa a usar a variante de 720: 74 KiB, contra
143 KiB no início da investigação. Foi também por isso que 720 entrou em
`ResponsiveImage::WIDTHS` — sem ela o salto de 480 para 960 é grande demais para
a viewport mobile mais comum.

## Efeito medido

Mobile, mediana de 3 execuções: home 3,39 → 2,49 s; portfolio-detalhe
3,01 → 2,18 s; servicos 2,63 → 2,03 s; portfolio 1,58 s; sobre 1,58 s;
contato 1,50 s. Desktop no máximo 0,65 s. Peso total da home 798 → 347 KiB.

Contra o início da investigação (`2e43fde`): home 4,58 → 2,49 s com score de
performance 83 → 98.

A home passa **em cima da linha** — a pior das três execuções deu 2,57 s. Está
documentado como aprovada por margem, não com folga, e os levers restantes estão
listados em docs/evidence/lighthouse/README.md em ordem de custo.

Os 16 baselines visuais não mudaram: nenhum seeder gera variantes e
`media:generate-variants` não roda no runner visual, então naquele ambiente
`availableVariants()` volta vazio e o componente renderiza `<img>` puro. A
cobertura do caminho com variantes fica em MediaImageComponentTest e
ResponsiveImageTest, não nos baselines — anotado como lacuna conhecida.

Co-Authored-By: Claude noreply@anthropic.com
AI-Assisted: yes
AI-Tool: claude-code

2026-08-10 14:43:00 -03:00

17 KiB

Raw Blame History

Lighthouse — local-sizes

Origem: http://127.0.0.1:8000
Lighthouse: 12.8.2
Navegador: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/151.0.0.0 Safari/537.36
Coletado em: 2026-08-10T17:38:33.741Z
Execuções por página/preset: 3 (reportada a de LCP mediano)
Commit: 65919d4
Seeder: ContentSeeder

Metas SPEC §6.6: LCP ≤ 2,5 s · CLS ≤ 0,1 · INP ≤ 200 ms · zero erro de console.

página	preset	perf	a11y	BP	SEO	LCP	FCP	TTFB servidor	LCP min–max
contato	desktop	100	100	100	100	0.36 s	0.25 s	91 ms	0.36 s – 0.37 s
contato	mobile	100	100	100	100	1.50 s	0.92 s	66 ms	1.50 s – 1.51 s
home	desktop	100	100	100	100	0.53 s	0.25 s	110 ms	0.53 s – 0.54 s
home	mobile	98	100	100	100	2.49 s	0.92 s	77 ms	2.48 s – 2.57 s
portfolio-detalhe	desktop	100	100	100	100	0.65 s	0.25 s	81 ms	0.65 s – 0.66 s
portfolio-detalhe	mobile	99	100	100	100	2.18 s	0.90 s	77 ms	2.18 s – 2.18 s
portfolio	desktop	100	100	100	100	0.36 s	0.25 s	72 ms	0.36 s – 0.49 s
portfolio	mobile	100	100	100	100	1.58 s	0.91 s	71 ms	1.58 s – 1.58 s
servicos	desktop	100	100	100	100	0.36 s	0.24 s	59 ms	0.36 s – 0.38 s
servicos	mobile	99	100	100	100	2.03 s	0.90 s	62 ms	1.58 s – 2.03 s
sobre	desktop	100	100	100	100	0.36 s	0.25 s	51 ms	0.36 s – 0.37 s
sobre	mobile	100	100	100	100	1.58 s	0.91 s	93 ms	1.58 s – 1.58 s