Sites
Oito camadas de desfoque, 20 quadros por segundo
A gente copiou um efeito bonito, mediu, e descobriu que ele custava dois terços da fluidez da página. O conserto tirou sete camadas e ninguém notou a diferença — visual.
Luís Felipe3 min de leitura
O rodapé deste site tem uma faixa desfocada no pé da tela. O conteúdo passa por baixo dela e aparece borrado, então o texto do rodapé continua legível mesmo sobre uma foto ou um mockup claro.
A primeira versão replicava a técnica ao pé da letra: oito camadas empilhadas, cada uma com o dobro do desfoque da anterior — 0,25px, 0,5px, 1px, e assim até 32px — e cada uma com uma janela de máscara descendo 12,5%, de forma que as oito somassem uma rampa suave. É uma construção elegante. O resultado na tela era exatamente o pretendido.
E derrubava a página.
O que a medição mostrou
A rolagem da home caía para 20 a 25 quadros por segundo. De 137 quadros medidos, mais de 100 passaram de 33 milissegundos — ou seja, a maioria dos quadros demorava mais que o dobro do orçamento de um quadro a 60fps.
O motivo é que a faixa é fixed. O fundo atrás dela muda a cada quadro da
rolagem, então as oito camadas recalculavam o desfoque todo quadro.
A hipótese óbvia era o tamanho do desfoque: 32px de raio parece caro. Testamos: limitamos todos os raios a 4px. O número mal se moveu — foi de 20,7 para 25,8fps. Cortar camadas, por outro lado, movia muito.
O perfil explicou por quê: o custo é por passe, não por raio. Cada
backdrop-filter é uma leitura e um desfoque do fundo inteiro. O tamanho do
raio quase não pesa perto disso. Oito camadas são oito leituras do fundo, por
quadro, para sempre.
O conserto
Uma camada de 8px, com a rampa feita por uma máscara em gradiente em vez de por
empilhamento, mais will-change: backdrop-filter para o compositor manter a
faixa numa superfície própria.
Resultado medido: 59 a 60fps, com zero quadros longos. Indistinguível de não ter desfoque nenhum, em custo.
A rampa ficou um pouco menos gradual que a de oito camadas. Olhando as duas lado a lado, dá para ver a diferença se você souber onde olhar. A rolagem travada não valia isso.
Por que este artigo existe
Não porque o truque seja especial — é um backdrop-filter, está na
documentação. É porque a decisão só apareceu depois de medir, e medir é a
parte que quase ninguém faz.
Um efeito bonito que você copiou de outro site chega ao seu com o custo dele embutido, e o custo não aparece na sua máquina de trabalho: aparece no celular de quem visita, três anos mais velho, com dez abas abertas. O visual você confere de olho. A fluidez, não — você precisa abrir o perfilador, rolar a página e ler os números.
Foi o que fizemos aqui, e é o que fazemos em site de cliente. Quando você lê numa das nossas páginas de serviço que uma nota de PageSpeed ficou acima de 90, a conta por trás é essa: alguém abriu a ferramenta, olhou o número, e quando ele estava ruim foi procurar qual efeito bonito estava cobrando a conta.
Perguntas frequentes
Por que o desfoque pesa tanto numa faixa fixa?
Porque o fundo atrás dela muda a cada quadro da rolagem. Um elemento parado desfoca uma vez e o navegador guarda o resultado; um elemento fixo sobre conteúdo que rola precisa refazer a conta em cada quadro.
Diminuir o raio do desfoque resolve?
Quase nada, e foi o que a medição mostrou aqui: com todos os raios em 4px, o ganho foi de 20,7 para 25,8fps. O custo está no número de passes, não no tamanho de cada um.
Como eu sei se um efeito do meu site está cobrando essa conta?
Abrindo o perfilador do navegador, gravando uma rolagem e olhando quantos quadros passam de 16ms. É a única forma: o efeito parece igual nos dois casos, e a diferença só aparece em número.
Vale a pena ter o efeito, então?
Vale quando ele resolve um problema real — aqui, manter o rodapé legível sobre foto e mockup — e quando o custo medido é aceitável. O que não vale é manter um efeito porque ficou bonito, sem nunca ter medido o preço.