Anúncios e Core Web Vitals: conviver sem perder velocidade

O Google avisa que seu site está lento e a suspeita cai sobre a publicidade. Às vezes com razão, às vezes não. Aqui está o que cada métrica mede, qual parte do problema é realmente dos anúncios e o que dá para arrumar sem abrir mão da receita.

O que o Google mede quando diz que seu site está lento

Core Web Vitals é o conjunto de métricas com que o Google resume a experiência real dos seus leitores. Não são uma nota de laboratório: são calculadas com dados de navegação de gente que abriu suas páginas, e o valor publicado é o percentil 75, o valor abaixo do qual ficam três de cada quatro visitas.

São três. LCP (Largest Contentful Paint) mede quanto tempo o conteúdo principal demora a aparecer. CLS (Cumulative Layout Shift, deslocamento cumulativo de layout) mede o quanto a página se mexe sozinha enquanto carrega. INP (Interaction to Next Paint) mede quanto ela demora a responder quando alguém toca em algo. As três têm um limite público do Google para serem consideradas boas.

LCP: quanto demora a aparecer o que o leitor veio ver

O LCP marca o momento em que termina de ser pintado o maior elemento visível da primeira tela: normalmente a imagem de cabeçalho ou o título. O Google considera bom um LCP de 2,5 segundos ou menos, a melhorar até 4 e ruim acima disso. É medido desde que o usuário pede a página, não desde que o seu servidor responde.

A publicidade raramente é a culpada direta de um LCP ruim: o criativo quase nunca é o maior elemento da primeira tela. É culpada de forma indireta. Se o navegador está ocupado baixando e executando bibliotecas de anúncios, demora mais a chegar na sua imagem principal. Nada do stack de anúncios deveria competir por banda com o recurso que define o seu LCP.

CLS: o pulo que faz o clique errar

O CLS não é medido em segundos, e sim com uma pontuação sem unidades que combina quanta superfície da tela se move e que distância percorre. O Google considera bom um CLS de 0,1 ou menos, a melhorar até 0,25 e ruim acima disso. Zero é alcançável, e é a meta razoável para uma página de conteúdo.

É a métrica mais fácil de entender porque todo mundo já sofreu com ela: você está lendo, algo carrega acima, o texto desce de repente e você perde a linha. Ou pior: você vai tocar num link e naquele instante aparece um bloco que o empurra para baixo, então você toca em outra coisa. Um deslocamento logo depois de uma interação do usuário não conta; o que acontece sozinho, conta.

Por que a publicidade é a suspeita de sempre no CLS

Porque um espaço publicitário, do jeito que é implementado por padrão, é uma caixa que não tem tamanho até o leilão terminar. O navegador pinta a página com o espaço a zero de altura, chega a resposta, o criativo tem 250 pixels e tudo o que estava embaixo desce 250 pixels. Repetido em cinco espaços, o CLS dispara. Os padrões mais frequentes:

• Espaços sem altura reservada, que vão de zero ao tamanho final quando o anúncio chega.
• Espaços multitamanho em que não se sabe qual altura vai chegar.
• Anúncios inseridos entre parágrafos quando a página já está pintada.
• Contêineres que colapsam com o leilão vazio e depois são preenchidos com um reserva.
• Barras fixas que empurram o conteúdo em vez de ficar por cima dele.

Reservar o espaço antes de o anúncio chegar

A solução é chata e funciona: dar ao contêiner a sua altura antes de pedir qualquer coisa. Se o espaço vai servir um 300x250, ele já ocupa 250 pixels de altura desde a primeira pintura, com um fundo neutro. Chegue o que chegar, nada se mexe. No CSS isso se consegue com min-height ou aspect-ratio, e convém declarar alturas diferentes por breakpoint.

Se um espaço admite vários tamanhos, reserve a altura do maior que você realmente serve, ou corte a lista para que a diferença fique pequena. E para o leilão vazio, decida antes: ou o contêiner mantém a altura sempre, ou ele colapsa, mas não colapsa depois de ter estado aberto. Os espaços acima da dobra são os que mais castigam.

Reservar o espaço não tira receita de ninguém: o anúncio é servido igual, só que sem empurrar o texto.

INP e o custo real dos scripts publicitários

O INP substituiu o antigo FID (First Input Delay) e mede algo mais honesto: de todas as interações da visita, quanto tempo a página demora a mostrar uma resposta visível. O Google considera bom 200 milissegundos ou menos, a melhorar até 500 e ruim acima disso. Aqui a publicidade pesa de forma direta.

Um stack moderno carrega a biblioteca do ad server, um wrapper de header bidding e um adaptador para cada parceiro de demanda. Tudo isso é JavaScript que roda na mesma thread principal que atende os toques do usuário. Enquanto essa thread resolve um leilão, o menu não abre. O que é preciso vigiar não é quantos parceiros você tem, e sim quanta thread principal eles consomem no conjunto.

Carregar de forma assíncrona: o que resolve e o que não

Um script normal bloqueia: o navegador para, baixa, executa e só então continua construindo a página. Com async ele baixa em paralelo e executa assim que estiver pronto, sem travar a análise do HTML. Com defer ele ainda espera o documento estar completo. Qualquer tag publicitária deveria ser async.

Mas convém entender o limite: async evita o bloqueio do download, não o custo da execução. O script continua consumindo thread principal quando chega a vez dele, e continua podendo mexer no layout se o espaço não tiver altura reservada. Assíncrono é o ponto de partida, não a solução completa.

Lazy loading: não pedir o que ninguém olhou ainda

Uma matéria longa pode ter seis ou sete espaços, mas o leitor só vê um ou dois antes de decidir se fica. Pedir todos de uma vez multiplica as requisições, alonga o leilão e ocupa a thread principal à toa. O carregamento adiado dispara a requisição de cada espaço só quando ele se aproxima da área visível.

A margem de antecipação é o que precisa ser calibrado. Curta demais e o anúncio chega quando o espaço já passou, o que baixa a visibilidade. Longa demais e você volta a carregar tudo. Um ponto de partida comum é pedir quando o espaço está a uma tela de distância. Os espaços da primeira tela nunca são adiados.

Quantos espaços uma página aguenta

A tentação quando a receita cai é acrescentar mais um espaço. Cada espaço novo soma requisições, tempo de leilão e trabalho de thread principal, e reparte a mesma atenção entre mais unidades. Ao mesmo tempo a página responde pior, e o leitor que vai embora não chega a carregar nenhuma impressão.

O exercício útil é olhar cada espaço separadamente: que visibilidade tem, que receita traz e quanto custa à página. Quase sempre aparecem um ou dois que mal faturam e sujam as métricas. Tirá-los costuma sair melhor do que somar o oitavo.

O resumo é curto: reserve a altura de todos os espaços, carregue as tags de forma assíncrona, adie o que está abaixo da dobra e revise cada posição pelo que ela realmente aporta. Publicidade e uma página rápida não são incompatíveis; incompatível é uma implementação publicitária que ninguém revisou.