O site carrega rapidamente o menu, mas a fotografia que domina a primeira tela demora a aparecer. Uma das causas possíveis é aplicar carregamento adiado a todas as imagens, incluindo a capa principal. A mesma regra que economiza recursos mais abaixo pode atrasar o elemento que o visitante espera ver imediatamente.
Identifique a imagem realmente importante
Comece por uma página e uma largura de tela. O maior elemento visível pode ser uma imagem, mas também pode ser um bloco de texto. Leia o diagnóstico do teste de desempenho e confirme qual elemento está sendo medido antes de alterar atributos no HTML.
O guia de otimização do LCP do web.dev recomenda facilitar a descoberta e a priorização do recurso principal. Quando a imagem é candidata ao LCP e aparece no início, adiá-la com lazy loading tende a contrariar esse objetivo. Isso não significa que toda imagem da página deva receber prioridade alta.
Compare dois grupos de imagens
No primeiro grupo, coloque a capa ou destaque que aparece na abertura. No segundo, coloque miniaturas, relacionadas e imagens de trechos distantes. Avalie as regras por componente, porque o mesmo arquivo pode aparecer em posições diferentes e precisar de comportamentos diferentes.
Em um portal ilustrativo, a imagem da matéria é imediata quando ocupa o destaque, mas adiada quando aparece numa lista longa de relacionadas. A decisão acompanha sua função no layout, não apenas o nome do arquivo ou a categoria editorial.
Uma verificação que cabe na rotina
- Confirme a posição da capa no celular e no computador.
- Inspecione o elemento e veja se recebeu loading lazy sem necessidade.
- Observe quando o download começa em relação ao HTML e ao CSS.
- Confira dimensões reservadas para evitar deslocamento quando a imagem aparecer.
- Teste a alteração no mesmo cenário e compare mais de uma execução.
Se o download começa cedo, mas demora a concluir, investigue tamanho, formato e servidor. Se começa tarde, procure dependência de JavaScript, regra de carregamento ou descoberta tardia no CSS. Alterar a prioridade não resolve todos esses problemas ao mesmo tempo.
Cuidado com carrosséis
Em um carrossel, a primeira imagem visível e as imagens escondidas não precisam disputar a mesma atenção. Carregar todos os slides como urgentes pode aumentar a transferência inicial. A equipe deve verificar qual slide aparece primeiro, como os próximos são preparados e se o tamanho do contêiner fica estável durante a troca.
Não use somente a nota final para aprovar a mudança. Anote elemento, início do download e percepção na primeira tela. Considere a variação normal entre testes e mantenha condições comparáveis, principalmente no celular.
O trabalho complementa o diagnóstico de LCP mobile e a revisão dos formatos de imagem. Uma boa configuração entrega cedo o que faz falta agora e adia o que pode esperar, sem transformar todas as imagens em recursos prioritários.
Fonte: web.dev — otimizar Largest Contentful Paint
0 comentários
Participe da conversa. Todos os comentários passam por moderação.