Blog / PageSpeed e Clarity: como decido o que otimizar primeiro
PageSpeed e Clarity: como decido o que otimizar primeiro
Por Marcos Henrique Corrêa · tecnologia ·
Resumo: Este artigo descreve como o blog marck0101 decide o que otimizar primeiro, combinando métricas técnicas de desempenho (PageSpeed Insights e Core Web Vitals) com dados de comportamento de leitores reais (Microsoft Clarity), dentro de um processo de Otimização da Taxa de Conversão (CRO). Em vez de depender de feedback direto ou da opinião do autor, a abordagem parte de pesquisas e estudos de caso publicados por grandes empresas de tecnologia e transforma esses padrões de mercado em hipóteses testáveis. São apresentados a justificativa, o público e o escopo, o referencial teórico, as hipóteses, a metodologia e as intervenções já aplicadas no código e um diagnóstico inicial com dados reais do PageSpeed Insights, Microsoft Clarity, Google Analytics 4 e Google Search Console.
Palavras-chave: CRO; Core Web Vitals; PageSpeed Insights; Microsoft Clarity; Google Analytics 4; experiência do usuário.
1 INTRODUÇÃO
Performance sem medição é opinião. Dois instrumentos guiam as decisões de otimização do marck0101: o PageSpeed Insights, para as métricas técnicas de velocidade, e o Microsoft Clarity, para observar o que o visitante real faz por meio de mapas de calor e gravações de sessão.
A maioria dos leitores de um blog não envia mensagem, não comenta e não responde pesquisas. O silêncio, porém, não significa ausência de feedback: cada rolagem interrompida, clique sem resposta ou saída precoce é um dado. A pergunta que orienta este trabalho é: como transformar sinais implícitos de navegação e padrões de mercado já validados em prioridades concretas de melhoria?
Essa forma de pensar vem mais da gestão de tráfego do que do desenvolvimento web tradicional. O desenvolvedor costuma ter como objetivo entregar a página funcionando e rápida; o gestor de tráfego pergunta o que acontece depois que o visitante chega e quanto daquele acesso se converte em leitura, retorno ou inscrição.
2 JUSTIFICATIVA
A relação entre velocidade e resultado de negócio está documentada por estudos de grande escala. Em pesquisa conduzida pela Deloitte a pedido do Google, uma melhoria de apenas 0,1 segundo na velocidade de sites móveis esteve associada a aumento de 8,4% nas conversões no varejo e de 10,1% no setor de viagens (Deloitte; Google, 2020). Dados do Google indicam ainda que, quando o tempo de carregamento passa de 1 para 3 segundos, a probabilidade de rejeição (bounce) aumenta 32% (Google, 2017).
Estudos de caso confirmam o efeito em ambientes controlados. A Vodafone conduziu um teste A/B em que a versão com LCP 31% mais rápido gerou 8% mais vendas (Web.dev, 2021). Nesses casos, performance deixa de ser apenas assunto técnico e passa a ser variável de negócio.
Figura 1 – Efeitos de desempenho em resultados de negócio
Fonte: elaborado pelo autor com dados de Deloitte e Google (2020), Web.dev (2021) e Google (2017).
Há também uma justificativa metodológica: intuição costuma falhar. Kohavi e Thomke (2017) relatam que, na Microsoft, apenas cerca de um terço dos experimentos melhorou as métricas que pretendia melhorar. Ou seja, mesmo equipes experientes erram a maior parte das apostas quando não medem. Para um blog autoral, a implicação é direta: a opinião do autor sobre o que o leitor quer, vale menos do que os dados de como o leitor se comporta.
3 PÚBLICO-ALVO E ESCOPO
3.1 Para quem
O trabalho tem dois públicos. O primeiro são os leitores do blog, que se beneficiam de páginas mais rápidas, acessíveis e de conteúdo mais alinhado aos seus interesses, sem precisar pedir por isso. O segundo são desenvolvedores, profissionais de marketing e gestores de tráfego que queiram aplicar o mesmo raciocínio em seus próprios projetos.
3.2 Onde
O escopo é o blog público marck0101 (páginas de listagem e de post), com acesso predominantemente por busca orgânica e redes sociais. O painel administrativo fica fora da análise de comportamento, mas entra na análise de desempenho, porque o peso das ferramentas internas não pode vazar para o leitor.
4 REFERENCIAL TEÓRICO
4.1 O que o PageSpeed mede e por que importa
O PageSpeed Insights reporta as Core Web Vitals, três métricas que o Google considera essenciais para a experiência na página (Google, 2024):
LCP (Largest Contentful Paint): tempo até o maior elemento visível carregar, geralmente a imagem de capa do post. Meta: até 2,5 segundos.
INP (Interaction to Next Paint): tempo de resposta a cliques e toques. Substituiu o FID em março de 2024. Meta: até 200 milissegundos.
CLS (Cumulative Layout Shift): mede o quanto o layout "pula" durante o carregamento, por exemplo quando um texto se desloca porque uma imagem sem dimensões definidas termina de carregar depois. Meta: até 0,1.
Essas métricas compõem os sinais de experiência na página usados pelo Google. É importante não superestimar o peso delas: relevância de conteúdo continua sendo o fator dominante no ranqueamento. Ainda assim, entre páginas de relevância semelhante, a experiência pode desempatar, e uma página lenta perde leitores antes mesmo de o ranqueamento entrar em jogo.
4.2 O que o Clarity mostra que o PageSpeed não mostra
O PageSpeed diz "isso está lento". O Clarity mostra "as pessoas tentam clicar aqui e nada acontece" ou "ninguém rola até o final do post". É a diferença entre medir performance técnica e observar comportamento real. A ferramenta destaca automaticamente sinais de frustração (Microsoft, 2024):
Rage clicks: cliques repetidos e rápidos no mesmo ponto, típicos de algo que deveria responder e não responde.
Dead clicks: cliques em elementos que parecem clicáveis, mas não são.
Excessive scrolling: rolagem acima do esperado, sugerindo que o leitor procura algo que não encontra.
Quick backs: o visitante entra numa página e volta logo em seguida, sinal de expectativa frustrada.
Esses dados ganham sentido quando comparados a padrões já estudados. A Nielsen Norman Group demonstrou, com rastreamento ocular, que leitores na web escaneiam o texto em padrão semelhante a um "F", concentrando atenção no início dos parágrafos e nos subtítulos (Nielsen, 2006), e que em média leem no máximo 28% das palavras de uma página (Nielsen, 2008). Se o mapa de rolagem do Clarity mostra abandono na metade do post, o padrão de mercado já sugere onde agir: subtítulos mais claros, parágrafos mais curtos e informação principal no início.
4.3 O processo de CRO
CRO (Conversion Rate Optimization, ou Otimização da Taxa de Conversão) é o processo sistemático de aumentar a proporção de visitantes que realizam uma ação desejada. Em um blog, "conversão" não significa venda: pode ser ler até o fim, clicar em um post relacionado, voltar ao site ou assinar a newsletter. O processo não é uma lista de truques de layout, e sim um ciclo de pesquisa e experimentação com cinco etapas.
Figura 2 – Ciclo de Otimização da Taxa de Conversão (CRO)
Fonte: elaborado pelo autor com base em Goward (2013), Rodden, Hutchinson e Fu (2010) e Kohavi, Tang e Xu (2020).
a) Definição de objetivos e métricas. Antes de otimizar, é preciso saber o que significa sucesso. O framework HEART, criado pelo Google, organiza métricas de experiência em cinco dimensões: felicidade, engajamento, adoção, retenção e sucesso na tarefa (Rodden; Hutchinson; Fu, 2010). Para o marck0101, engajamento (profundidade de rolagem e tempo de leitura) e retenção (visitantes que retornam) são as dimensões centrais.
b) Pesquisa e diagnóstico. Combina dados quantitativos (o que acontece e onde: PageSpeed, Search Console, analytics) e qualitativos (por que acontece: gravações de sessão e mapas de calor). O quantitativo aponta o problema; o qualitativo ajuda a entender a causa.
c) Formulação de hipóteses. Cada problema vira uma hipótese no formato "se alterarmos X, esperamos Y, porque Z". O "porque" é obrigatório e deve se apoiar em evidência: um dado próprio ou um padrão documentado por pesquisa de mercado.
d) Priorização. Nem toda hipótese merece ser testada agora. Frameworks como o PIE avaliam cada ideia por Potencial de melhoria, Importância da página (volume de tráfego) e Facilidade de implementação (Goward, 2013). O modelo ICE, popularizado no growth hacking, segue lógica parecida com Impacto, Confiança e Facilidade.
e) Experimentação, análise e iteração. O padrão-ouro é o experimento controlado (teste A/B), em que parte do tráfego vê a versão original e parte vê a alteração (Kohavi; Tang; Xu, 2020). Empresas como Microsoft, Google e Booking.com executam milhares de experimentos por ano, e ganhos aparentemente pequenos acumulam valor grande: uma mudança simples na exibição de títulos de anúncios no Bing gerou aumento de 12% na receita (Kohavi; Thomke, 2017; Thomke, 2020).
Em sites de baixo tráfego, como um blog em crescimento, testes A/B com significância estatística podem levar meses. Nesse cenário, a alternativa adotada é a comparação antes e depois com janelas de tempo equivalentes, sempre apoiada em padrões já validados por quem tem volume para testar. Em outras palavras: as big techs fazem os testes em escala; o blog aplica as conclusões e mede se o efeito se repete no próprio contexto.
5 HIPÓTESES
A partir do referencial teórico, foram formuladas as seguintes hipóteses de trabalho:
H1: reduzir o LCP das páginas de post para menos de 2,5 segundos diminui a taxa de rejeição na entrada vinda da busca orgânica, conforme a relação entre tempo de carregamento e bounce observada pelo Google (2017).
H2: eliminar deslocamentos de layout (CLS abaixo de 0,1) reduz cliques acidentais e dead clicks registrados pelo Clarity.
H3: estruturar os posts com subtítulos descritivos e parágrafos curtos, alinhados ao padrão de leitura em F, aumenta a profundidade média de rolagem.
H4: categorias e formatos com maior tempo de leitura e maior taxa de retorno indicam os temas de maior interesse do público e devem orientar o calendário editorial.
6 METODOLOGIA
6.1 Como os dados são coletados
A coleta combina quatro fontes: o PageSpeed Insights, com dados de laboratório (Lighthouse) e de campo (Chrome UX Report); o Microsoft Clarity, para mapas de calor, gravações e sinais de frustração; o Google Search Console, para impressões, cliques e posição média; e o rastreamento de acessos do próprio blog, com tempo de leitura e páginas por sessão. Nenhuma dessas fontes depende de o leitor se manifestar ativamente.
6.2 Como as prioridades são definidas
A regra de priorização aplica a lógica do PIE ao contexto do blog. Se o PageSpeed aponta um problema que afeta todas as páginas, como LCP alto por imagem não otimizada, a prioridade é alta, porque o impacto alcança todos os leitores. Se o Clarity mostra um padrão isolado, como fricção em um componente específico, ele compete por atenção com outras prioridades de produto, ponderado pelo tráfego daquela página. A decisão não é automática, mas passa a ser explicável.
6.3 Intervenções já aplicadas no código
O ciclo de medição já resultou em três mudanças estruturais:
Conversão automática para WebP. Toda imagem enviada é convertida para um formato mais leve, com menos peso de arquivo e a mesma qualidade visual, sem esforço manual. Atua diretamente sobre o LCP (H1).
Carregamento separado por área. Quem acessa só o blog público nunca baixa as ferramentas do painel administrativo, como editor de texto, armazenamento de imagem e calendário. Esse peso só carrega para quem entra no painel, o que reduz o JavaScript entregue ao leitor e favorece o INP.
Conteúdo pronto antes do JavaScript. Nas páginas de post e na listagem do blog, o servidor entrega a página já montada (renderização no servidor), em vez de o navegador esperar o JavaScript rodar para mostrar o conteúdo. Isso reduz o tempo até o conteúdo aparecer e facilita a indexação pelo Google.
7 RESULTADOS E DISCUSSÃO
Esta seção apresenta o diagnóstico atual do blog, levantado em 27 de outubro de 2026 com as ferramentas descritas na metodologia. Os números são de um projeto em fase inicial e servem como linha de base (baseline): é contra eles que as próximas mudanças serão comparadas.
7.1 Desempenho técnico
No teste de laboratório do PageSpeed Insights para celular, a página de listagem do blog obteve nota 53 em desempenho e nota 100 em acessibilidade, boas práticas e SEO. Ou seja, a base técnica e semântica está correta, mas a velocidade percebida ainda não.
Figura 3 – Diagnóstico do PageSpeed Insights da página /blog (celular)
Fonte: PageSpeed Insights, relatório gerado em 27 out. 2026.
Os dois indicadores críticos são o LCP de 7,6 segundos, três vezes acima da meta de 2,5 segundos, e o CLS de 0,311, também na faixa ruim. O diagnóstico aponta como principais oportunidades o cache de arquivos estáticos (economia estimada de 391 KiB), a remoção de JavaScript não utilizado (216 KiB) e solicitações que bloqueiam a renderização (350 ms).
Os dados de campo do Clarity, coletados de visitantes reais, confirmam a direção: LCP de 4 segundos (precisa melhorar), CLS de 0,42 (ruim) e INP de 140 ms (bom). A interatividade, portanto, não é o gargalo; o problema está em quanto tempo o conteúdo principal leva para aparecer e no quanto o layout se mexe durante o carregamento.
Figura 4 – Core Web Vitals do blog comparadas às metas do Google
Fonte: elaborado pelo autor com dados do PageSpeed Insights (27 out. 2026) e do Microsoft Clarity (últimos 30 dias).
7.2 Comportamento dos leitores
Nos últimos 30 dias, o Clarity registrou 68 sessões válidas, com média de 4,35 páginas por sessão, profundidade de rolagem de 71,53% e 2,2 minutos de tempo ativo. São sinais de um público que navega e lê. Ao mesmo tempo, dois indicadores de frustração chamam atenção.
Figura 5 – Sinais de comportamento registrados pelo Clarity
Fonte: elaborado pelo autor com dados do Microsoft Clarity, últimos 30 dias (68 sessões, 25 sessões de bots excluídas).
Os retornos rápidos aparecem em 52,94% das sessões: o visitante abre uma página e volta logo em seguida. Os cliques mortos, em 30,88%, indicam elementos que parecem clicáveis e não respondem. Cruzando com a seção anterior, há uma explicação plausível para parte desses cliques: com CLS alto, o elemento sai do lugar no momento do toque e o clique cai em área vazia. Essa relação é justamente o que a hipótese H2 propõe testar.
7.3 Origem do tráfego e interesse por conteúdo
No Google Analytics 4, os 28 dias analisados somaram 67 sessões, com taxa de interação de 77,61%. O canal direto concentrou 80,6% das sessões, mas o dado mais revelador está no tempo de interação.
Figura 6 – Tempo médio de interação por canal de origem
Fonte: elaborado pelo autor com dados do Google Analytics 4, 29 set. a 26 out. 2026 (67 sessões).
Quem chega pela newsletter passa em média 4 minutos e 15 segundos interagindo, quase três vezes mais que o tráfego direto e cerca de 17 vezes mais que o tráfego de redes sociais. Isso reforça o valor da lista de e-mails como canal de leitura aprofundada e alimenta a hipótese H4: o comportamento, e não a opinião, mostra onde está o público mais engajado.
A busca orgânica ainda é incipiente. Em três meses, o Google Search Console registrou 32 impressões e 3 cliques, com CTR de 9,4% e posição média de 7,3. A taxa de cliques é saudável para a posição, mas o volume de impressões mostra que o trabalho de SEO está no começo, o que torna ainda mais importante corrigir as Core Web Vitals antes que o tráfego orgânico cresça.
7.4 Limitações
Duas limitações precisam ser declaradas. A primeira é o tamanho da amostra: com dezenas de sessões, as porcentagens oscilam muito e não permitem conclusões estatísticas; os dados de campo de desempenho no Clarity, por exemplo, vêm de apenas 6 visualizações de página. A segunda é a contaminação por tráfego interno: entre as páginas de entrada aparecem 24 acessos ao painel /admin, e o usuário mais frequente soma 14 sessões, o que sugere visitas do próprio autor. Parte do tráfego direto e dos retornos rápidos pode ser trabalho de edição, não leitura. Excluir o tráfego interno por filtro de IP no GA4 e no Clarity passa a ser a primeira ação do ciclo, pois sem dado limpo nenhuma hipótese pode ser avaliada com segurança.
7.5 Prioridades definidas a partir do diagnóstico
Aplicando a regra de priorização da seção 6.2, as próximas ações ficam assim:
Limpar os dados: excluir tráfego interno no GA4 e no Clarity. Baixo esforço, pré-requisito para todo o resto.
Corrigir o CLS (H2): reservar espaço para imagens e componentes carregados depois. Afeta todas as páginas e está ruim tanto no laboratório quanto no campo.
Reduzir o LCP (H1): configurar cache de longa duração, priorizar o carregamento da imagem principal e eliminar recursos que bloqueiam a renderização.
Investigar os retornos rápidos: assistir às gravações dessas sessões para separar expectativa frustrada de navegação normal entre posts.
Fortalecer a newsletter (H4): dar mais destaque à assinatura, já que é o canal de maior engajamento.
8 CONCLUSÃO
A otimização de um blog não precisa começar pela opinião do autor nem esperar que o leitor reclame. Pesquisas de grandes empresas de tecnologia já mostraram, com volume e rigor que um projeto pequeno não alcançaria sozinho, que velocidade afeta conversão, que leitores escaneiam em vez de ler e que a intuição erra na maioria das vezes. O papel de quem mantém o site é aplicar esses padrões e verificar, com dados próprios, se o efeito se confirma.
A combinação de PageSpeed e Clarity dentro de um ciclo de CRO traz um benefício que vai além da técnica: além de melhorar acessibilidade e desempenho, revela que tipo de conteúdo prende a atenção e qual é abandonado. Assim, o mesmo processo que orienta a otimização de código passa a orientar a pauta editorial. O diagnóstico inicial já mostrou isso na prática: as notas de acessibilidade e SEO estão no máximo, mas LCP e CLS precisam de correção, e os leitores que chegam pela newsletter são os que mais leem. Sem os dados, a prioridade seria um palpite.
Cabe uma ressalva: os números apresentados aqui são reais e foram mantidos como estão, inclusive os ruins. Uma nota 53 de desempenho e um CLS na faixa vermelha não são motivo de vergonha, e sim o ponto de partida. É a partir deles que o plano de ação da seção 7.5 foi construído, com problemas identificados, prioridades definidas e uma linha de base para medir se as correções funcionaram. Ruim não é ter problemas; ruim é ter muitos problemas sem saber deles, ou saber e não fazer nada. Compartilhar o diagnóstico é também um compromisso público de voltar a esses números e mostrar o que mudou.
Performance não é destino, é hábito de medição recorrente. O próximo post da série sai do "por baixo do capô" e entra no que o leitor e o admin realmente usam no dia a dia: calendário editorial, lixeira e newsletter.
REFERÊNCIAS
DELOITTE; GOOGLE. Milliseconds make millions: a study on how improvements in mobile site speed positively affect a brand's bottom line. Dublin: Deloitte, 2020. Disponível em: https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf. Acesso em: 27 out. 2026.
GOOGLE. Find out how you stack up to new industry benchmarks for mobile page speed. Think with Google, [s. l.], fev. 2017. Disponível em: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/. Acesso em: 27 out. 2026.
GOOGLE. Web Vitals. web.dev, [s. l.], 2024. Disponível em: https://web.dev/articles/vitals. Acesso em: 27 out. 2026.
GOWARD, Chris. You should test that!: conversion optimization for more leads, sales and profit or the art and science of optimized marketing. Indianapolis: Sybex, 2013.
KOHAVI, Ron; TANG, Diane; XU, Ya. Trustworthy online controlled experiments: a practical guide to A/B testing. Cambridge: Cambridge University Press, 2020.
KOHAVI, Ron; THOMKE, Stefan. The surprising power of online experiments. Harvard Business Review, Boston, v. 95, n. 5, p. 74-82, set./out. 2017.
MICROSOFT. Microsoft Clarity documentation. Redmond: Microsoft, 2024. Disponível em: https://learn.microsoft.com/en-us/clarity/. Acesso em: 27 out. 2026.
NIELSEN, Jakob. F-shaped pattern for reading web content. Nielsen Norman Group, Fremont, 16 abr. 2006. Disponível em: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/. Acesso em: 27 out. 2026.
NIELSEN, Jakob. How little do users read? Nielsen Norman Group, Fremont, 5 maio 2008. Disponível em: https://www.nngroup.com/articles/how-little-do-users-read/. Acesso em: 27 out. 2026.
RODDEN, Kerry; HUTCHINSON, Hilary; FU, Xin. Measuring the user experience on a large scale: user-centered metrics for web applications. In: CONFERENCE ON HUMAN FACTORS IN COMPUTING SYSTEMS, 28., 2010, Atlanta. Proceedings [...]. New York: ACM, 2010. p. 2395-2398.
THOMKE, Stefan H. Experimentation works: the surprising power of business experiments. Boston: Harvard Business Review Press, 2020.
WEB.DEV. Vodafone: a 31% improvement in LCP increased sales by 8%. web.dev, [s. l.], 2021. Disponível em: https://web.dev/case-studies/vodafone. Acesso em: 27 out. 2026.
Perguntas frequentes
O que o PageSpeed Insights mede?
Principalmente LCP (tempo até o maior elemento visível carregar), CLS (layout que pula enquanto carrega) e INP (resposta a cliques e toques). O Google usa essas métricas como sinal de ranqueamento.
Qual a diferença entre PageSpeed e Microsoft Clarity?
O PageSpeed mede performance técnica. O Clarity mostra o comportamento real dos visitantes, com mapa de calor e gravação de sessão, como cliques em algo que não é clicável.
Como decidir o que otimizar primeiro?
Problemas que afetam todas as páginas, como LCP alto por imagem pesada, têm prioridade alta. Atritos isolados vistos no Clarity entram na fila junto com as outras prioridades de produto.