A nossa imagem principal sumia no iPhone: um bloqueador de anúncios a escondia

O sintoma

Em três páginas deste site, o destaque principal (o título e a fotografia no topo da página) não aparecia quando a página era exibida pela primeira vez num iPhone. A seção de baixo ficava no topo da tela por cerca de um segundo e meio, e depois o destaque aparecia acima dela. Ao recarregar a página, ele estava lá na hora. Ao abri-la de novo numa aba privada, sumia outra vez.

Só acontecia no iPhone. Acontecia no Safari e em todos os outros navegadores do iOS, o que faz sentido, porque a Apple exige que todos usem o WebKit. Nunca acontecia num computador ou num celular Android.

Levamos semanas para encontrar. Publicamos várias correções no caminho. Cada uma era uma teoria razoável sobre o carregamento de imagens, e nenhuma era a causa.

As teorias que estavam erradas

Tudo no sintoma apontava para a imagem: uma fotografia chegando tarde, sem espaço reservado, empurrando o conteúdo para baixo ao chegar. Então reservamos o espaço com largura, altura e proporção. Pré-carregamos a fotografia a partir do cabeçalho do documento. Preenchemos o espaço reservado com uma prévia desfocada, para que nunca ficasse branco. Cada mudança melhorou a página de forma mensurável, e nenhuma tocou no erro.

Tentamos reproduzir o problema no Chromium, com a rede limitada à velocidade de um celular lento. O destaque estava montado desde o primeiro quadro. Instalamos o WebKit de verdade num servidor e seguramos todas as imagens e fontes por dois segundos e meio. Mesmo resultado. No laboratório, a página estava ótima.

Meça onde acontece

Nesse ponto, paramos de chutar. Acrescentamos à página um script pequeno e temporário, só para celulares, que registrava onde o destaque realmente estava a cada cem milissegundos durante os primeiros cinco segundos e depois enviava uma linha de volta ao nosso servidor. Tudo tinha menos de cinquenta linhas.

// Sample the hero's position for five seconds, then send one beacon.
const hero = document.querySelector("header.pagehead");
const samples = [];
const t0 = performance.now();
const tick = setInterval(() => {
  const r = hero.getBoundingClientRect();
  samples.push([
    Math.round(performance.now() - t0),
    Math.round(r.top), Math.round(r.height),
    getComputedStyle(hero).display,
    document.styleSheets.length,
  ]);
  if (samples.length >= 50) {
    clearInterval(tick);
    navigator.sendBeacon("/api/hero-trace.json", JSON.stringify(samples));
  }
}, 100);

Três carregamentos de página no celular que mostrava o problema, e a resposta estava nos números.

O que o registro mostrou

Aos 12 milissegundos depois de o script começar, o destaque tinha 992 pixels de altura e estava logo abaixo da barra de navegação, com duas folhas de estilo na página. Aos 114 milissegundos, o destaque tinha zero pixel de altura na posição zero, o display calculado era none e havia quatro folhas de estilo na página. Aos 1.554 milissegundos, ele estava de volta.

Nada na página acrescenta folhas de estilo. Nenhuma regra do nosso CSS consegue definir aquele elemento como display none. Nenhum script da página mexe nele. Então alguma coisa de fora da página estava injetando duas folhas de estilo no primeiro carregamento, e uma delas escondia o nosso destaque.

O destaque dessas três páginas tinha as classes ad-hero, ad-heroimg e ad-sub. O prefixo era uma abreviação de agencies e advocacy (agências e defesa de causas), dois dos mercados que essas páginas atendem. Um bloqueador de anúncios não sabe disso.

Os filtros cosméticos escondem elementos cujos nomes de classe começam com ad-, e os bloqueadores de conteúdo do iOS injetam exatamente essas regras como folhas de estilo quando uma página carrega pela primeira vez. A segunda passada, um segundo e meio depois, restaurava o elemento, e é por isso que ele acabava aparecendo. Ao recarregar, as regras do bloqueador já estavam no lugar, então não havia nada para piscar.

A correção

Renomear três classes. O destaque agora é mk-hero, mk-heroimg e mk-sub nas nove páginas que as usavam, nos três idiomas, e há uma nota no topo da folha de estilo para que ninguém volte a nomear uma classe desse jeito. A correção estava no ar doze minutos depois de o registro voltar.

/* Class names: never start one with "ad", "ads", "advert", "sponsor",
   "promo", "banner" or "popup". Ad blockers' cosmetic filters hide
   elements by such prefixes. */

O que verificar no seu próprio site

Abra o código-fonte de qualquer página e procure valores de class= e id= que comecem com ad, ads, advert, sponsor, promo, banner ou popup. Os comuns em sites de associações e de organizações sem fins lucrativos são ad-banner para uma barra de avisos, sponsor-logos para quem pagou pela conferência e promo para a campanha de filiação. Uma parte significativa dos seus visitantes nunca vê nada disso, e você não vai perceber, porque no seu computador tudo parece normal.

Se alguns visitantes relatam um erro que você não consegue reproduzir, não publique mais uma teoria. Coloque uma medição na página por um dia. Ela é menor do que a correção e mostra o que realmente está acontecendo.