Três limites definem uma página que a documentação web.dev do Google chama de boa. O Largest Contentful Paint, a métrica de carregamento, deve ocorrer em até 2,5 segundos a partir do momento em que a página começa a carregar. O Interaction to Next Paint, a métrica de capacidade de resposta, deve ser de 200 milissegundos ou menos. O Cumulative Layout Shift, a métrica de estabilidade visual, deve ser de 0,1 ou menos.1 A mesma página acrescenta que o valor a medir é o 75º percentil dos carregamentos de página, separado entre celulares e computadores.1 Uma página só é aprovada quando três em cada quatro leitores têm a boa experiência.

Os registros publicados apontam os anúncios como causa em duas das três métricas

A página do web.dev sobre otimização do Cumulative Layout Shift afirma que os anúncios estão entre os maiores responsáveis por mudanças de layout na web.2 Widgets incorporados, diz ela, muitas vezes não sabem o tamanho do seu conteúdo antes de carregar, então as plataformas que os oferecem nem sempre reservam espaço.2 A solução proposta é reservar o espaço no layout inicial, com uma altura mínima ou uma proporção definida no espaço do anúncio.2 Conteúdo inserido perto do topo da janela de visualização, acrescenta, costuma causar a mudança maior.2 Cada solução parte do princípio de que o anúncio é um retângulo cujo tamanho é desconhecido até ele chegar.

O Interaction to Next Paint mede o outro custo. Ele observa a latência de cada clique, toque e interação pelo teclado ao longo da visita de um leitor, e um INP igual ou inferior a 200 milissegundos conta como boa capacidade de resposta.3 A documentação atribui parte dessa latência a tarefas longas na thread principal.3 O Web Almanac 2024 do HTTP Archive agrupou os quadros de animação longos em computadores por categoria de script.4 A publicidade estava entre as categorias em que a maior parte do INP caía na faixa ruim.4

Um anúncio ligado a uma palavra da página não tem espaço a reservar

Um anúncio ligado a uma palavra que já está no parágrafo não precisa de retângulo, e é esse o formato que a AdBubbles vende. Um editor adiciona um script, adbubbles.js, e as palavras compradas nos seus artigos recebem um leve sublinhado pontilhado. Passar o cursor sobre a palavra ou tocá-la abre uma pequena bolha com um rótulo "Ad" (anúncio), um título e um texto curtos, o domínio do anunciante e um link. O script é um único arquivo estático em JavaScript puro, sem dependências, e carrega depois que o DOM da página está pronto. Antes que o leitor aja, a página não contém nenhuma bolha nem nenhum espaço vazio.

A AdBubbles não define cookies, não armazena identificadores e não coleta dados pessoais dos leitores. O script de incorporação envia três beacons: uma visualização por carregamento de página, uma abertura quando uma bolha fica visível por um segundo e um clique quando um link é seguido. Nada mais sai da página. O que a AdBubbles faz, como explica a página sobre como funciona, é associar palavras de uma página ao anunciante que as comprou. Ela não escolhe quais pessoas veem um anúncio, não segue um leitor entre páginas ou sites e não promete resultados. O que o script de incorporação faz com as métricas de um site é algo que só as medições do próprio site podem mostrar.

A definição do Cumulative Layout Shift importa para a forma como uma bolha se abre. A métrica conta mudanças inesperadas, e uma mudança que ocorre em até 500 milissegundos após uma entrada discreta, como um toque, um clique ou o pressionar de uma tecla, é sinalizada e pode ser excluída.5 No celular, um toque abre a bolha, e no teclado, o Enter a abre; ambos são entradas discretas. No computador, a bolha se abre após um breve atraso com o cursor parado sobre a palavra, e se algo se move quando isso acontece é uma questão para os dados de campo do site.

O editor decide quanto de uma página o script de incorporação pode ler. O escopo é o elemento que ele examina, por exemplo o elemento article, e dentro dele o script ignora títulos, links, código, controles de formulário, navegação, cabeçalho, rodapé e qualquer coisa marcada com data-noads. Ele sublinha a primeira ocorrência de cada palavra comprada, nunca coloca duas bolhas em um mesmo parágrafo e para no máximo definido pelo editor. As opções de configuração são o escopo, o máximo por página e as categorias de anunciantes a excluir.

Uma pontuação de 90 vem de um laboratório, e uma aprovação vem dos leitores

O 90 de uma meta de desempenho designa uma faixa do Lighthouse, não um resultado das Core Web Vitals. A documentação do Chrome sobre a pontuação de desempenho do Lighthouse colore de verde uma pontuação de 90 a 100 e a classifica como boa; de 50 a 89 é laranja e de 0 a 49 é vermelho.6 O PageSpeed Insights produz essa pontuação executando o Lighthouse em um ambiente simulado e chama o resultado de dados de laboratório.7 Os dados de campo de leitores reais ficam ao lado, no mesmo relatório.7

A pontuação é uma média ponderada de cinco pontuações de métricas.6 Na tabela do Lighthouse 10, o Total Blocking Time pesa 30%, o Largest Contentful Paint e o Cumulative Layout Shift pesam 25% cada, e o First Contentful Paint e o Speed Index, 10% cada.6 O Interaction to Next Paint não está entre as cinco. Uma página pode, portanto, ficar na faixa verde enquanto os seus leitores esperam mais de 200 milissegundos para que um toque seja registrado.

A avaliação das Core Web Vitals é construída a partir do lado de campo. O PageSpeed Insights obtém os dados de usuários reais do Chrome User Experience Report e cobre o período de coleta dos 28 dias anteriores.7 Uma página com dados suficientes é aprovada na avaliação quando os 75º percentis das três métricas são bons.7 O Google Search Central afirma que boas Core Web Vitals, junto com outros aspectos da experiência na página, estão alinhadas com o que os seus principais sistemas de classificação procuram recompensar.8 Uma aprovação é uma afirmação sobre três valores de campo, e uma pontuação de 90 é uma afirmação sobre uma média ponderada de laboratório.

O Chrome descarrega um anúncio que usa demais o dispositivo do leitor

O Chrome também impõe um limite a anúncios que consomem demais a largura de banda e o processador do leitor. A sua documentação sobre intervenções em anúncios pesados apresenta três condições.9 A primeira é mais de quatro megabytes de largura de banda de rede, e a segunda é mais de 15 segundos de tempo da thread principal em qualquer janela de 30 segundos. A terceira é mais de 60 segundos de tempo da thread principal no total. Um frame de anúncio que ultrapassa qualquer uma delas é descarregado.9

Esses números descrevem um anúncio que roda em um frame próprio, com o seu próprio tráfego de rede e trabalho na thread principal. Uma bolha é renderizada em um Shadow DOM dentro do próprio documento da página, não em um frame de anúncio. Os dados por site que o script de incorporação lê são um arquivo estático, gerado de novo quando uma campanha muda e armazenado em cache na borda da rede. Uma visualização de página, portanto, não custa nada ao servidor de anúncios, e a única requisição dinâmica é o pequeno beacon.

O valor a comparar é o 75º percentil do próprio site, não uma pontuação

O Web Almanac 2024 fornece as referências com as quais um editor pode comparar a sua própria origem. Ele informa que 72% dos sites alcançaram boas pontuações de CLS e 11% tiveram pontuações ruins.4 O INP bom era de 74% dos sites em celulares e de 97% em computadores.4 Boas Core Web Vitals como um todo, medidas com o INP, eram de 43% em celulares e de 54% em computadores.4

Criar uma conta de editor e configurar o script de incorporação não custa nada. O valor a ler depois não é a faixa verde. Para uma origem com dados suficientes, o PageSpeed Insights mostra o Interaction to Next Paint e o Cumulative Layout Shift no 75º percentil dos 28 dias anteriores.7 O relatório de Core Web Vitals no Search Console mostra o desempenho das páginas do site.8 Esses dois valores de campo, lidos antes de adicionar um script e novamente 28 dias depois, são os números que uma pontuação de 90 não consegue fornecer.