Imagem LCP pré-carregada
A Silktide verifica se a imagem principal da sua página — o maior elemento que os visitantes veem quando ela carrega — poderia aparecer mais cedo se o navegador recebesse instruções para obtê-la antecipadamente. As páginas parecem carregadas quando o maior conteúdo aparece, por isso essa imagem costuma determinar a rapidez percebida de toda a página.
O momento em que essa imagem aparece é medido como Largest Contentful Paint (LCP), uma das do Google.
Por que isso é importante
Os navegadores transferem os ficheiros aproximadamente pela ordem em que os descobrem, e a imagem principal costuma ser descoberta tarde — escondida atrás de folhas de estilo e scripts, referenciada a partir de ou inserida por um script. O resultado é uma página que cria rapidamente a sua estrutura e depois deixa um espaço vazio onde deveria estar o conteúdo mais importante.
Como os visitantes avaliam a velocidade pelo momento em que o conteúdo principal aparece, e o Google considera o LCP na classificação dos resultados de pesquisa, instruir o navegador a dar prioridade a este ficheiro é uma das correções de maior impacto disponíveis para melhorar a velocidade.
Como corrigir
- Pré-carregue a imagem para que o navegador a obtenha desde o início do carregamento:
<!-- Em <head>: obtenha imediatamente a imagem principal -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Em alternativa, se a imagem for um elemento
<img>simples, adicione-lhe diretamentefetchpriority="high". - Nunca faça desta imagem —
loading="lazy"na imagem principal atrasa precisamente aquilo que deveria aparecer primeiro. - Prefira um elemento
<img>simples a uma imagem de fundo em CSS para o elemento visual principal, para que o navegador possa descobri-la antecipadamente por si próprio.
Como a Silktide testa isto
- Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e a localização de teste configurados para os seus testes de velocidade.
- Identifica o maior elemento de conteúdo visível à medida que a página carrega. Se for uma imagem, verifica quando o navegador a descobriu e transferiu.
- Se obter a imagem mais cedo fizesse com que aparecesse mais cedo, comunica o problema com a estimativa de tempo poupado.
Resolução de problemas
A imagem principal muda entre páginas ou dispositivos
As instruções de pré-carregamento são específicas de cada página, e o elemento “maior” pode ser diferente nos layouts para computador e dispositivos móveis. A lógica do modelo pode gerar o pré-carregamento correto para cada página, e os atributos media e imagesrcset da instrução permitem lidar com variantes responsivas.
Pré-carreguei a imagem, mas o problema continua a ser identificado
O URL do pré-carregamento tem de corresponder exatamente ao que a página apresenta no final — uma variante de tamanho diferente ou um URL reescrito por uma não é considerado válido. Verifique também se a instrução está no próprio da página, e não se foi adicionada posteriormente por um script, o que anula o objetivo.