Anúncios que consomem uma quantidade desproporcional de recursos em um dispositivo afetam negativamente a experiência do usuário, desde os efeitos óbvios de degradação do desempenho até consequências menos visíveis, como o consumo da bateria ou o uso da cota de largura de banda. Esses anúncios variam de conteúdo ativamente malicioso, como mineradores de criptomoedas, até conteúdo genuíno com bugs ou problemas de desempenho não intencionais.
O Chrome define limites para os recursos que um anúncio pode usar e descarrega o anúncio se os limites forem excedidos. Leia o anúncio no blog do Chromium para mais detalhes. O mecanismo usado para descarregar anúncios é a intervenção de anúncios pesados.
Critérios de anúncios pesados
Um anúncio é considerado pesado se o usuário não interagiu com ele (por exemplo, não tocou nem clicou nele) e atende a qualquer um dos seguintes critérios:
- Usa a linha de execução principal por mais de 60 segundos no total
- Usa a linha de execução principal por mais de 15 segundos em qualquer janela de 30 segundos
- Usa mais de 4 megabytes de largura de banda de rede
Todos os recursos usados por iframes descendentes do frame do anúncio contam para os limites de intervenção nesse anúncio. É importante observar que os limites de tempo da linha de execução principal não são os mesmos que o tempo decorrido desde o carregamento do anúncio. Os limites são referentes ao tempo que a CPU leva para executar o código do anúncio.
Testar a intervenção
A intervenção foi lançada no Chrome 85, mas, por padrão, há algum ruído e variabilidade adicionados aos limites para proteger a privacidade do usuário.
Definir chrome://flags/#heavy-ad-privacy-mitigations como Desativado remove essas proteções, o que significa que as restrições são aplicadas de forma determinística, puramente de acordo com os limites. Isso facilita a depuração e os testes.
Quando a intervenção é acionada, o conteúdo no iframe de um anúncio pesado é substituído por uma mensagem Anúncio removido. Se você clicar no link Detalhes, vai aparecer uma mensagem explicando: "O anúncio usa muitos recursos do seu dispositivo, por isso, ele foi removido pelo Chrome."
Confira a intervenção aplicada ao conteúdo de exemplo em heavy-ads.glitch.me. Você também pode usar esse site de teste para carregar um URL arbitrário como uma maneira rápida de testar seu próprio conteúdo.
Ao testar, saiba que há vários motivos que podem impedir a aplicação de uma intervenção.
- Recarregar o mesmo anúncio na mesma página isenta essa combinação da intervenção. Limpar o histórico de navegação e abrir a página em uma nova tag pode ajudar.
- Mantenha a página em foco. Se você colocar a página em segundo plano (trocar para outra janela), as filas de tarefas serão pausadas, e a intervenção da CPU não será acionada.
- Não toque nem clique no conteúdo do anúncio durante o teste. A intervenção não será aplicada ao conteúdo que receber qualquer interação do usuário.
O que você precisa fazer?
Você mostra anúncios de um provedor terceirizado no seu site
Nenhuma ação é necessária. Apenas saiba que os usuários podem ver anúncios que excedem os limites removidos quando estão no seu site.
Você mostra anúncios próprios no seu site ou fornece anúncios de display de terceiros.
Continue lendo para implementar o monitoramento necessário usando a API Reporting para intervenções de anúncios pesados.
Você cria conteúdo de anúncio ou mantém uma ferramenta para criar conteúdo de anúncio
Continue lendo para saber como testar seu conteúdo em busca de problemas de desempenho e uso de recursos. Consulte também as orientações das plataformas de publicidade de sua escolha, já que elas podem fornecer mais restrições ou conselhos técnicos. Por exemplo, confira as diretrizes para criativos de display do Google. Considere criar limites configuráveis diretamente nas suas ferramentas de criação para evitar que anúncios de baixa performance sejam veiculados.
O que acontece quando um anúncio é removido?
Uma intervenção no Chrome é informada pela
API Reporting
com um tipo de relatório intervention. É possível usar a API Reporting para receber notificações sobre intervenções por uma solicitação POST a um endpoint de relatórios ou no JavaScript.
Esses relatórios são acionados no iframe raiz com tag de anúncio e em todos os descendentes dele, ou seja, em todos os frames descarregados pela intervenção. Isso significa que, se um anúncio vier de uma fonte de terceiros, ou seja, um iframe entre sites, será responsabilidade desse terceiro (por exemplo, o provedor de anúncios) processar a denúncia.
Para configurar a página para relatórios HTTP, a resposta precisa incluir o cabeçalho
Report-To:
Report-To: { "url": "https://example.com/reports", "max_age": 86400 }
A solicitação POST acionada vai incluir um relatório como este:
POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report
[{
"type": "intervention",
"age": 60,
"url": "https://example.com/url/of/ad.html",
"body": {
"sourceFile": null,
"lineNumber": null,
"columnNumber": null,
"id": "HeavyAdIntervention",
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
}
}]
A API JavaScript fornece o ReportingObserver com um método observe()
que pode ser usado para acionar um callback fornecido em intervenções. Isso pode ser útil se você quiser anexar informações adicionais ao relatório para ajudar na depuração.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json via your own reporting process
navigator.sendBeacon('https://report.example/your-endpoint', report);
}
}
// create the observer with the callback
const observer = new ReportingObserver(
(reports, observer) => {
sendReports(reports);
},
{ buffered: true }
);
// start watching for interventions
observer.observe();
No entanto, como a intervenção vai remover literalmente a página do iframe, adicione um recurso à prova de falhas para garantir que o relatório seja capturado antes que a página desapareça completamente, por exemplo, um anúncio em um iframe. Para isso, você pode conectar o mesmo callback ao evento pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Para proteger a experiência do usuário, o evento pagehide restringe
a quantidade de trabalho que pode acontecer nele. Por exemplo, tentar enviar uma
solicitação fetch() com os relatórios vai resultar no cancelamento dela.
Use navigator.sendBeacon() para enviar esse relatório. Mesmo assim, isso é apenas o melhor esforço do navegador, não uma garantia.
O JSON resultante do JavaScript é semelhante ao enviado na solicitação POST:
[
{
type: 'intervention',
url: 'https://example.com/url/of/ad.html',
body: {
sourceFile: null,
lineNumber: null,
columnNumber: null,
id: 'HeavyAdIntervention',
message:
'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
},
},
];
Diagnosticar a causa de uma intervenção
O conteúdo do anúncio é apenas conteúdo da Web. Portanto, use ferramentas como o Lighthouse para auditar a performance geral do seu conteúdo. As auditorias resultantes fornecem orientação in-line sobre melhorias. Você também pode consultar a coleção web.dev/fast.
Pode ser útil testar seu anúncio em um contexto mais isolado. Use a opção de URL personalizado em https://heavy-ads.glitch.me para testar isso com um iframe pronto e marcado com anúncios. Use o Chrome DevTools para validar se o conteúdo foi marcado como um anúncio. No painel Renderização (acessível pelo menu de três pontos ⋮ e Mais ferramentas > Renderização), selecione Destacar frames de anúncios. Se você testar o conteúdo na janela de nível superior ou em outro contexto em que ele não está marcado como um anúncio, a intervenção não será acionada, mas ainda será possível verificar manualmente os limites.
O status do anúncio de um frame também é mostrado no painel Elementos, em que uma anotação ad
é adicionada após a tag de abertura <iframe>. Isso também fica visível no painel Application, na seção Frames, em que os frames marcados com anúncios incluem um atributo Ad Status.
Uso da rede
Abra o painel Rede no Chrome DevTools para conferir a atividade geral de rede do anúncio. Verifique se a opção Desativar cache está marcada para ter resultados consistentes em carregamentos repetidos.
O valor transferido na parte de baixo da página mostra o valor transferido para toda a página. Use a entrada Filtrar na parte de cima para restringir as solicitações apenas às relacionadas ao anúncio.
Se você encontrar a solicitação inicial do anúncio, por exemplo, a origem do iframe, também poderá usar a guia Iniciador na solicitação para ver todas as solicitações que ela aciona.
Ordenar a lista geral de solicitações por tamanho é uma boa maneira de identificar recursos muito grandes. Os culpados comuns incluem imagens e vídeos que não foram otimizados.
Além disso, classificar por nome pode ser uma boa maneira de identificar solicitações repetidas. Pode não ser um único recurso grande que aciona a intervenção, mas um grande número de solicitações repetidas que excedem o limite de forma incremental.
Uso da CPU
O painel Performance no DevTools ajuda a diagnosticar problemas de uso da CPU. A primeira etapa é abrir o menu de configurações de captura. Use o menu suspenso CPU para reduzir a velocidade da CPU o máximo possível. As intervenções para CPU têm muito mais probabilidade de serem acionadas em dispositivos com menos energia do que em máquinas de desenvolvimento sofisticadas.
Em seguida, clique no botão Gravar para começar a gravar a atividade. É recomendável testar quando e por quanto tempo você grava, já que um rastreamento longo pode levar um tempo considerável para carregar. Depois que a gravação for carregada, use a linha do tempo na parte de cima para selecionar uma parte dela. Foque nas áreas do gráfico em amarelo, roxo ou verde sólido que representam scripting, renderização e pintura.
Confira as guias De baixo para cima, Árvore de chamadas e Registro de eventos na parte de baixo. Ordenar essas colunas por Tempo próprio e Tempo total pode ajudar a identificar gargalos no código.
O arquivo de origem associado também está vinculado ali. Assim, você pode acompanhar até o painel Fontes para examinar o custo de cada linha.
Problemas comuns a serem procurados aqui são animações mal otimizadas que estão acionando layout e renderização contínuos ou operações caras que estão ocultas em uma biblioteca incluída.
Como denunciar intervenções incorretas
O Chrome marca o conteúdo como um anúncio ao corresponder solicitações de recursos a uma lista de filtros. Se o conteúdo não relacionado a anúncios tiver sido marcado, considere mudar esse código para evitar a correspondência com as regras de filtragem. Se você suspeitar que uma intervenção foi aplicada incorretamente, informe o problema usando este modelo. Verifique se você capturou um exemplo do relatório de intervenção e tem uma URL de amostra para reproduzir o problema.