O LCP mede quanto tempo demora a aparecer o maior elemento visível quando a página abre, quase sempre a imagem do topo ou o título grande. Para o baixar, descubra primeiro que elemento é esse e depois ataque a causa dele: um servidor lento a começar a responder, uma imagem pesada, uma imagem adiada por engano ou um CSS que atrasa o desenho. Mexer em tudo ao mesmo tempo só confunde.
Passo 1: descobrir qual é o elemento
| 1 |
Abra o PageSpeed Insights, cole o endereço da página que importa (não só a inicial) e escolha o separador do telemóvel.
|
|
| 2 |
Nos diagnósticos procure a linha «Largest Contentful Paint element». Ela mostra o elemento exacto: uma imagem, um bloco de texto ou um fundo.
|
|
| 3 |
Anote os números antes de mexer em nada. Sem um “antes”, o “depois” não prova coisa nenhuma. Como ler as ferramentas está em medir a velocidade do site.
|
|
Passo 2: ver de que se compõe a espera
O LCP não é um número só. É uma soma de quatro esperas, e cada uma tem o seu remédio.
| A espera |
Como se nota |
O que fazer |
| O servidor demora a responder |
A página inteira arranca tarde, mesmo com poucas imagens. |
Cache de páginas e menos trabalho no PHP. Veja TTFB alto. |
| O navegador só descobre a imagem tarde |
A imagem vem de um CSS (background-image), de um script ou de um carrossel. |
Pôr a imagem como <img> normal no HTML, sem a adiar. |
| A imagem demora a descarregar |
O ficheiro tem muito mais pixels ou peso do que o ecrã mostra. |
Reduzir as dimensões, comprimir, usar WebP ou AVIF. Veja optimização de imagens. |
| O desenho fica bloqueado |
A imagem já chegou mas só aparece depois. |
Menos CSS e JavaScript no arranque e fontes com font-display. Veja os avisos do PageSpeed. |
Passo 3: as correcções que mais resultado dão
| 1 |
Não adie a imagem do topo. O atributo loading="lazy" serve para o que está fora do ecrã. Se estiver na imagem principal, o navegador espera para a pedir. Alguns temas e plugins põem-no em todas as imagens: confira o HTML.
|
|
| 2 |
Diga ao navegador que ela é prioritária. Na imagem principal pode usar fetchpriority="high", e quando ela só aparece por CSS ou por script, uma linha <link rel="preload" as="image" href="..."> no cabeçalho adianta o pedido.
|
|
| 3 |
Dê-lhe o tamanho certo. Uma fotografia de telemóvel de vários megabytes numa caixa pequena obriga cada visitante a descarregá-la inteira. Reduza antes de enviar.
|
|
| 5 |
Repita o teste duas vezes e fique com o valor do meio. A primeira visita a uma página em cache é sempre a mais lenta.
|
|
|
Um carrossel (slider) no topo é dos piores casos. A imagem é pedida por um script, às vezes só depois de outro script carregar, e o LCP paga tudo isso. Se o LCP é o seu problema, uma imagem fixa e bem dimensionada resolve mais do que qualquer ajuste.
|
|
No telemóvel o elemento pode ser outro. Um título grande pode ganhar à imagem num ecrã pequeno. Teste sempre no separador do telemóvel e veja qual é o elemento ali. Os limites que a Google considera bons ou maus estão em web.dev e mudam: confirme-os lá.
|
|
Já viu qual é o elemento do LCP e o tempo continua alto? Envie-nos o endereço da página e o relatório, e dizemos-lhe o que é do servidor e o que é do site.
Abrir um pedido de suporte
|
PRODUTO RECOMENDADO Alojamento de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde 321,75 MT/mês (plano de 3 anos, com cupão) Ver planos |
Português
English
