Verificador Mobile
Avalia o quão bem sua página de agendamento funciona em um celular, com uma pontuação de 0 a 100, usando a mesma rubrica fixa todas as vezes, e devolve uma lista de correções classificadas pelos pontos que cada correção recupera. Sem instalações e sem código: você fornece o link da página, algumas capturas de tela do celular e os números da ferramenta gratuita PageSpeed Insights do Google. Use antes de enviar anúncios ou e-mails para uma página, após um redesign, ou quando as ligações agendadas caírem e a maioria dos seus visitantes estiver em celulares. Funciona para qualquer página que termine em uma chamada agendada: uma landing page, uma página de carta de vendas em vídeo (VSL), uma página de inscrição ou a página inicial do seu site principal. Uma página hospedada pela sua ferramenta de calendário não é avaliada sozinha; ela é verificada como o caminho de agendamento da página que a linka.
Antes de começar
- Procure por um arquivo de Contexto de Negócio neste projeto ou chat. Se existir, leia-o primeiro e extraia: o link da página de agendamento, a oferta que a página vende, o que o botão principal deve dizer, a ferramenta de calendário ou agendamento, o construtor de páginas, quem edita a página (você ou um desenvolvedor), de onde os visitantes vêm (anúncios, Instagram, LinkedIn, e-mail) e a parcela de visitantes em celular, se conhecida.
- Se você já tiver o link e a busca na web ou busca web estiver ativada, abra a página você mesmo antes de perguntar qualquer coisa (Passo 3). Assim você saberá se ainda precisa do código-fonte da página.
- Peça apenas o que ainda estiver faltando. Coloque cada pergunta em uma mensagem, cada uma com uma breve razão do porquê você precisa dela. Nunca peça mais do que estes itens:
- O link da página ao vivo. Para que você possa ler a página e para que o PageSpeed teste a página real, não uma prévia do editor. Se o link for de uma página hospedada pela ferramenta de calendário, peça a página que envia as pessoas para ela. Se não houver, veja "Páginas de calendário hospedadas" no Passo 6.
- O modelo de celular usado para as capturas de tela. A largura da tela muda como o texto quebra e o quão grande um botão realmente é.
- A ação principal. Qual botão conta como "agendar", se a página tiver mais de um.
- Capturas de tela do celular. Capturas de tela normais, não uma captura longa. Se uma mensagem não couber todas, envie a página na primeira mensagem e o restante em uma segunda. a. Primeira tela: exatamente como carrega, sem rolagem, com a barra do navegador aparecendo. Uma imagem. b. Página inteira: role uma tela de cada vez e tire uma captura de tela normal a cada vez, de modo que cerca de um quinto de cada tela apareça novamente no topo da próxima. No máximo cerca de 12 por mensagem; se a página for mais longa, envie o restante na próxima mensagem. Opcional, apenas para ler as palavras: o PDF "Página Inteira" do Safari no iPhone ou a "Captura de rolagem" do Android. c. Caminho de agendamento: toque no botão principal e capture a tela de cada etapa até o botão final de Confirmar, no máximo cerca de 5. Pare por aí. Envie apenas se você aceitar que um agendamento real dispara seus pixels de anúncio (Meta e Google contam como lead ou chamada agendada), adiciona um contato e estágio no pipeline do CRM, e dispara seus textos e e-mails de confirmação, alertas da equipe e qualquer ligação de pré-atendimento ou agente de IA. Cancelar pode então iniciar sequências de não comparecimento ou cancelamento. Se você enviar: escolha um horário com 2 ou mais semanas de antecedência, use um nome ou e-mail marcado como TESTE, avise sua equipe primeiro e cancele logo em seguida. d. Pop-ups: qualquer pop-up que a página abrir, capturado enquanto ele estiver aberto. e. Navegador no aplicativo: envie para si mesmo o link da página em um DM do Instagram (ou abra-o a partir da sua bio ou de um anúncio) e percorra o caminho de agendamento dentro do navegador no aplicativo do Instagram ou Facebook. Capture a tela de qualquer etapa que pareça ou funcione de forma diferente do Safari ou Chrome. A maior parte do tráfego social chega aqui, e é onde as páginas de agendamento quebram com mais frequência.
- Números do PageSpeed, 2 capturas de tela. Pesquise "PageSpeed Insights", cole o link ao vivo, escolha Mobile e execute. Capture a seção de laboratório ("Diagnosticar problemas de desempenho"), não os dados de usuário real no topo: a pontuação de Desempenho, LCP, CLS, TBT, a pontuação de Acessibilidade e os nomes dos itens com falha em Desempenho, Acessibilidade e Boas Práticas, com suas "Economia estimada".
- Código-fonte da página, apenas se você não conseguiu ler a página sozinho. Em um computador: abra a página, clique com o botão direito, escolha Ver Código-Fonte da Página, salve-o e carregue-o como um arquivo .txt. Não cole no chat: o código-fonte de construtores de páginas pode ultrapassar 1 MB. Se você ainda não tiver o link, liste este item como opcional ("se eu não conseguir ler sua página a partir do link, isso evita uma segunda rodada").
- Não pare. Pontue o que a evidência que você tem pode provar, marque o restante como Não verificado e nomeie a única entrada faltante que adicionaria mais pontos à verificação. Sem números do PageSpeed, 55 pontos permanecem não verificados, então peça esses primeiro.
Como funciona
Trabalhe as etapas em ordem. Use palavras simples em todo lugar: defina um termo técnico uma vez, na primeira vez que você o usar.
Etapa 1. Definir o tamanho do celular
A rubrica é construída para um celular pequeno: 375 por 812 pixels CSS. Um pixel CSS é a unidade na qual as páginas web são construídas; uma captura de tela de celular tem de 2 a 3,5 pixels reais por pixel CSS.
| Telefone | Largura CSS |
|---|---|
| iPhone SE, 12 mini, 13 mini | 375 |
| iPhone 12 e mais novos, padrão e Pro | 390 a 402 |
| iPhone Plus, Air e Pro Max | 420 a 440 |
| Maioria dos celulares Android | 360 a 412 |
- Escala = largura da captura de tela em pixels dividida pela largura CSS (geralmente 3 em um iPhone). Qualquer comprimento na captura dividido pela escala dá pixels CSS.
- Uma tela = 812 px CSS em qualquer celular. Em um iPhone 3x, isso são 2436 pixels de captura de tela. Uma captura de tela real mostra menos página do que isso porque as barras do navegador ocupam espaço: visualmente, uma captura de tela tem cerca de 0,8 a 0,9 telas. Use 812 para E2, E5 e toda contagem de telas, para que as pontuações sejam comparáveis entre celulares e execuções.
- Posições: empilhe as capturas de tela sobrepostas combinando a faixa repetida, some a nova altura da página que cada uma mostra em px CSS do topo da página (logo abaixo da barra de endereços) e divida por 812 para obter telas. Rotule como Estimado a menos que você tenha medido com código.
- Coluna de texto (C) = a largura de uma linha inteira de texto do corpo, em px CSS. Meça; se não puder, use a largura CSS do celular menos 40.
- Celulares largos quebram o texto em menos linhas do que o celular da rubrica de 375 px. Quando um título ou parágrafo está exatamente no limite de linhas em um celular largo, conte como uma linha a mais.
- Se a execução de código estiver ativada, abra as capturas de tela nela para medir tamanhos de pixels. Se não, julgue visualmente e rotule a linha como Estimado.
Etapa 2. Ler os números de velocidade (seções A, B, C e linha D10)
Use os números de laboratório móvel do PageSpeed. Explique-os em palavras simples:
- LCP (Largest Contentful Paint): quando a maior coisa na primeira tela (imagem hero, pôster de vídeo ou título) termina de aparecer.
- CLS (Cumulative Layout Shift): o quanto a página pula enquanto carrega. Um pulo que move o botão de debaixo de um polegar perde agendamentos.
- TBT (Total Blocking Time): quanto tempo a página está ocupada demais para reagir a um toque. Ele substitui o INP, a medida do Google de resposta ao toque.
O PageSpeed oscila alguns pontos entre execuções. Se um número estiver dentro de 3 pontos (ou 0,3 s) de uma linha de pontuação, diga isso na coluna Evidência e peça três execuções na re-verificação, usando a do meio. "Erros do navegador foram registrados no console" em Boas Práticas significa que D10 falha. Sempre teste a página ao vivo, nunca uma prévia do editor: prévias falham nas verificações de compressão e cache que o host real passa. Mantenha a "Economia estimada" do PageSpeed para cada item com falha; eles definem a ordem do trabalho de velocidade na Etapa 7.
Etapa 3. Ler o código-fonte da página
Se a busca web ou busca na web estiver ativada, abra o link da página e leia o HTML. Muitos construtores de páginas desenham a página com JavaScript, então uma busca pode retornar principalmente scripts. Nesse caso, use o código-fonte enviado, se houver; se não, baseie-se nas capturas de tela e marque as linhas apenas de HTML como Não verificado. Se o código-fonte tiver mais de cerca de 150 KB e a execução de código estiver ativada, pesquise-o para os itens abaixo em vez de lê-lo inteiro. Se a execução de código estiver desativada e o arquivo for muito grande para ser lido inteiro, verifique o que puder e marque o restante como Não verificado.
Procure por estes itens e anote a linha que cada um alimenta:
- A tag viewport:
width=device-width(D1) eviewport-fit=cover(D6). - Cada
img: temwidtheheight, ou uma proporção de aspecto CSS (D5). A imagem hero é umimgreal ou um background CSS? Está incorretamente definida comoloading="lazy"? (trabalho de velocidade) - Cada
iframe:loading="lazy"e uma altura definida de 300 px ou mais (D5, E6). Iframes do YouTube ou Vimeo presentes no carregamento, ou uma miniatura que carrega o player ao toque (D7). - Tags
videocomautoplaymas semmuted(D7). - No CSS:
safe-area-inset(D6),prefers-reduced-motione:focus-visible(D9), e ofont-sizedo texto do corpo, parágrafos, rótulos e legendas (D4). Folhas de estilo externas podem não vir; se você não puder ver o CSS, marque essas linhas como Não verificado. - Campos de formulário visíveis: conte
input(não oculto),select,textarea(E6). - Destinos concorrentes (E3): links para outra oferta, um produto ou checkout diferente, ou um perfil social, e se a página tem um menu de navegação.
- Scripts no head sem
asyncoudefer. Separe-os em dois grupos: widgets de chat, mapas de calor e gravadores de sessão (estes podem esperar), e pixels de anúncio, tags de conversão e análise (estes carregam na chegada) (trabalho de velocidade).
Para pesquisar um arquivo grande, procure por: viewport, <img, <iframe, <video, <input, <select, <textarea, safe-area, prefers-reduced-motion, focus-visible, font-size, <a href, <nav e as tags <script dentro de <head>.
Etapa 4. Ler as capturas de tela
Primeiro, verifique o que você recebeu. Se você receber uma única captura mais alta que 3 telas (um PDF de página inteira ou uma captura de rolagem), não leia posições dela. Se a execução de código estiver ativada, corte-a em blocos do tamanho da tela e olhe para cada um. Se estiver desativada, peça capturas de tela sobrepostas e, enquanto isso, marque as linhas que precisam de posições (D3, D4, E2, E4, E5, E7) como Não verificado. Você ainda pode ler as palavras e os rótulos dos botões dela.
Percorra a página de cima para baixo:
- Primeira tela (E1): encontre o primeiro botão de agendamento que está na própria página, não no cabeçalho e não em uma barra fixa. Julgue-o na primeira captura de tela real: totalmente visível sem que a rolagem passe. Se ele estiver cortado apenas pela barra do navegador, mas sua parte inferior ainda estiver dentro de 812 px CSS do topo da página, ele também passa; adicione a descoberta Extra "oculto em seu celular pela barra do navegador".
- Rolagem lateral (D2): conteúdo cortado na borda direita, uma barra de rolagem horizontal ou uma página que parece ampliada. Peça ao usuário para tentar deslizar para os lados.
- Alvos de toque (D3): todos os links e botões na própria página, incluindo links de rodapé, mas não os botões dentro de um calendário incorporado (Etapa 5). 44 px CSS têm cerca de um nono da largura da tela; 24 px têm cerca de um décimo sexto. Links de texto em rodapés e links "privacidade" ou "termos" inline são as falhas habituais.
- Tamanho do texto (D4): se o CSS forneceu tamanhos de fonte, use-os; isso é exato. Apenas a partir de capturas de tela, conte os caracteres (letras, espaços e pontuação) em uma linha de largura total de texto do corpo e compare com a coluna de texto C:
- Cerca de C/8 caracteres ou menos: 16 px ou mais, passa.
- Mais de cerca de C/7,3: abaixo de 16 px, falha.
- Mais de cerca de C/6,2: próximo ou abaixo de 12 px.
- Em um celular de 375 (C cerca de 335): 42 ou menos passam, 46 ou mais falham, 54 ou mais está perto de 12. De 43 a 45 é muito próximo para determinar a partir de uma imagem: deixe essa metade de D4 como Não verificado e peça o CSS.
- Verifique também letras pequenas: rótulos, legendas, subtexto de botões, datas. Rotule cada resultado de captura de tela como Estimado.
- Títulos (E4): conte as linhas no título principal (H1) e no título de seção mais longo (H2).
- Prova social (E5): onde a primeira linha de logotipos, depoimento, resultado de cliente ou avaliação começa, em telas a partir do topo.
- Botões (E2, E3): liste cada botão de agendamento com sua posição em telas e seu texto exato. Observe qualquer barra fixa. Meça a maior lacuna entre botões, incluindo a lacuna do último botão até o final da página.
- Saídas (E3): observe qualquer menu, ícones sociais e links para outras ofertas, produtos ou checkouts.
- Parágrafos (E7): conte os parágrafos que ultrapassam 6 linhas, de todos os parágrafos.
Etapa 5. Percorrer o caminho de agendamento
A partir das capturas de tela de toque, primeiro no Safari ou Chrome, depois no navegador no aplicativo:
- Conte os campos de formulário na tela antes que os horários do calendário apareçam (E6). Um formulário dividido em etapas conta sua etapa mais longa.
- Alvos de toque pequenos dentro do calendário (horários, células de dias, setas de mês) não pontuam, porque o proprietário da página não pode redimensioná-los. Liste-os em Descobertas extras com uma correção a nível de ferramenta: ative o layout móvel da ferramenta de calendário ou link para sua página de agendamento hospedada em vez de incorporá-la.
- Para qualquer pop-up: ele se ajusta à largura da tela, tem um botão de fechar claro e a página atrás dele permanece parada? Peça ao usuário para tentar rolar atrás do pop-up aberto (D8).
- Navegador no aplicativo: compare cada etapa com o Safari ou Chrome. Quebras comuns: o calendário incorporado carrega em branco, um pop-up ou nova guia é bloqueado, o login do Google é recusado, um redirecionamento fica preso. Qualquer quebra vai no topo, sob Caminho de agendamento, por exemplo "QUEBRADO no navegador no aplicativo do Instagram: calendário em branco". Isso não adiciona pontos e não altera nenhuma linha.
- Observe qualquer outra coisa que quebre o agendamento, mesmo que a rubrica não tenha uma linha para isso: o teclado esconde o botão de enviar, o fuso horário errado aparece, uma etapa nunca carrega. Um caminho de agendamento quebrado vai para o topo do relatório, acima da pontuação.
- Tela de confirmação (Descobertas extras): se o usuário enviou um agendamento de teste, diga se uma confirmação clara apareceu. Se não, escreva "não enviado".
Etapa 6. Pontuar cada linha
Use esta rubrica exatamente. Ela soma 100. Rotule a fonte de cada linha: PS (PageSpeed), HTML, Captura (captura de tela), Teste (toque), Est. (estimado a partir de uma captura de tela), Não verificado ou N/A.
| Linha | Verificação | Máx. | Pontuação |
|---|---|---|---|
| A1 | Pontuação de Desempenho mobile do PageSpeed | 30 | 90 ou mais = 30. 50 ou menos = 0. Entre: 30 x (pontuação menos 50) / 40 |
| B1 | LCP 2,5 s ou menos | 7 | 4,0 s ou mais = 0. Entre: 7 x (4,0 menos LCP) / 1,5 |
| B2 | CLS 0,1 ou menos | 4 | 0,25 ou mais = 0. Entre: 4 x (0,25 menos CLS) / 0,15 |
| B3 | TBT 200 ms ou menos | 4 | 500 ms ou mais = 0. Entre: 4 x (500 menos TBT) / 300 |
| C1 | Pontuação de Acessibilidade do PageSpeed | 10 | 90 ou mais = 10. 50 ou menos = 0. Entre: 10 x (pontuação menos 50) / 40 |
| D1 | Viewport: width=device-width | 6 | Sim = 6. Não, e o botão de agendamento fica minúsculo = 0 |
| D2 | Sem rolagem lateral | 5 | Sim = 5. Conteúdo cortado na direita ou rolagem horizontal = 0 |
| D3 | Alvos de toque têm 44 px CSS ou mais (largura e altura) | 4 | Todos passam = 4. 1 a 3 falhas = 2. 4+ falhas = 0 |
| D4 | Texto do corpo tem 16 px CSS ou mais; letras pequenas 12 px ou mais | 5 | Ambos passam = 5. Só o texto do corpo passa = 3. Só as letras pequenas passam = 2. Nenhum passa = 0 |
| D5 | Imagens e iframes não empurram o layout para os lados ou para baixo enquanto carregam | 5 | Sim = 5. Uma imagem ou iframe sem dimensões definidas que move o botão enquanto carrega = 0. Nenhum efeito visível no botão, mas imagens ou iframes sem dimensões = 2 |
| D6 | A página usa toda a tela (viewport-fit=cover) e respeita o entalhe (safe-area-inset) | 3 | Sim = 3. Conteúdo escondido atrás do entalhe ou cantos arredondados = 0 |
| D7 | Vídeo e áudio não tocam automaticamente sem interação do usuário. O player não é carregado na página se ninguém tocou nele | 2 | Nenhum problema = 2. Um vídeo ou áudio toca sozinho, ou o YouTube/Vimeo carrega seu player em vez de uma miniatura = 0 |
| D8 | Pop-ups se encaixam na tela e a página atrás deles não rola | 2 | Ambos = 2. O pop-up não se encaixa ou a página rola atrás = 0 |
| D9 | A página não pisca ou se move com animações para pessoas que preferem movimento reduzido; os focos de teclado são visíveis | 2 | Ambos = 2. Um ou ambos faltando = 0 |
| D10 | A página não tem erros de console, travamentos ou recursos bloqueados | 2 | Sem erros no console = 2. Erros registrados = 0 |
| E1 | O primeiro botão de agendamento está totalmente visível na primeira tela | 8 | Sim = 8. Rolagem é necessária = 0. Meio visível (cortado pela barra do navegador) = 6 |
| E2 | O botão de agendamento é fácil de tocar (mais de 2 dedos de largura) | 6 | Sim = 6. Toque acidental ao redor = 3. Muito pequeno para tocar confortavelmente = 0 |
| E3 | Nenhuma distração ou saída antes que eles possam agendar. Sem um menu, links sociais ou links para outras ofertas na página, a menos que estejam em uma etapa de agendamento ou checkout | 4 | Sem distrações = 4. Um link de saída visível antes do final do caminho de agendamento = 2. Mais de um = 0 |
| E4 | Os títulos são concisos (H1 com 3 linhas ou menos, H2 com 4 linhas ou menos) | 3 | Ambos = 3. O H1 ultrapassa 3 = 1. O H2 ultrapassa 4 = 1. Ambos ultrapassam = 0 |
| E5 | Prova social (logotipos, depoimentos, resultados) aparece nas primeiras 2 telas | 3 | Sim = 3. Aparece entre a tela 2 e 5 = 2. Aparece após a tela 5 = 1. Não visível = 0 |
| E6 | O formulário tem 8 campos ou menos antes da escolha do horário | 2 | Sim = 2. Mais de 8 campos = 0 |
| E7 | A maioria dos parágrafos tem 6 linhas ou menos | 2 | 70%+ passam = 2. 50–69% = 1. Menos de 50% = 0 |
| Total | 100 |
Etapa 7. Classificar as correções
Para cada linha com pontuação inferior ao máximo, anote como corrigi-la e estime quantos pontos ela recuperaria se corrigida para o máximo. Classifique por pontos recuperados, do maior para o menor. Agrupe itens com o mesmo impacto em qualquer ordem. Se a rubrica for corrigida (por exemplo, E1 de 8 para 6), marque a recuperação como zero a menos que a linha possa chegar ao máximo. Para trabalho de velocidade, use a "Economia estimada" do PageSpeed para priorizar dentro da categoria de velocidade; liste-os juntos sob um título de velocidade.
Formato para cada item:
- Verificação: [linha] [nome] Problema: [o que você encontrou] Correção: [o que fazer] Pontos: [máximo possível menos atual] (por exemplo, +4)
Etapa 8. Montar o relatório
Estruture o relatório nesta ordem:
- Quebras de agendamento (se houver): qualquer coisa que impeça completamente o agendamento no Safari/Chrome ou no navegador no aplicativo, listada com prioridade sobre a pontuação.
- Pontuação total: /100
- Resumo: 2 a 3 frases sobre o que o agendador encontrará. Inclua o telefone e o navegador usados para os testes.
- Lista de correções: como na Etapa 7, classificada por pontos recuperados.
- Descobertas extras: qualquer coisa não coberta pelas linhas da rubrica, incluindo:
- Problemas de calendário incorporado (alvos de toque pequenos, etc.) com uma correção a nível de ferramenta.
- Tela de confirmação (se testada): visível ou não.
- Outros: teclado escondendo o botão de enviar, fuso horário errado, etapa nunca carrega.
- Detalhe da rubrica: cada linha com sua fonte, pontuação e evidência (citação ou observação). Opcional, inclua para referência.
- Próximos passos: item de prioridade se 55 pontos estiverem não verificados por falta de números do PageSpeed. Caso contrário, o item de maior impacto da lista de correções.
Notas finais
- Execução de código: se disponível, use para processar capturas de tela ou analisar o código-fonte. Se não estiver disponível, confie na inspeção visual e na estimativa, rotulando as linhas adequadamente.
- Re-verificação: ao re-verificar após correções, execute novamente o PageSpeed três vezes e use o resultado do meio para A1, B1, B2, B3 e C1. Para verificações visuais, use as novas capturas de tela.
- Colaboração: pergunte ao usuário para fornecer capturas de tela ou números específicos conforme necessário, mas nunca peça mais do que o necessário. Mantenha o ímpeto.
- Precisão: busque a verdade factual com base nas evidências. Não adivinhe. Marque itens como Não verificado se a evidência estiver faltando.