Imagens que aparecem inicialmente no site, que precisam ser carregadas “mais rápidas”, o ideal é que além de estar otimizada, tenha o formato WebP ou AVIF.
Além disso é possível adicionar atributos específicos para a imagem, para que o navegador saiba que aquela imagem precisa ser carregada ‘mais rápida’.
1. fetchpriority=”high”
Isso informa ao navegador que essa imagem deve ser carregada o mais rápido possível.
<img src="hero.webp" alt="Imagem Hero" width="1920" height="1080" fetchpriority="high">2. decoding=”async”
Isso permite que o navegador processe a imagem sem bloquear a renderização da página.
<img src="hero.webp" alt="Imagem Hero" width="1920" height="1080" decoding="async">3. preload no head
Além da tag img, você pode usar um link no head para indicar que o navegador deve carregar essa imagem o quanto antes:
<link rel="preload" as="image" href="hero.webp" imagesrcset="hero.webp 1920w, hero-small.webp 768w" imagesizes="100vw">4. fetchpriority=”high” e decoding=”async” na mesma imagem
Se quiser pode usar os 2 atributos na mesma imagem, além de inserir o preload no head.
<img src="hero.webp" alt="Imagem Hero" width="1920" height="1080" fetchpriority="high" decoding="async">Não é recomendado fazer isso para todas as imagens que o site vai abrir, a ideia é usar isso nas principais, aquelas que aparecem primeiro.
Por exemplo: se tem um slide ou imagem de fundo logo no topo do site, é nessa imagem que vou fazer isso, pois será a primeira a ser carregada no site.