Imagens costumam ser os bytes mais pesados de uma página, então otimizá-las é a maior vitória de LCP. Três alavancas: formatos modernos, dimensionamento responsivo e prioridade de carga.
AVIF e WebP comprimem muito menor que JPEG/PNG na mesma qualidade (AVIF frequentemente 50% menor que JPEG). Sirva-os com um fallback para que navegadores antigos ainda funcionem:
Não envie uma imagem de 2000px para um celular de 400px. O srcset permite que o navegador escolha o tamanho certo para o dispositivo:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
O sizes diz ao navegador com que largura a imagem é renderizada para que ele escolha a menor fonte suficiente.
fetchpriority="high", loading="eager" e considere um preload.loading="lazy" para que não seja buscada até ser necessária.Sempre mantenha width/height para evitar CLS.
Um LCP lento é, na maioria das vezes, apenas uma imagem de destaque grande demais. Conhecer formatos (AVIF/WebP), srcset para a resolução certa e a prioridade correta — além de não fazer lazy-load da imagem de LCP — é o kit de ferramentas prático que os entrevistadores esperam, e costuma ser a mudança de maior impacto em um site real.
Uma biblioteca de perguntas de entrevista de TI com respostas detalhadas — de Júnior a Sênior.
Doar