I  A técnica de hoje

A capa que chega por último

A técnica: comprimir em WebP a imagem de capa dos posts que mais recebem busca e tirar dela o carregamento preguiçoso, pra que o LCP fique abaixo de 2,5 segundos. O alvo é o primeiro elemento grande que o leitor enxerga.

A métrica nasceu na equipe do Chrome. O engenheiro Philip Walton assinou em 2019, no site web.dev do Google, o texto que define o LCP e ensina a medi-lo.

A CITAÇÃO

No texto, Walton descreve a métrica como “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading” (o tempo até aparecer a maior imagem ou bloco de texto visível na tela, contado do início do carregamento da página).

A escolha do maior elemento tem lógica de leitor. É ele que convence a pessoa de que a página chegou e vale ficar.

POR QUE A CAPA PESA

Uma foto de celular sai com vários megabytes e 4.000 pixels de largura. A coluna de um blog raramente passa de 800 pixels. O navegador baixa o arquivo inteiro e encolhe na tela, e cada megabyte sobrando vira espera no LCP.

O WebP corta parte do peso. O formato usa compressão parecida com a de um quadro de vídeo e guarda a mesma foto em menos bytes. Os navegadores principais leem WebP desde setembro de 2020, quando o Safari 14 aceitou o formato.

O ERRO DO CARREGAMENTO PREGUIÇOSO

O Chrome 76, lançado em 2019, trouxe o carregamento preguiçoso nativo: com o atributo loading=lazy na tag da imagem, o navegador só baixa a foto quando ela chega perto da tela.

O WordPress 5.5, de agosto de 2020, ligou o atributo por padrão em todas as imagens de post. A versão 5.9, de janeiro de 2022, liberou a primeira imagem do conteúdo, mas tema e plugin de otimização seguem recolocando o atraso.

Na capa, o adiamento trabalha contra. O navegador precisa montar o layout pra descobrir que a imagem está na tela, e só então pede o arquivo. A espera entra inteira no LCP.

O QUE A TÉCNICA NÃO RESOLVE

Servidor lento, fonte pesada e script de anúncio também seguram a página. Se o PageSpeed apontar o tempo de resposta do servidor como gargalo, a capa leve ajuda pouco, e o caminho é a hospedagem ou o cache.

Nos posts com foto no topo, porém, a imagem costuma ser o elemento que o LCP mede, e mexer nela custa minutos.

O leitor espera pela capa; o código não pode mandar a capa esperar.

II  No seu blog

Cinco capas em uma tarde

O passo: achar os cinco posts com mais cliques no Search Console, converter a capa de cada um em WebP e garantir que ela carregue sem atraso. Reserve uma tarde e trate um post por vez.

ACHAR OS CINCO POSTS

No Search Console (o painel gratuito onde o Google mostra como o site aparece na busca), abra Desempenho e depois Resultados da pesquisa. Escolha Últimos 3 meses no filtro de data e clique na aba Páginas.

Ordene a lista por Cliques e copie os cinco primeiros endereços numa planilha. Antes de mexer, rode cada um no PageSpeed Insights e anote o LCP de celular na coluna ao lado.

CONVERTER EM SEIS PASSOS

1. Baixe a capa original do post, no maior tamanho disponível.

2. Abra o Squoosh (squoosh.app), ferramenta gratuita do próprio Google que roda no navegador, e arraste a imagem pra janela.

3. Em Resize (redimensionar), ponha a largura em 1.200 pixels, folga suficiente pra coluna do blog em tela de alta definição.

4. Em Compress (comprimir), escolha WebP e qualidade entre 75 e 80. Compare a prévia lado a lado e confira o peso final, que deve ficar abaixo de 150 KB.

5. Suba o arquivo novo na biblioteca de mídia e troque a capa do post por ele.

6. Copie o texto alternativo da capa antiga, a descrição que o leitor de tela e o buscador usam, pra imagem nova.

TIRAR O ATRASO

Abra o post publicado no Chrome, clique com o botão direito na capa e escolha Inspecionar. Na linha da tag img, procure loading=lazy.

Se aparecer, o adiamento vem do tema ou de um plugin. Em plugins de otimização como WP Rocket e LiteSpeed Cache, a tela de lazy load (carregamento preguiçoso) traz um campo de exclusão; cole ali o nome do arquivo da capa.

Se o tema escreve o atributo direto no código, peça a quem cuida do site pra trocar o valor por eager (imediato) só na capa e acrescentar fetchpriority=high, a instrução que manda o navegador pedir aquela imagem antes das outras.

UM EXEMPLO DA TARDE

Um blog de receitas tem como post mais clicado um guia de pão de fermentação natural. A capa é um JPEG de 2,8 MB com 4.032 pixels de largura, tirado no celular.

No Squoosh, a foto sai com 1.200 pixels e 140 KB em WebP. No código, o tema marcava a capa com loading=lazy; o plugin de cache recebe a exclusão, e a capa carrega junto com o título.

Os outros quatro posts seguem o mesmo roteiro. Em duas horas, as cinco capas estão trocadas e a planilha tem a coluna do antes preenchida.

Uma capa por vez: arquivo leve, atraso desligado, endereço anotado.

III  O número pra olhar

O LCP de cada post no celular

Pra saber se a troca funcionou, olhe o LCP de cada post no PageSpeed Insights, na versão de celular. É o tempo até a capa aparecer, e o bom vai até 2,5 segundos.

O teste fica em pagespeed.web.dev. Cole o endereço do post, clique em Analisar e espere o resultado em duas abas, Celular e Computador. Comece pelo celular, onde a rede é mais lenta e o limite aperta.

DOIS NÚMEROS NA MESMA TELA

No topo aparece o quadro dos usuários reais, com dados do Chrome User Experience Report (o relatório de experiência do usuário do Chrome), um apanhado das visitas de quem usa o navegador nos últimos 28 dias.

Mais abaixo, a seção de diagnóstico mostra o teste de laboratório, uma visita simulada feita na hora num celular com rede lenta.

O laboratório muda no mesmo minuto da troca da capa. O dado real demora, porque a janela de 28 dias leva semanas pra substituir os acessos antigos pelos novos.

Post com pouca visita nem aparece no dado real. Nesse caso, o laboratório é a única leitura disponível.

O laboratório confirma a troca; o dado real confirma o leitor.

COMO LER O NÚMERO

Anote o LCP de laboratório de cada post logo depois da troca, na coluna ao lado do antes. Verde, até 2,5 segundos, é a meta. Laranja, entre 2,5 e 4 segundos, pede mais trabalho. Vermelho, acima de 4, aponta um gargalo além da imagem.

Se o LCP continuar alto, desça até o diagnóstico da métrica. Ele mostra qual elemento foi medido e quanto tempo cada fase levou, da resposta do servidor até a imagem desenhada.

Se o elemento medido for o título ou um banner, a correção muda de alvo. Se for a capa e a fase mais longa for o atraso de carregamento, o atributo preguiçoso continua lá.

QUANDO VOLTAR

Volte ao PageSpeed 28 dias depois da troca e leia o quadro dos usuários reais. É ali que aparece a experiência de quem lê o blog, e é esse dado que o Google usa na busca.

No Search Console, o relatório Core Web Vitals agrupa páginas parecidas e leva o mesmo intervalo pra mover a contagem de endereços bons.

“Qual dos seus cinco posts mais buscados ainda carrega a capa com atraso?”

2,5 segundos. É o limite do LCP bom fixado pelo Google no anúncio dos Core Web Vitals, em maio de 2020.

🔒

EDIÇÃO SELADA

Quem leu até aqui tem mais um achado desta edição atrás do lacre.

Qual versão do WordPress parou de aplicar automaticamente o carregamento preguiçoso (loading=lazy) na primeira imagem do conteúdo do post?

Veja o ranking de quem mais acerta →

Como foi a edição de hoje?

Qual edição você quer ver amanhã?

Voto aberto até 22/10, 15h30

Best-Seller do Zero

A técnica de escrita, um exercício simples e o mercado editorial, no seu email às 05:05.

Quero receber →

missão de hoje