Anúncios que consomem uma quantidade desproporcional de recursos em um dispositivo afetam negativamente a experiência do usuário, desde os efeitos óbvios da degradação do desempenho até consequências menos visíveis, como consumo da bateria ou da largura de banda. Esses anúncios variam desde ativamente maliciosos, como mineradores de criptomoedas, até conteúdo genuíno com bugs acidentais ou problemas de desempenho.
O Chrome define limites sobre os recursos que um anúncio pode usar e descarrega esse anúncio se os limites forem excedidos. Leia o anúncio no blog do Chromium (em inglês) para mais detalhes. O mecanismo usado para descarregar anúncios é a intervenção pesada de anúncios.
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 destes 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 qualquer iframe descendente do frame do anúncio são considerados nos limites de interferência 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 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, são adicionados alguns ruídos e variabilidade aos limites para proteger a privacidade do usuário.
Definir chrome://flags/#heavy-ad-privacy-mitigations como Desativado remove essas proteções. Isso significa que as restrições serão aplicadas de maneira determinista, puramente de acordo com os limites. Isso deve facilitar a depuração e os testes.
Quando a intervenção for acionada, você verá o conteúdo no iframe de um anúncio pesado substituído por uma mensagem Ad removed. Se você clicar no link Detalhes incluído, verá a mensagem explicando: "Este anúncio usa muitos recursos para seu dispositivo, então o Chrome o removeu".
Veja a intervenção aplicada ao conteúdo de amostra em heavy-ads.glitch.me. Também é possível 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, esteja ciente de 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 nisso.
- Verifique se a página permanece em foco. Colocar a página em segundo plano (mudar para outra janela) vai pausar as filas de tarefas da página e, portanto, não acionará a intervenção da CPU.
- Não toque ou clique no conteúdo do anúncio durante o teste. A intervenção não será aplicada a conteúdo que receba interações do usuário.
O que você precisa fazer?
Você exibe anúncios de um provedor terceirizado no seu site
Nenhuma ação é necessária. No entanto, lembre-se de que os usuários poderão ver anúncios que excedem os limites removidos no seu site.
Você exibe anúncios próprios no seu site ou disponibiliza anúncios de display de terceiros
Continue lendo para garantir a implementação do monitoramento necessário com a API Reporting para intervenções pesadas de anúncios.
Você cria conteúdo de anúncio ou mantém uma ferramenta para criar conteúdo de anúncio
Continue lendo para garantir que você esteja ciente de como testar seu conteúdo para verificar problemas de desempenho e uso de recursos. Consulte também as orientações nas plataformas de publicidade que você escolher, já que elas podem oferecer mais orientações ou restrições técnicas, por exemplo, consulte as Diretrizes do Google para criativos de display. Considere criar limites configuráveis diretamente nas suas ferramentas de criação para evitar que anúncios com baixo desempenho escaparem à solta.
O que acontece quando um anúncio é removido?
Uma intervenção no Chrome é informada pela API Reporting, devidamente chamada, com um tipo de relatório intervention. Use a API Reporting para receber notificações
sobre as intervenções por uma solicitação POST para um endpoint de relatórios ou no
seu JavaScript.
Esses relatórios são acionados no iframe raiz com tag de anúncio junto com todos os descendentes, ou seja, cada frame descarregado pela intervenção. Isso significa que, se um anúncio vier de uma origem externa, ou seja, um iframe entre sites, cabe a esse terceiro (por exemplo, o provedor de anúncios) gerenciar o relatório.
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 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 à ReportingObserver um método observe()
que pode ser usado para acionar um callback fornecido nas intervenções. Isso pode ser
útil se você quiser anexar mais 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 literalmente remover a página do iframe, adicione uma proteção contra falhas para garantir que o relatório seja capturado antes de a página ser totalmente removida (por exemplo, um anúncio em um iframe). Para isso, é possível vincular o mesmo callback ao evento pagehide.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Lembre-se de que, para proteger a experiência do usuário, o evento pagehide restringe
a quantidade de trabalho que pode acontecer nele. Por exemplo, se você tentar enviar uma solicitação fetch() com os relatórios, ela será cancelada.
Use navigator.sendBeacon() para enviar esse relatório. Mesmo assim,
isso é apenas um 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 um conteúdo da Web. Portanto, use ferramentas como o Lighthouse para auditar o desempenho geral do conteúdo. As auditorias resultantes fornecem orientações inline 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. Você pode usar a opção de URL personalizado em https://heavy-ads.glitch.me para testar isso com um iframe pronto e com tag de anúncio. Use o Chrome DevTools para validar o conteúdo com a tag de anúncio. No painel Renderização, que pode ser acessado pelo menu de três pontos ⋮ e depois em Mais ferramentas > Renderização, selecione "Destacar frames de anúncio". Se você estiver testando o conteúdo 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 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 <iframe> de abertura. Isso também pode ser visto no
painel Aplicativo na seção Frames, em que os frames com tags de anúncio
incluem um atributo "Status do anúncio".
Uso da rede
Abra o painel Rede no Chrome DevTools para ver a atividade geral de rede do anúncio. Verifique se a opção "Desativar cache" está marcada para receber resultados consistentes em carregamentos repetidos.
O valor transferido na parte inferior 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 àquelas relacionadas ao anúncio.
Se você encontrar a solicitação inicial do anúncio, como a origem do iframe, também será possível usar a guia Initiator na solicitação para ver todas as solicitações acionadas.
Classificar a lista geral de solicitações por tamanho é uma boa maneira de identificar recursos excessivamente grandes. Os culpados comuns incluem imagens e vídeos que não foram otimizados.
Além disso, a classificação por nome é uma boa maneira de identificar solicitações repetidas. Talvez não seja um único recurso grande acionando a intervenção, mas um grande número de solicitações repetidas que ultrapassam o limite de maneira incremental.
Uso da CPU
O painel Performance no DevTools ajuda a diagnosticar problemas de uso da CPU. A primeira etapa é abrir o menu Configurações da captura. Use o menu suspenso CPU para diminuir a velocidade da CPU o máximo possível. As intervenções para CPUs têm maior probabilidade de serem acionadas em dispositivos de baixo consumo do que em máquinas de desenvolvimento de última geração.
Em seguida, clique no botão Record para começar a gravar a atividade. É recomendável testar quando e por quanto tempo você grava, 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 que representam scripts, 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 esse arquivo. Assim, você pode acompanhá-lo até o painel Sources para examinar o custo de cada linha.
Problemas comuns a serem observados aqui são animações mal otimizadas que estão acionando o layout contínuo e a pintura ou operações caras que estão ocultas em uma biblioteca incluída.
Como informar intervenções incorretas
O Chrome marca o conteúdo como um anúncio, correspondendo solicitações de recursos a uma lista de filtros. Se um conteúdo que não é do anúncio recebeu tags, considere mudar esse código para evitar a correspondência das regras de filtragem. Se você suspeitar que uma intervenção foi aplicada incorretamente, poderá informar um problema usando esse modelo. Verifique se você capturou um exemplo do relatório de intervenção e se tem um URL de amostra para reproduzir o problema.