O que é o LCP (Largest Contentful Paint) e porque importa?
O LCP mede o tempo que o navegador demora a renderizar o maior elemento visível no ecrã (viewport). Geralmente, este elemento é uma imagem de destaque (hero image), um banner promocional ou um bloco de texto de grandes dimensões. Para o Google, um LCP ideal deve ocorrer em 2.5 segundos ou menos.
As imagens são as principais culpadas por um LCP lento. Quando uma imagem não está otimizada, o ficheiro é demasiado pesado para a ligação do utilizador, forçando o navegador a esperar preciosos segundos antes de mostrar o conteúdo principal. Isto resulta numa alta taxa de rejeição (bounce rate), pois o utilizador moderno raramente espera por uma página que parece "congelada".
Como a Otimização de Imagens Resolve o LCP
- Compressão Inteligente: Reduzir o peso do ficheiro sem perda visível de qualidade. Utilizar ferramentas como o ImageOptimizerPro permite poupar até 80% do espaço.
- Formatos de Próxima Geração: O uso de WebP e AVIF é crucial. Estes formatos oferecem uma relação compressão/qualidade muito superior aos antigos JPEG e PNG.
- Fetch Priority: Atribuir o atributo
fetchpriority="high"à imagem que constitui o LCP informa o navegador de que deve descarregar esse recurso antes de outros menos críticos.
CLS: O Inimigo da Estabilidade Visual
Já alguma vez tentou clicar num botão e, de repente, o conteúdo moveu-se e acabou por clicar num anúncio ou num link errado? Isso é o Cumulative Layout Shift (CLS) em ação. Esta métrica mede a soma total de todas as mudanças inesperadas de layout durante a vida de uma página. Um CLS aceitável deve ser inferior a 0.1.
No contexto das imagens, o CLS ocorre quase sempre quando o navegador não sabe quanto espaço deve reservar para uma imagem que ainda está a ser descarregada. Quando a imagem finalmente aparece, o texto que estava por baixo é "empurrado" para baixo, criando uma experiência frustrante.
A Importância de Definir Dimensões
A solução é simples, mas frequentemente esquecida: definir sempre atributos de largura (width) e altura (height) nas tags <img>. Ao fornecer estas dimensões, o navegador reserva o espaço exato (aspect ratio) antes mesmo de o ficheiro chegar, garantindo que o resto da página permanece estático.
Formatos Modernos: WebP vs AVIF
Para alcançar pontuações perfeitas nos Core Web Vitals, o uso de format