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 esgotar a bateria ou consumir a largura de banda disponível. Esses anúncios variam de ativamente maliciosos, como mineradores de criptomoedas, a conteúdo genuíno com bugs ou problemas de desempenho involuntários.
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 ou clicou nele) e atende a 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 MB de largura de banda de rede
Todos os recursos usados por iframes descendentes do frame do anúncio são contabilizados nos limites de intervenção nesse anúncio. É importante observar que os limites de tempo da linha de execução principal não são iguais ao tempo decorrido desde o carregamento do anúncio. Os limites são sobre o tempo que a CPU leva para executar o código do anúncio.
Como testar a intervenção
A intervenção foi enviada no Chrome 85, mas, por padrão, há algum ruído e variabilidade adicionados aos limites para proteger a privacidade do usuário.
A configuração de 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,
apenas de acordo com os limites. Isso facilita a depuração e os testes.
Quando a intervenção for acionada, o conteúdo no iframe de um anúncio pesado será substituído por uma mensagem Ad removed. Se você clicar no link Details, 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 amostra 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, tenha em mente que há vários motivos que podem impedir a aplicação de uma intervenção.
- Recarregar o mesmo anúncio na mesma página vai isentar essa combinação da intervenção. Limpar o histórico de navegação e abrir a página em uma nova tag pode ajudar.
- A página precisa permanecer em foco. Colocar a página em segundo plano (mudando para outra janela) pausa as filas de tarefas da página e, portanto, não aciona a intervenção da CPU.
- 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 interação do usuário.
O que você precisa fazer?
Você mostra anúncios de um provedor de terceiros no seu site
Não é necessário fazer nada. Apenas saiba que os usuários podem ver anúncios que excedem os limites removidos no seu site.
Você exibe anúncios próprios no seu site ou fornece anúncios para veiculação de terceiros
Continue lendo para implementar o monitoramento necessário com a API Reporting para intervenções de anúncios pesados.
Você cria conteúdo de anúncios ou mantém uma ferramenta para criar conteúdo de anúncios
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 sobre as plataformas de publicidade que você escolher, já que elas podem oferecer outros conselhos técnicos ou restrições. Por exemplo, consulte as diretrizes do Google para criativos de display. Crie limites configuráveis diretamente nas ferramentas de criação para evitar que anúncios com 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. Você pode usar a API Reporting para receber notificações
sobre intervenções com uma solicitação POST para um endpoint de relatórios ou no
JavaScript.
Esses relatórios são acionados no iframe com tag de anúncio raiz e em todos os descendentes, ou seja, cada frame descarregado pela intervenção. Isso significa que, se um anúncio vier de uma origem de terceiros, ou seja, um iframe entre sites, caberá a esse 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 ao ReportingObserver um método observe()
que pode ser usado para acionar um callback fornecido em intervenções. Isso pode ser
útil se você quiser anexar outras informações 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 de segurança para garantir que o relatório seja definitivamente
capturado antes que a página seja totalmente removida, por exemplo, um anúncio em um
iframe. Para isso, você pode associar 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,
esse é 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',
},
},
];
Como diagnosticar a causa de uma intervenção
O conteúdo do anúncio é apenas conteúdo da Web. Use ferramentas como o Lighthouse para auditar a performance geral do conteúdo. As auditorias resultantes fornecem orientações inline sobre melhorias. Você também pode consultar a coleção web.dev/fast.
Talvez seja útil testar seu anúncio em um contexto mais isolado. Você pode usar a opção de URL personalizado em https://heavy-ads.glitch.me para testar isso com um iframe com tags de anúncios prontos. Você pode usar o Chrome DevTools para validar se o conteúdo foi marcado como um anúncio. No painel Rendering (acessível pelo menu de três pontos ⋮ e depois More Tools > Rendering), selecione Highlight Ad Frames. Se o conteúdo for testado na janela de nível superior ou em outro contexto em que não esteja marcado como um anúncio, a intervenção não será acionada, mas você ainda poderá verificar manualmente os limites.
O status do anúncio de um frame também aparece no painel Elements, em que uma anotação ad
é adicionada após a tag <iframe> de abertura. Isso também aparece no painel Application na seção Frames, em que os frames com tags de anúncios incluem um atributo Ad Status.
Uso da rede
Abra o painel Network no Chrome DevTools para conferir a atividade de rede geral do anúncio. Verifique se a opção Disable cache está marcada para receber resultados consistentes em cargas repetidas.
O valor transferido na parte de baixo da página mostra o valor transferido para toda a página. Use a entrada Filtro 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 Initiator na solicitação para conferir todas as solicitações que ela aciona.
Classificar 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, a classificação por nome pode ser uma boa maneira de identificar solicitações repetidas. Talvez não seja um único recurso grande que aciona a intervenção, mas um grande número de solicitações repetidas que ultrapassam 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 diminuir a CPU o máximo possível. As intervenções de CPU têm muito mais probabilidade de acionar dispositivos de menor consumo do que máquinas de desenvolvimento de ponta.
Em seguida, clique no botão Record para começar a gravar a atividade. Você pode testar quando e por quanto tempo gravar, já que um rastro longo pode levar um tempo para carregar. Depois que a gravação for carregada, use a linha do tempo superior para selecionar uma parte da gravação. Concentre-se nas áreas do gráfico em amarelo, roxo ou verde sólido que representam script, renderização e pintura.
Confira as guias Bottom-Up, Call Tree e Event Log na parte de baixo. Classificar 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 a ele. Assim, você pode acessá-lo no painel Origens para examinar o custo de cada linha.
Os problemas comuns a serem procurados aqui são animações mal otimizadas que acionam layout e pintura 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 comparar as solicitações de recursos com uma lista de filtros. Se o conteúdo não publicitário 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, envie um problema usando este modelo. Confira se você capturou um exemplo do relatório de intervenção e tem um URL de exemplo para reproduzir o problema.