Imagens superdimensionadas
Quando as imagens são carregadas, o tamanho intrínseco do arquivo baixado é verificado em relação ao tamanho real da imagem na página. O tamanho real é calculado usando o tamanho renderizado da imagem com CSS aplicado, multiplicado pela razão de pixels do dispositivo. Se a imagem baixada for muito maior (mais de 1200px maior em qualquer dimensão), este aviso é acionado. Baixar imagens superdimensionadas pode tornar o carregamento da página mais lento e ter um efeito negativo nas Core Web Vitals.
Elemento LCP com lazy loading
O maior elemento de conteúdo em uma página durante o carregamento é considerado o "Elemento LCP", que se relaciona com Largest Contentful Paint, uma das Core Web Vitals. Aplicar lazy loading em um elemento LCP terá um forte efeito negativo na performance da página. Com esta estratégia, o navegador precisa completar os cálculos de layout para determinar se o elemento está no viewport antes de iniciar o download da imagem. Como resultado, um aviso é acionado quando o Angular detecta que o elemento LCP recebeu o atributo loading="lazy".
@debugging
Use a URL da imagem fornecida no aviso do console para encontrar o elemento <img> em questão.
Formas de corrigir imagens superdimensionadas
- Use uma imagem de origem menor
- Adicione um
srcsetse múltiplos tamanhos forem necessários para diferentes layouts. - Mude para usar a diretiva de imagem integrada do Angular (
NgOptimizedImage), que gera srcsets automaticamente.
Formas de corrigir elemento LCP com lazy loading
- Altere o atributo
loadingpara um valor diferente como"eager". - Mude para usar a diretiva de imagem integrada do Angular (
NgOptimizedImage), que permite priorizar imagens LCP facilmente.
Desativando Avisos de Performance de Imagem
Ambos os avisos podem ser desativados individualmente, em todo o site, usando um provider na raiz da sua aplicação:
providers: [ { provide: IMAGE_CONFIG, useValue: { disableImageSizeWarning: true, disableImageLazyLoadWarning: true } },],