Quem aprova uma landing page de campanha costuma olhar a foto no layout e dar o assunto por encerrado. Só que o layout não mostra quando o navegador fica sabendo que aquela foto existe. Isso depende de como a imagem entra na página e merece uma linha no briefing, antes de a peça ir para o desenvolvimento.
Um caso fictício para enxergar o problema
A Casa Aurora, marca inventada para este texto, vai lançar uma campanha de colchões com uma landing page mobile. A capa é uma foto de quarto, o maior elemento da primeira tela. O time prepara duas versões, com os mesmos textos e o mesmo arquivo de imagem. Na versão A, a foto é um fundo aplicado pelo CSS. Na versão B, é uma imagem declarada no HTML, com largura e altura informadas.
Nosso raciocínio é simples: na versão A, o navegador só encontra a foto depois de receber e interpretar o CSS; na B, ela já aparece na leitura do HTML. A tabela traz a ordem que esperamos, não uma medição. Os tempos virão do seu teste.
| Etapa | A: capa no CSS | B: imagem no HTML |
|---|---|---|
| 1 | HTML é solicitado | HTML é solicitado |
| 2 | CSS é solicitado; a foto segue desconhecida | Foto e CSS são encontrados na leitura do HTML |
| 3 | CSS chega e é interpretado | Foto é solicitada sem depender da chegada do CSS |
| 4 | Foto enfim é solicitada | Foto ocupa o espaço já reservado |
Essa ordem importa porque o guia de LCP do web.dev pede que o recurso de destaque seja descoberto cedo e condena o carregamento adiado da imagem principal. O texto também lembra que imagens não recebem de saída a prioridade mais alta e apresenta o atributo fetchpriority como forma de sinalizar sua importância. Já o guia de CLS do web.dev lista imagens sem dimensões entre as causas mais comuns de deslocamento e orienta a reservar espaço para elas.
O teste que propomos
- Publique A e B no mesmo servidor, com a mesma foto e os mesmos textos.
- Use o mesmo aparelho e a mesma rede móvel, com cache desativado e a aba Rede das ferramentas do navegador aberta.
- Alterne A, B, A, B até completar cinco rodadas de cada versão. O número é uma escolha prática nossa, e a alternância ajuda a diluir oscilações da rede.
- Em cada rodada, anote a posição da requisição da foto, o que a iniciou (HTML ou CSS) e se ela começou antes ou depois de o CSS terminar.
- Grave a tela e observe se texto ou botão se movem quando a foto aparece.
Nosso critério de leitura: a versão B passa se, em todas as rodadas, a foto não depender do CSS para ser solicitada e nada se mover na primeira tela.
O que escrever no briefing
- Destaque: qual imagem deve dominar a primeira tela em cada largura prevista.
- Entrega: imagem no HTML, sem lazy loading, com fetchpriority em high se ela for mesmo o provável elemento de LCP.
- Espaço: largura e altura definidas para cada recorte aprovado.
- Aceite: captura da aba Rede mostrando a origem da requisição, mais o vídeo da carga.
Até onde esse teste vai
Ele mostra a ordem das requisições em um aparelho e uma rede. Não promete segundos ganhos nem efeito sobre conversão, e não substitui dados de usuários reais. Descobrir a foto mais cedo também não resolve um arquivo pesado. Se o time antecipar a capa em CSS por outro caminho, a comparação muda e precisa ser refeita. Ainda assim, a decisão fica melhor: em vez de pedir uma página rápida, o briefing passa a exigir uma ordem verificável.
Para aprofundar
- A Integração de Inteligência Artificial nas Recomendações de Produtos
- Maximalismo no Design Gráfico: Estética da Exuberância como Estratégia Visual
Sinal / IA & Tecnologia. Reportagem explicativa produzida com auxílio de IA e revisão editorial automatizada.
