Este guia explica o que é above the fold, se a dobra ainda existe num mundo de centenas de tamanhos de tela, o que o Google avalia nessa área, o que colocar nela, a relação com Core Web Vitals e como testar em vários dispositivos.
O que é above the fold?
Na banca de jornal, o exemplar fica dobrado ao meio, e o que está acima da dobra é o que a pessoa vê antes de decidir comprar: a manchete, a foto principal. A expressão migrou para a web com o mesmo sentido: o que a pessoa vê antes de decidir ficar.
Na tela, above the fold é a área do viewport, o retângulo visível do navegador, no momento em que a página carrega. Tudo o que exige rolagem está "below the fold", abaixo da dobra. A diferença para o jornal é que a dobra do jornal é uma linha fixa e a da web é uma para cada combinação de dispositivo, navegador e orientação.
O conceito importa por causa da atenção. O Nielsen Norman Group mediu com rastreamento ocular em 2010, com 21 usuários e 57.453 fixações em 541 páginas, que 80,3% do tempo de visualização ficava acima da dobra. A atualização de 2018, com 120 participantes e mais de 130 mil fixações, encontrou 57% acima da dobra e 74% nas duas primeiras telas. A queda de 80% para 57% mostra que as pessoas rolam mais do que rolavam; a conclusão do estudo é que "o padrão de queda brusca de atenção depois da dobra continua o mesmo".
Fonte: Nielsen Norman Group, "Scrolling and Attention", estudo original de março de 2010 (21 usuários) e atualização de abril de 2018 (120 participantes).
A dobra ainda existe em 2026?
Existe, mas não é uma linha. É uma faixa. Os dados de resolução de tela do StatCounter para agosto de 2026 mostram o problema: em celular, as quatro resoluções mais usadas no mundo são 414×896 (13,6%), 360×800 (9,3%), 390×844 (6,8%) e 393×873 (5,3%); em desktop, 1920×1080 responde por 22,2%. E o tráfego se divide quase ao meio: 49,4% mobile, 49,1% desktop, 1,5% tablet.
Fonte: StatCounter Global Stats, resolução de tela e participação por plataforma, agosto de 2026, mundial.
Isso significa que "acima da dobra" no celular mais comum são cerca de 800 pixels de altura, descontando a barra do navegador, e no desktop mais comum são cerca de 950. O conteúdo que cabe num é diferente do que cabe no outro, e nenhum deles é a dobra do seu notebook.
A consequência prática: em vez de desenhar para uma linha, desenhe para a pergunta "o que a pessoa precisa ver primeiro, em qualquer tela?". Uma margem de segurança que este guia recomenda é fazer a resposta caber nos primeiros 600 pixels de altura, abaixo do que qualquer celular da lista mostra depois da barra do navegador, e é onde os elementos da seção "o que colocar" precisam estar.
O que o Google avalia acima da dobra?
O Google tem três posições públicas sobre a primeira dobra, de épocas diferentes:
1. O algoritmo de layout de página (2012). Em janeiro de 2012, o Google anunciou no blog do Search Central uma mudança para sites "com pouco conteúdo visível acima da dobra" ou que dedicam "uma grande fração da tela inicial a anúncios", que "podem não ranquear tão bem". O post dizia que a mudança afetava "menos de 1% das buscas globalmente" e não atingia sites "que colocam anúncios acima da dobra em grau normal". O Google nunca anunciou a aposentadoria desse sistema, mas ele também não aparece no guia de sistemas de ranqueamento atualizado em dezembro de 2025, nem entre os ativos nem entre os aposentados. O princípio, conteúdo primeiro, anúncio depois, sobreviveu na documentação de experiência de página.
2. Intersticiais intrusivos (2017). Em agosto de 2016, o Google anunciou que, a partir de janeiro de 2017, páginas em que "o conteúdo não é facilmente acessível" ao chegar da busca em celular "podem não ranquear tão bem". Intrusivo, segundo o post: pop-up que cobre o conteúdo principal, intersticial de página inteira antes do conteúdo, e layout em que a área acima da dobra parece um intersticial. Aceitáveis: avisos legais (cookies, idade), login para conteúdo não indexável e banners "de tamanho razoável". A documentação atual sobre intersticiais e diálogos, de dezembro de 2025, mantém a posição: eles "dificultam o entendimento do conteúdo, o que pode levar a desempenho ruim na busca".
3. Core Web Vitals. A documentação de experiência de página diz que "os Core Web Vitals são usados pelos nossos sistemas de ranqueamento" e que "não existe um sinal único" de experiência de página. O LCP, uma das três métricas, é medido na primeira dobra, como a próxima seção explica.
O que os três têm em comum: o Google não pune a dobra, pune o que atrapalha o acesso ao conteúdo nela. Anúncio, pop-up e carregamento lento acima da dobra são o mesmo problema visto de três ângulos.
O que colocar above the fold?
Para uma página de conteúdo, a resposta é a mesma que este blog aplica em todo artigo: a pessoa chegou com uma pergunta e precisa ver, sem rolar, que a resposta está aqui. Os elementos, em ordem:
- O título (H1), com a palavra-chave que a pessoa buscou. Confirma que ela está no lugar certo.
- A resposta direta, em uma ou duas frases. É o lede-resposta que abre cada artigo aqui. Quem lê só isso já sai com a informação; quem quer mais rola.
- O sinal de confiança: autor, data, tempo de leitura. Diz quem escreveu e se está atualizado.
- O começo do conteúdo, não uma imagem de banco de imagens ocupando a tela inteira. A capa pode estar ali, mas dividindo espaço com texto.
Para uma página de produto ou serviço, a lógica é a de conversão (CRO): nome do produto, preço, a foto principal, o botão de ação e um motivo para clicar (frete, prazo, garantia). O guia de taxa de conversão trata do que vem depois do clique.
O que tirar da dobra: o carrossel de banners que raramente recebe clique, o vídeo em autoplay que atrasa o carregamento, o pop-up que cobre o conteúdo, que o Google classifica como intersticial intrusivo, e o "hero" de tela inteira com uma frase de efeito e nenhuma informação. Um teste simples: tire uma captura da primeira dobra no celular e pergunte a alguém do que a página trata. Se a resposta demora, a dobra está errada.
Above the fold e Core Web Vitals: qual a ligação?
O LCP (Largest Contentful Paint) é a métrica dos Core Web Vitals que mede a primeira dobra. A documentação do Google em web.dev define: o "tempo de renderização da maior imagem, bloco de texto ou vídeo visível no viewport". Só a parte do elemento dentro do viewport conta para o tamanho, e os candidatos são imagens, vídeos (o poster ou o primeiro quadro), fundos definidos em CSS e blocos de texto.
Os limites: bom até 2,5 segundos, ruim acima de 4 segundos, medidos no percentil 75 dos acessos reais (o valor abaixo do qual ficam 75% das visitas), com celular e desktop separados.
Fonte: Google, web.dev, "Largest Contentful Paint (LCP)", atualizado em setembro de 2025.
A ligação com o above the fold é direta: o elemento LCP é, por definição, o maior elemento acima da dobra. Se é uma imagem de capa de 800 KB, o LCP é o tempo de baixar essa imagem. Se é o título, o LCP é o tempo de a fonte carregar. Três decisões de dobra que mudam o LCP:
- Não use lazy loading no que está acima da dobra. O Web Almanac 2024 do HTTP Archive encontrou 9,5% das imagens de LCP com
loading="lazy", o que atrasa exatamente o elemento que a métrica mede. A documentação do Google sobre lazy loading pede para não aplicar em conteúdo visível na abertura. - Reduza o peso da imagem principal. WebP ou AVIF, dimensionada para a largura real de exibição. O guia de SEO para imagens mostra como.
- Carregue a fonte do título primeiro. Se o H1 é o elemento LCP,
font-display: swape pré-carregamento da fonte evitam a tela em branco. É ajuste de desenvolvedor ou de plugin de desempenho no WordPress; quem não tem nenhum dos dois resolve boa parte usando a fonte padrão do sistema no título.
O guia de otimização de sites coloca essas tarefas na ordem certa dentro do resto.
Como testar o above the fold em vários tamanhos de tela?
Quatro formas, sem instalar nada:
- Ferramentas do desenvolvedor do navegador. No Chrome, F12 e o ícone de dispositivo (Ctrl+Shift+M) abrem o modo responsivo, com presets de celulares e a opção de digitar qualquer largura e altura. Teste 360×800, 390×844 e 1920×1080, que cobrem as resoluções mais comuns do StatCounter, e veja o que aparece sem rolar.
- PageSpeed Insights. Em pagespeed.web.dev, cole a URL: o relatório mostra o LCP medido em usuários reais (quando há dados) e em laboratório, e aponta qual elemento é o LCP. Se for uma imagem com lazy loading ou um banner pesado, é a primeira coisa a corrigir.
- Mapa de calor de rolagem. O Microsoft Clarity, gratuito, mostra até que ponto da página as pessoas rolam e onde a atenção cai. É a versão do estudo do NN/g para o seu site: se 60% das visitas nunca passam da primeira dobra, o que está nela é tudo o que 60% viram. O guia de heatmap explica a leitura.
- Captura em cinco segundos. Mostre a captura da primeira dobra no celular para alguém que não conhece o site por cinco segundos e pergunte o que a página oferece. É o teste que custa cinco segundos e costuma revelar o "hero" vazio.
Conclusão
Above the fold é o que aparece antes de rolar, e continua concentrando 57% do tempo de atenção segundo o NN/g, mesmo com as pessoas rolando mais do que em 2010. O Google não pune a dobra em si, mas pune o que atrapalha o acesso ao conteúdo nela (anúncios em excesso, pop-ups, carregamento lento), e o LCP dos Core Web Vitals mede justamente o maior elemento dessa área. O próximo passo é abrir sua página principal no modo responsivo do Chrome em 360×800 e conferir se título, resposta e ação aparecem sem rolar.
