O seu widget de chat está ativo e funciona. Depois abre a loja num telemóvel, desloca-se para um produto e o lançador está posicionado sobre a barra Adicionar ao Carrinho. Toca em Comprar e a janela de chat abre-se.
O conselho habitual é encolher o widget, defini-lo como fechado por defeito e adiar o script. Tudo isto se refere ao peso, e o peso vale a pena verificar, por isso testei-o. Mesmo site, widget ativado e desativado, e as pontuações de velocidade foram as mesmas em ambas as vezes.
Alguns widgets são genuinamente pesados e valem a pena otimizar. Mas um widget posicionado sobre o seu botão Adicionar ao Carrinho custa-lhe a venda diretamente, e esse não é um problema de peso.
É um problema de posição, e a faixa inferior do ecrã de um telemóvel é onde a sua barra de carrinho, o seu banner de cookies e o seu lançador acabam por competir.
Abaixo, analisei os resultados do teste, como medir a barra de carrinho do seu próprio tema e o que definir para o widget para que ele a ultrapasse.
Neste Artigo:
- O seu widget de chat não é demasiado pesado, está no sítio errado
- O que aconteceu quando medimos um widget ativado vs desativado
- Como descobrir a altura real da sua barra de carrinho fixa
- O ciclo de adivinhação de píxeis e as definições que o terminam
- Perguntas comuns sobre widgets de chat em dispositivos móveis
- Otimização de dispositivos móveis para widgets de chat: a que se resume
O seu widget de chat não é demasiado pesado, está no sítio errado
Num telemóvel, a parte inferior do ecrã é um espaço disputado. A sua barra fixa Adicionar ao Carrinho fica lá. O seu banner de cookies também. E o seu lançador de chat, geralmente no canto inferior direito por defeito.
Quando o lançador fica sobre o botão Comprar, o comprador toca no chat em vez de comprar. Isso custa-lhe a venda de uma forma que alguns kilobytes extra nunca conseguirão.
Executei uma auditoria Lighthouse no mesmo site com o widget ativado e desativado. A versão curta: o widget adicionou cerca de 148 KiB de ativos e não moveu nenhum Core Web Vital.
Portanto, a correção não é um projeto de tamanho de ficheiro. São três passos, nesta ordem:
- Escolha o canto que não está disputado. Se a sua barra de carrinho ou banner ocupar um lado, mova o lançador para o outro.
- Meça a altura da sua barra fixa. Precisa do número real do seu próprio tema, não de um número adivinhado.
- Defina um deslocamento de píxeis a partir da parte inferior. Isto eleva o lançador para que ultrapasse a barra em vez de a esconder.
Trabalhe neles nesta ordem, e a colisão desaparece antes mesmo de abrir um relatório de desempenho.
O que aconteceu quando medimos um widget ativado vs desativado
Configurei quatro páginas idênticas no mesmo site WordPress. Duas executavam o WPChat, duas não tinham qualquer widget de chat.
Depois testei cada uma no PageSpeed Insights num Android de gama média simulado com uma ligação lenta, duas vezes por página, e tirei a média dos resultados.
Eis o que voltou.
| Métrica | Sem widget | Com widget |
|---|---|---|
| Desempenho | 96.5 | 96.5 |
| First Contentful Paint | 2.0s | 2.0s |
| Largest Contentful Paint | 2.30s | 2.35s |
| Total Blocking Time | 0ms | 0ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 2.05s | 2.20s |
- Largest Contentful Paint, o momento em que a maior coisa na tela termina de carregar, mudou em 0,05 segundos.
- Speed Index, aproximadamente a rapidez com que a página se preenche visualmente, mudou em 0,15 segundos.
Ambos se situam dentro da variação normal de execução para configurações idênticas, portanto, nenhum deles é uma diferença real.
Total Blocking Time e Cumulative Layout Shift permaneceram em zero. Isso significa que o widget não bloqueou nada no thread principal e não deslocou nada na página enquanto carregava.
O custo aparece nos diagnósticos. A página passou de 33 KiB de arquivos cacheados para 181 KiB, o que representa aproximadamente 148 KiB de ativos do widget, ou cerca de o tamanho de uma foto de tamanho médio.
Portanto, a versão simples é esta: o widget custou cerca de 148 KiB e não moveu nenhum Core Web Vital, o que significa que nenhuma das três pontuações de carregamento e estabilidade que o Google realmente usa para classificação.
Desde que esteja a usar um plugin bem codificado como o WPChat para o seu widget de chat, a velocidade do site não será um problema para os seus visitantes móveis.
Como descobrir a altura real da sua barra de carrinho fixa
Cada tema constrói a sua barra fixa de Adicionar ao Carrinho de forma diferente, pelo que não há um número que eu possa lhe dar. Tem de ler o seu próprio. Leva cerca de dois minutos no seu navegador de desktop.
Veja como obtê-lo.
- Abra uma das suas páginas de produto no Chrome no seu computador. Escolha um produto que realmente venda, não um de amostra, porque o conteúdo da barra muda a sua aparência.
- Abra o DevTools. Clique com o botão direito em qualquer lugar da página e escolha “Inspecionar”. Um painel abre-se na lateral ou na parte inferior do seu ecrã.
- Mude para a vista do telemóvel. Clique no pequeno ícone de telemóvel e tablet perto do canto superior esquerdo do painel DevTools, rotulado como “Toggle device toolbar”. A página redesenha-se com a largura de um telemóvel.
- Defina-o para uma largura de telemóvel, 390 é uma comum. Na parte superior da página verá uma caixa de tamanho com um menu suspenso ao lado, geralmente a ler “Responsivo”. Digite 390 no campo de largura. A sua barra empilha-se e dimensiona-se de forma diferente em larguras de telemóvel do que num ecrã de desktop.
- Role para baixo até a barra fixa aparecer. Na maioria dos temas, ela desliza para dentro assim que você rola para além do botão principal Adicionar ao Carrinho.
- Clique com o botão direito na própria barra e escolha “Inspecionar” novamente. O Chrome salta para esse elemento no painel “Elementos” e realça-o na página.
- Passe o rato sobre a linha realçada no painel Elementos. Uma pequena dica aparece sobre a página mostrando dois números, algo como 390 × 64. O primeiro é a largura, o segundo é a altura. Esse segundo número é o que você veio buscar.
Anote. Essa é a altura da sua barra em pixels.
Aqui estão algumas coisas a considerar a partir daqui:
- Se o número parecer demasiado pequeno, selecionou o botão em vez da barra. No painel Elementos, clique na linha imediatamente acima da que está a ver e observe o destaque. Continue a subir até cobrir toda a faixa, de ponta a ponta, e depois leia a altura novamente.
- Verifique um segundo produto. Um produto simples com um botão geralmente resulta numa barra mais curta do que um produto variável, onde um seletor de quantidade ou um menu suspenso de variação o torna mais alto.
- Mantenha o número maior. O widget só pode ficar numa altura.
Tem agora um número. A próxima questão é onde o digitar, porque muitos widgets não lhe dão um local para o colocar e entregam-lhe CSS em vez disso.
O WPChat tem campos para exatamente isto: uma definição de posição e desvios de píxeis separados da parte inferior e da direita.
Transformar esse número num deslocamento
O seu desvio é a altura da barra mais uma margem. Se a sua barra medir 64px, não defina o desvio para 64px.
Defina-o para algo como 80px em vez disso. A margem é importante porque os alvos de toque não precisam de se sobrepor para causar problemas.
A ponta de um dedo cobre muito mais ecrã do que um cursor do rato, pelo que dois controlos encostados um ao outro produzirão toques errados mesmo quando o layout parece limpo. Uma margem de 16px acima da barra é suficiente para os separar.
Portanto, a fórmula de trabalho é: altura da barra + 16px = o seu desvio inferior.
Uma cautela antes de confiar nesse número
As Ferramentas de Programador desenham o seu layout, mas não desenham o telefone. A própria interface do navegador fica por cima da página num dispositivo real, e isso consome altura que o emulador nunca lhe mostra.
Três coisas consomem-na:
- A interface do navegador. A barra de endereço e a barra de ferramentas na parte inferior do Safari e do Chrome no iOS ocupam espaço real.
- A barra de endereço recolhível. Ela encolhe à medida que rola e expande quando rola para cima novamente, pelo que o espaço disponível muda enquanto o comprador está a usar a página.
- Margens de área segura do iOS. A faixa do indicador inicial na parte inferior dos iPhones mais recentes é espaço reservado que o seu layout tem de ficar acima.
Não se esqueça que as alturas das barras diferem entre temas como Astra, Botiga, Woostify e os restantes, e eu não testei todos.
É por isso que eu escolheria um desvio com espaço livre em vez de um desvio perfeito em píxeis.
Defina o seu número, depois abra a página do produto num telefone real uma vez e toque no botão Comprar. Se estiver limpo, terminou. Se estiver apertado, adicione mais 10px e verifique novamente.
O ciclo de adivinhação de píxeis e as definições que o terminam
Dois tópicos de suporte público no WordPress.org mostram o que acontece quando um widget não lhe dá uma definição para isto.
No primeiro tópico, o proprietário de uma loja relata que o widget de chat está a cobrir o botão Adicionar ao Carrinho do WooCommerce no telemóvel. A correção é curta: mover a posição do widget nas definições do plugin. Essa é toda a resolução.
O segundo tópico vai pelo caminho oposto. Uma barra de cookies está a pousar em cima dos botões de um widget de chat no telemóvel, e não há uma definição para isso.
Assim, o suporte entrega CSS personalizado que eleva a barra 100px em ecrãs com menos de 479px de largura.
Isto não é suficiente, pelo que o número sobe para 160px. O utilizador regressa e relata que o banner agora se encontra no meio do nada.
Ninguém naquele tópico fez nada de errado. O ciclo acontece porque um valor de pixel adivinhado está a ser testado contra uma altura de barra que nunca foi medida, dentro de uma media query, o proprietário da loja não tem como depurar no seu próprio telefone.
Muda o número, recarrega, aperta os olhos, muda outra vez. Não há medição em lado nenhum nesse processo, é por isso que não converge.
As definições que substituem a adivinhação
Onde essa barra fica depende do seu tema, que é exatamente por isso que o WPChat lhe dá controlos de posição em vez de assumir que um canto funciona em todo o lado.
Os controlos mapeiam para a ordem de correção anterior neste artigo.
- Posição: O lançador fica no canto inferior direito por defeito, com o canto inferior esquerdo disponível. Este é o movimento horizontal, para quando o seu botão Adicionar ao Carrinho ocupa um lado da barra.
- Deslocamento: Campos de pixel separados para a distância da direita e a distância de baixo. O número que mediu anteriormente vai para o campo inferior: a altura da sua barra mais a lacuna de 16px.
- Segmentação de página: Isto permite-lhe desativar o widget em páginas específicas, que é como o mantém afastado de páginas onde não o necessita.
Vale a pena saber sobre a segmentação de página: quando o widget é desativado numa página, o WPChat não o carrega e depois o oculta. Ele verifica primeiro, pelo que os ficheiros nunca são descarregados.
Pronto para começar? Consulte o nosso guia passo a passo sobre como adicionar um widget de chat online ao seu website.
Perguntas comuns sobre widgets de chat em dispositivos móveis
Como meço a altura da barra fixa "Adicionar ao Carrinho" do meu tema?
Meça-o no Chrome DevTools com a barra de ferramentas do dispositivo ativa. Pressione F12, clique em "Ativar/desativar barra de ferramentas do dispositivo", defina a largura para o tamanho de um telefone como 390, depois role até a barra fixa aparecer. Clique com o botão direito na barra, escolha "Inspecionar" e passe o rato sobre a linha realçada no painel "Elementos". A dica mostra dois números, e o segundo é a sua altura em pixels.
Canto inferior esquerdo ou inferior direito quando tenho uma barra de carrinho fixa?
Escolha o canto oposto ao botão principal da barra, para que um toque acidental não lhe custe nada. Se o seu botão Adicionar ao Carrinho fica no lado direito, coloque o lançador no canto inferior esquerdo. Quando a barra abrange toda a largura do ecrã, também não há canto livre, pelo que deixe a posição em paz e levante o lançador com um deslocamento inferior em vez disso.
Um widget de chat prejudica a minha pontuação PageSpeed?
No meu teste, não. Executando o mesmo site com o widget ativado e desativado, ele adicionou cerca de 148 KiB de ativos e não moveu nenhum Core Web Vital. TBT e CLS ambos permaneceram em zero. Uma ressalva: essa foi uma página de teste limpa, que é um caso ideal, pelo que uma página de produto com muitas imagens não se comportará de forma idêntica.
Por que é que um deslocamento de pixel recomendado não funciona em todos os temas?
Porque a barra fixa "Adicionar ao Carrinho" não é uma funcionalidade do WooCommerce. Ela vem do seu tema ou de um plugin separado, e cada um constrói essa barra com uma altura diferente. Qualquer número que copie de um tópico de suporte foi medido no tema de outra pessoa, é por isso que precisa de medir o seu próprio.
Otimização de dispositivos móveis para widgets de chat: a que se resume
Um widget bem construído não precisa de pesar o seu site. O WPChat adicionou cerca de 148 KiB no meu teste e não moveu nenhum Core Web Vital, pelo que o peso nunca foi o que custou a venda. A posição era: o lançador sentado no único botão que o seu comprador veio tocar.
Eis o que pode fazer:
- Meça a sua barra fixa no Chrome DevTools com a largura de um telefone e retire a altura da dica.
- Adicione um espaço de 16px a esse número. Esse é o seu deslocamento inferior.
- Defina a posição e o deslocamento nas configurações do seu widget, não numa consulta de mídia.
- Desligue o widget para o carrinho e checkout, se quiser que o foco completo seja na venda.
- Verifique num telefone real uma vez, porque as barras próprias do navegador e a faixa reservada na parte inferior dos iPhones mais recentes consomem altura que o emulador nunca lhe mostra.
O número com que fica pertence ao seu tema, não aos widgets de chat em geral. Temas diferentes constroem essa barra de forma diferente, é por isso que um campo onde pode digitar a sua própria medição supera qualquer número que eu possa imprimir aqui.
Tem agora uma medição. O WPChat dá-lhe um lugar para a digitar: posição, deslocamentos de píxeis separados e segmentação de página.
Obtenha o WPChat e comece a conectar-se com visitantes em todos os dispositivos e a expandir o seu negócio.
