Sobre este problema HTML
O atributo loading indica ao navegador como priorizar o carregamento de uma imagem. Defini-lo como "lazy" adia o carregamento até a imagem estar próxima da viewport, o que pode melhorar o desempenho da página ao reduzir o tempo de carregamento inicial e poupar largura de banda. Defini-lo como "eager" instrui o navegador a carregar a imagem imediatamente, independentemente da sua posição na página. Quando o atributo é omitido, o navegador assume o comportamento padrão "eager".
Qualquer valor diferente destas duas strings exatas em minúsculas é inválido de acordo com a especificação HTML. Erros comuns incluem usar valores numéricos como "1" ou "0", valores do tipo booleano como "true" ou "false", variantes em maiúsculas como "Lazy", ou erros ortográficos como "laxy". Quando um navegador encontra um valor inválido, ignora o atributo e volta ao comportamento padrão de carregamento eager. Embora isto signifique que a página não será visualmente afetada, a otimização de lazy-loading pretendida não funcionará, e o HTML falhará a validação W3C.
Isto é importante por algumas razões:
-
Desempenho: Se você pretendia usar
"lazy"mas forneceu um valor inválido, todas as suas imagens carregarão de forma eager, anulando o propósito e potencialmente degradando a velocidade da página. - Conformidade com normas: Valores de atributos inválidos sinalizam potenciais bugs na sua marcação e podem causar problemas com ferramentas e parsers que esperam HTML bem-formado.
- Manutenibilidade: Marcação válida e previsível é mais fácil de manter e debuggar entre equipas e ao longo do tempo.
Para corrigir o problema, verifique o valor do atributo loading e substitua-o por uma das duas opções válidas. Se você quer carregamento adiado, use "lazy". Se você quer carregamento imediato (ou não precisa especificar), use "eager" ou simplesmente remova o atributo.
Exemplos
Valores inválidos
Cada um destes irá desencadear o erro de validação:
<!-- Valor numérico -->
<img src="photo.jpg" alt="A sunset over the ocean" loading="1">
<!-- Valor do tipo booleano -->
<img src="photo.jpg" alt="A sunset over the ocean" loading="true">
<!-- Valor com erro ortográfico -->
<img src="photo.jpg" alt="A sunset over the ocean" loading="laxy">
<!-- Maiúsculas incorretas -->
<img src="photo.jpg" alt="A sunset over the ocean" loading="Lazy">Correto: lazy loading
Use "lazy" para imagens que estão abaixo da dobra ou não imediatamente visíveis ao utilizador:
<img src="photo.jpg" alt="A sunset over the ocean" loading="lazy">Correto: eager loading
Use "eager" para imagens críticas que devem carregar imediatamente, como imagens hero ou logótipos:
<img src="logo.png" alt="Company logo" loading="eager">Correto: omitir o atributo
Como "eager" é o comportamento padrão, você pode simplesmente remover o atributo se quiser carregamento imediato:
<img src="logo.png" alt="Company logo">Uso prático em contexto
Um padrão comum e eficaz é carregar de forma eager as imagens acima da dobra enquanto faz lazy-loading de tudo o resto:
<!-- Imagem hero: carregar imediatamente -->
<img src="hero-banner.jpg" alt="Welcome to our store" loading="eager">
<!-- Imagens de produtos mais abaixo na página: adiar carregamento -->
<img src="product-1.jpg" alt="Running shoes" loading="lazy">
<img src="product-2.jpg" alt="Hiking boots" loading="lazy">
<img src="product-3.jpg" alt="Sandals" loading="lazy">
Note que o atributo loading também funciona em elementos iframe com os mesmos dois valores válidos: "lazy" e "eager".
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.