Como Melhorar a Pontuação no PageSpeed com srcset

Se a sua pontuação no PageSpeed cai quando adiciona uma imagem hero, o problema costuma ser simples.

O que está realmente a acontecer

O PageSpeed penaliza páginas que servem imagens demasiado grandes para ecrãs pequenos. Se a sua imagem hero tem 1200px de largura e um utilizador móvel a descarrega na mesma, isso é largura de banda desperdiçada e reflete-se na sua pontuação.

A solução é o srcset. Indica ao browser qual versão da imagem carregar com base na viewport do dispositivo.

Como implementar

Primeiro, gere várias dimensões da sua imagem:

• 300w, para mobile
• 768w, para tablets
• 1200w ou 1536w, para desktop

Depois, referencie as três no seu HTML:

<img
  srcset="/assets/img/hero.webp 1200w, 
          /assets/img/hero-768px.webp 768w,
          /assets/img/hero-300px.webp 300w"
  src="/assets/img/hero.webp"
  alt="Descrição da imagem">

O browser escolhe a versão certa. Não precisa de uma CDN nem de um serviço de imagens.

Algumas notas práticas

Use a largura real da sua imagem original como o maior tamanho no srcset. Se a sua imagem tem 1536px de largura, esse deve ser o seu valor máximo.

Para automatizar a geração de imagens, o sharp é uma ferramenta fiável em Node.js. Encaixa em qualquer pipeline de build e trata do redimensionamento sem recurso a serviços externos.

Esta alteração permite que a maioria dos sites passe de uma pontuação reprovada nas imagens para uma aprovada. Não é complicado, apenas não é óbvio se ainda não se deparou com isto antes.

Fale connosco se quiser ajuda com a performance do seu website.