A Voz do Bazar
Publicados: 2024-02-14Qualquer pessoa que tenha feito compras na véspera de um grande feriado conhece a dor de dar a volta em busca de uma vaga para estacionar e lutar para encontrar os itens que outras cinquenta pessoas procuram. Essa não é uma experiência que alguém queira replicar em sua loja de comércio eletrônico - mas você poderá fazê-lo se não se esforçar para melhorar o desempenho do seu site.
Ok, ok, talvez estejamos sendo um pouco hiperbólicos. Nada é tão ruim quanto tentar encontrar uma batata decente enquanto sua música de Natal menos favorita toca no sistema de som da loja. No entanto, sabemos que os clientes adoram a conveniência oferecida pelas compras online. Quase 70% dos consumidores levam em consideração a velocidade do site em sua disposição de comprar em um varejista online. E a maioria dos compradores online espera um tempo de carregamento da página de 3 segundos ou menos.
Se você não fez uma verificação de desempenho do seu site recentemente, já passou da hora. Veja como avaliar seu desempenho atual, além de algumas etapas que qualquer pessoa pode seguir para otimizar um site de comércio eletrônico para uma experiência de compra rápida.
Capítulos:
- Por que o desempenho do site é importante
- As 7 principais métricas de desempenho do site
- Como medir o desempenho do seu site
- Como melhorar o desempenho do seu site de comércio eletrônico
- O desempenho do site tem tudo a ver com a necessidade de velocidade
Por que o desempenho do site é importante
Realmente importa se você não atingir a marca de carregamento de 3 segundos? Sim. Deixar de priorizar a velocidade de carregamento do site diminui a qualidade da experiência do usuário, e isso é ruim de várias maneiras.
Em primeiro lugar e mais óbvio, tempos de carregamento mais elevados significam um aumento na taxa de rejeição. Mesmo os usuários que permanecem durante os primeiros carregamentos lentos da página podem desistir do seu site antes de fazer uma compra.
Taxas de conversão iniciais mais baixas provavelmente serão acompanhadas por uma fidelidade geral mais baixa. Os clientes que se lembram de sua experiência de compra abaixo do ideal têm menos probabilidade de voltar para outra tentativa – e não vão querer seguir links que os direcionem para seu site.
O mau desempenho do site também afeta suas classificações SERP do Google. Como o algoritmo do mecanismo de busca prioriza a experiência do usuário, as páginas com velocidade de carregamento lenta são empurradas para baixo nos resultados da pesquisa. Os estabelecimentos menores que competem por atenção podem perder para seus concorrentes mais rápidos.
As 7 principais métricas de desempenho do site
O tempo de carregamento da página não é uma métrica independente de desempenho do site. É uma avaliação abrangente que reúne várias métricas. Quatro dessas métricas são Core Web Vitals do Google:
- O Largest Contentful Paint mede a velocidade de carregamento do maior elemento da página que os usuários podem ver “acima da dobra” - ou seja, sem rolar para baixo
- A interação com o Next Paint mede a capacidade de resposta de uma página às interações, como clicar em um botão “adicionar ao carrinho” ou digitar informações em um formulário
- O atraso na primeira entrada mede o intervalo de tempo entre o momento em que um usuário interage com seu site (por exemplo, clicar no botão “adicionar ao carrinho”) e quando o navegador começa a processar essa solicitação
- A mudança cumulativa de layout mede a frequência com que o conteúdo da página se move enquanto uma página está sendo carregada
O Google considera esses aspectos mais importantes porque têm o maior efeito na experiência do usuário. No entanto, existem outras quatro métricas que também capturam partes importantes da experiência do usuário:
- O tempo até o primeiro byte mede a velocidade com que seu provedor de DNS começa a entregar o conteúdo do seu site após receber a solicitação
- O tempo total de bloqueio mede quanto tempo leva para uma página da web carregar o suficiente para que um usuário possa interagir com ela (já que os navegadores que estão no meio do carregamento das páginas não conseguem processar as interações)
- O First Contentful Paint mede quanto tempo leva para o primeiro conteúdo do seu site ser renderizado
Se você quiser se aprofundar em qualquer uma dessas métricas, o site web.dev do Google explica mais sobre por que cada uma é importante e como medi-las. Ou você pode simplesmente continuar lendo enquanto discutimos como medir o desempenho do seu site.
Como medir o desempenho do seu site
Medir o desempenho do seu site é fácil com o PageSpeed Insights gratuito do Google. Esta ferramenta avalia seu site de acordo com as métricas listadas acima e o classifica como bom, precisa de melhorias ou ruim. Você também receberá notas sobre o desempenho, acessibilidade, uso de práticas recomendadas e SEO do seu site.
Há uma opção para visualizar o desempenho do seu site em dispositivos móveis e desktop e dicas para ajudá-lo a otimizar seu site. Você recebe muita ajuda pelo baixo preço de viver no ecossistema web do Google, e vamos encarar os fatos: isso já está acontecendo.
Ao analisar seu relatório, você pode notar que o Tempo Total de Bloqueio está excluído da caixa “Avaliação de Core Web Vitals”. Role para baixo até a caixa Desempenho e consulte a tabela Métricas para ver seus resultados.
O PageSpeed Insights torna mais fácil entender por que seu site obteve as classificações que obteve com gráficos codificados por cores e dicas personalizadas. Vá em frente e faça um teste agora - bastam alguns segundos - para que você possa obter uma linha de base do desempenho do seu site e ver onde há espaço para melhorias.
Como melhorar o desempenho do seu site de comércio eletrônico
Se você ainda estiver aqui, presumiremos que sua avaliação Core Web Vitals mostrou que você tem algum trabalho a fazer. Não há vergonha nisso. Mesmo o site web.dev do Google não passa na avaliação! Aqui estão nossas melhores dicas para ajudá-lo a melhorar o desempenho do seu site de comércio eletrônico e as ferramentas necessárias para que isso aconteça.
1. Reduza as solicitações HTTP
As solicitações HTTP existem no centro do carregamento de páginas da web. Você não precisa saber os detalhes técnicos aqui – apenas que um navegador deve fazer essas solicitações para carregar arquivos CSS, scripts, imagens e outros conteúdos em sua página. Cada solicitação exige que o navegador envie uma mensagem ao seu host, que então deve responder com o conteúdo apropriado.
Quanto mais solicitações HTTP você tiver, mais tempo levará para concluir todas elas. Imagine se você fosse a um restaurante e primeiro pedisse água e depois, quando o garçom voltasse, pedisse um refrigerante. Quando trouxeram o refrigerante, você pediu um aperitivo. E finalmente, depois que o aperitivo chegou, você decidiu as entradas. Levaria muito tempo para você conseguir e terminar sua refeição, não importa o quão rápido seu servidor funcionasse.
Dê uma folga ao seu servidor (web), eliminando solicitações HTTP desnecessárias. Se você não precisa de um script ou arquivo CSS, não faça referência a ele no cabeçalho da sua página. Você também pode tentar reduzir o conteúdo multimídia para aumentar a velocidade de carregamento da página.
2. Usar HTTP/2
Nem todas as solicitações HTTP são iguais. HTTP/2, um padrão lançado em 2015, vem com recursos que ajudam suas páginas da web a carregar mais rapidamente. Por um lado, permite que os desenvolvedores priorizem quais elementos são carregados primeiro, para que você possa dizer aos navegadores para solicitar recursos leves antes de scripts maiores. Também pode servir vários recursos ao mesmo tempo. Voltando à metáfora do restaurante, o HTTP/2 permite que você faça todo o seu pedido de uma só vez, para que o garçom possa entregar a comida mais rapidamente.
KeyCDN tem um teste HTTP/2 gratuito para determinar se o seu site suporta o protocolo HTTP/2. Ou, se quiser ver mais de perto, abra as ferramentas de desenvolvedor do seu navegador, navegue até a guia rede e procure a coluna “Protocolo”. (Talvez seja necessário clicar com o botão direito na lista de colunas e adicionar Protocolo.)
O suporte HTTP/2 é determinado pelo seu host da web, portanto, ele é o recurso ao qual você pode recorrer se precisar ativar o protocolo. O processo é diferente para cada provedor.
3. Elimine redirecionamentos desnecessários
Muitas empresas empregam redirecionamentos para contornar a podridão de links durante revisões de sites. No entanto, cada vez que você redireciona um usuário para uma nova página, você o força a aguardar outro carregamento de página. Especialmente redirecionamentos que levam a outro redirecionamento – não, obrigado! Quando o usuário acessar o URL real, ele já estará pronto para fechar sua página.
Os redirecionamentos têm o hábito de se acumular com o tempo. Isso significa que você precisa auditá-los periodicamente; é especialmente importante fazer isso após qualquer reformulação ou rearquitetura do seu site.
Screaming Frog SEO Spider pode ajudá-lo a verificar se há redirecionamentos em todo o seu site e até mesmo detectar cadeias e loops de redirecionamento para você. Você também pode usar a barra de ferramentas SEO do Ahrefs para verificar página por página, mas não recomendamos isso. A menos que você tenha uma obrigação da qual realmente queira se livrar.
4. Limitar scripts externos
A maioria dos desenvolvedores usa scripts de terceiros para adicionar funcionalidades que não possuem recursos para codificar internamente. No entanto, incorporar scripts externos é sempre arriscado em termos de velocidade da página. Você não tem controle sobre o código, portanto não poderá fazer nada se o script demorar para carregar.
Scripts de carregamento lento fazem com que as páginas demorem mais para carregar e podem causar problemas como salto de conteúdo (medido pela métrica Cumulative Layout Shift).
Verifique cada página para ter certeza de que nenhum script desnecessário está sendo carregado. Por exemplo, você pode ter um recurso de avaliações habilitado em seu site como um todo, mas não precisa desse script incluído nas páginas criadas para navegação. Você também pode se perguntar se realmente precisa desse modal para coletar e-mails de clientes ou se ele está afastando mais compradores do que atraindo.
Mais sinos e assobios nem sempre são melhores. Um site simples com uma boa experiência do usuário pode fortalecer uma loja superprojetada.
5. Habilitar carregamento lento (assíncrono)
Quando um navegador renderiza um site, seu padrão é processar cada solicitação em ordem, só passando para o próximo comando após terminar a tarefa atual. Scripts grandes retardam todo o processo, pois o navegador deve carregar o arquivo inteiro antes de prosseguir para a renderização do restante do conteúdo.
Evite esse atraso direcionando o navegador para carregar seus scripts de forma assíncrona — ou seja, enquanto continua a renderizar a página da web. Basta adicionar o atributo async às suas tags de script (seu código será parecido com isto: <script src=”my_script.js” async></script>).
Alguns especialistas recomendam adicionar tags <script> perto da parte inferior do conteúdo do corpo, pois navegadores mais antigos podem não conseguir ler o atributo async, mas não há necessidade de fazer isso. Seria difícil encontrar um navegador que não pudesse lidar com a tag async.
6. Use designs voltados para dispositivos móveis
A otimização do desempenho do site precisa incluir o pensamento que prioriza os dispositivos móveis. Os smartphones são agora a fonte de quase quatro em cada cinco visitas a websites de comércio eletrónico e duas em cada três compras de comércio eletrónico. Infelizmente, a web móvel ainda é uma chatice. A maioria dos sites tem tempos de carregamento muito mais longos em dispositivos móveis. Com mais de 50% dos visitantes móveis prontos para abandonar o navio se um site demorar mais de 3 segundos para carregar, os varejistas de comércio eletrônico provavelmente estão perdendo muitos negócios.
Quase todos os sites publicados atualmente são responsivos, mas os designers que codificam para desktop e depois otimizam para dispositivos móveis podem estar indo na ordem errada. Usar emuladores de telefones celulares para projetar telas pequenas coloca as necessidades desse público crescente em primeiro plano.
Além disso, é fácil: as ferramentas de desenvolvimento do Google Chrome permitem que você entre no “modo dispositivo” para ver a aparência do seu site em telas menores.
Projetar para telefones celulares também exige que você aproveite ao máximo o espaço limitado da tela, o que pode significar que você opte por menos elementos decorativos que podem tornar a página mais lenta. Você também deseja simplificar a navegação e as interações, em vez de optar por experiências chamativas ou exclusivas que exigem scripts e plug-ins externos.
Se você estiver trabalhando com um site existente, provavelmente não poderá implementar essa prática agora. Basta manter isso em mente em seu próximo redesenho.
7. Compacte arquivos baseados em texto com gzip
Arquivos HTML e CSS podem não parecer muito onerosos para carregar, mas quando você conta em milissegundos, cada byte é importante. A compactação reduz o tamanho dos arquivos baseados em texto para que eles possam viajar do seu servidor até o navegador do cliente mais rapidamente. Gzip é a estrutura de compactação mais comum, mas Brotli e Deflate também funcionam bem para acelerar o seu site.
Este é outro recurso configurado no lado da hospedagem. A maioria dos hosts habilita-o por padrão, mas é bom verificar o seu usando um teste de compactação HTTP gratuito. Se você descobrir que seu conteúdo não está compactado, é hora de entrar em contato com seu provedor de hospedagem.
8. Minimize arquivos CSS, JavaScript e HTML
Estruturas de compactação como Gzip não são as únicas que economizam bytes. Você também pode reduzir seus arquivos de texto removendo qualquer coisa que não seja uma parte importante do código — coisas como comentários, formatação ou nomes de variáveis longos. Muitos desses elementos são úteis para desenvolvedores humanos, mas os navegadores da web não precisam deles para exibir sua página da web diretamente.
Não há necessidade de excluir comentários, espaços e guias extras sozinho. Minifier.org oferece uma ferramenta gratuita que pode lidar com CSS e JavaScript. O web.dev do Google recomenda este minificador de HTML gratuito.
Se você está procurando ferramentas que possam reduzir em massa, o Módulo PageSpeed do Google funciona com servidores da web Apache ou Nginx e minimiza automaticamente seus arquivos. No entanto, a instalação de ferramentas como esta ou CSSNano pode exigir que você ligue para o departamento de TI.
9. Otimize imagens e vídeos
Os arquivos multimídia geralmente diminuem o desempenho do site simplesmente porque são muito grandes. Os comerciantes de comércio eletrônico, que dependem fortemente de imagens e vídeos, devem ser diligentes na otimização desses arquivos para reduzir a carga nas conexões de Internet dos visitantes.
A parte fácil de otimizar imagens é redimensioná-las. Nenhum arquivo deve exceder 20 megabytes (MB) - mas, na verdade, apenas as imagens principais devem ser desse tamanho. Shopify recomenda que os comerciantes mantenham imagens em torno de 500 kilobytes (KB), se possível, embora permitam que alguns sites precisem de arquivos de até 2 MB. Provavelmente, você terá que compactar suas imagens para atingir esses objetivos. Felizmente, existem muitas ferramentas gratuitas de compactação de imagens que você pode usar.
Depois de reduzir o tamanho dos arquivos, certifique-se de usar princípios de design responsivos para manter a velocidade dos usuários que carregam seu site em dispositivos menores. O MDN Web Docs, administrado pela Mozilla, tem um ótimo tutorial de imagens responsivas que você pode seguir se for novo no assunto.
10. Aproveite o cache do navegador
Os navegadores da Web podem armazenar arquivos localmente nas máquinas dos usuários, o que acelera o tempo de carregamento para visitantes recorrentes. Em vez de entrar em contato com seu servidor para cada arquivo, os navegadores podem extrair recursos armazenados em cache da memória local da máquina.
O cache é uma excelente solução para a maioria dos comerciantes de comércio eletrônico, pois seus ativos permanecem bastante estáticos. Se você fizer uma grande reformulação no site ou substituir imagens de produtos, certifique-se de que os navegadores tenham instruções para baixar novamente o novo conteúdo e substituir os ativos armazenados em cache. No entanto, esta é uma ocorrência rara o suficiente para a maioria dos varejistas on-line, pois configurar o cache é o caminho a percorrer.
Seu host é, mais uma vez, o responsável pelas configurações de cache. Você vai querer encontrar sua documentação e seguir as instruções para habilitar caches locais e definir datas de expiração (que instruem os navegadores com que frequência eles devem atualizar os ativos armazenados em cache do seu site).
11. Use uma rede de entrega de conteúdo (CDN)
Os caches do navegador ajudam apenas os públicos que já acessaram seu site. As redes de entrega de conteúdo, ou CDNs, armazenam ativos o mais próximo possível de cada visitante para reduzir o tempo de carregamento.
As CDNs não dependem de máquinas locais para armazenar ativos. Eles simplesmente distribuem seus ativos para uma rede de servidores em vários locais. Isso significa que, em vez de ter um servidor na Virgínia que responda a todas as solicitações, você pode ter um servidor na Virgínia, um na Califórnia, um em Illinois e assim por diante. As empresas que atendem públicos internacionais podem trabalhar com CDNs internacionais, portanto, possuem servidores em vários países, regiões e continentes.
Sempre que um navegador envia uma solicitação para carregar seu site, essa solicitação é direcionada para o servidor que está geograficamente mais próximo do usuário. Pode não parecer uma grande economia de tempo, mas como as velocidades de carregamento da página são medidas em uma escala muito pequena, os CDNs fazem uma diferença notável.
12. Audite regularmente seus plug-ins
Plugins, complementos e extensões economizam muito tempo para a maioria dos desenvolvedores web. Mas, como os scripts externos, plug-ins inchados podem diminuir a velocidade da sua página. Melhore o desempenho do seu site revisitando sua biblioteca de plug-ins para ver se há algum suporte que você não usa mais.
Às vezes, você precisa de todos os seus plug-ins, mas suas páginas ainda carregam muito lentamente. Nesse caso, é hora de descobrir o culpado. Copie seu site em um ambiente de teste, desative todos os plug-ins e teste a velocidade de carregamento do site. Em seguida, habilite os plug-ins um de cada vez para determinar se um único plug-in está prejudicando suas métricas de desempenho. (Certifique-se de ativar, testar e desativar cada plug-in para não medir acidentalmente os efeitos cumulativos.)
Felizmente, com tantos plug-ins disponíveis, você provavelmente conseguirá encontrar um substituto para qualquer ferramenta lenta.
Uma outra opção é procurar plugins que foram otimizados para velocidade. Por exemplo, nossa tecnologia de exibição de classificações e comentários foi projetada para manter seu site funcionando rapidamente, e nossos desenvolvedores compartilharam as etapas que seguiram para cumprir essa promessa. Encontre ferramentas criadas nesse sentido – aquelas que usam práticas recomendadas, como minificação e redução de arquivos de script, armazenamento em cache e carregamento lento – para facilitar suas auditorias.
13. Remova pop-ups desnecessários
Sim, diremos. Pop-ups são super impopulares. Eles levam a uma experiência ruim, especialmente em dispositivos móveis. Mesmo que você ache que seus pop-ups são úteis e feitos com bom gosto, os usuários da Internet se deparam com uma enxurrada de modais, sobreposições e widgets de bate-papo o dia todo. Todo mundo está cansado de pop-ups e, se você contribuir, estará minando a confiança dos consumidores.
A maioria dos pop-ups chama scripts externos e faz referência a recursos como imagens e fontes, todos os quais um navegador precisa carregar. Os modais que aparecem condicionalmente precisam coletar dados de público antes do acionamento, o que também leva tempo. E se o tempo total de bloqueio for alto, os usuários podem não conseguir fechar esses elementos enquanto o restante do site é renderizado. Esse atraso influenciaria a percepção dos usuários sobre a velocidade do seu site, mesmo que não houvesse lentidão real.
A desaceleração é real, assim como a antipatia quase universal por essas ferramentas. Removê-los do seu site é uma situação em que todos ganham.
14. Escolha os serviços mais rápidos
Quando um cliente clica em um link ou digita uma URL, ele está solicitando ao navegador que consulte um serviço DNS para levá-lo ao site de destino. Esse serviço DNS roteia o navegador para o endereço IP do seu site. Em seguida, o navegador começa a ler seus arquivos HTML e a solicitar recursos do seu servidor ou CDN para que possa renderizar o site que você projetou.
São muitos serviços reunidos para fazer seu site aparecer. Se algum deles for lento, a velocidade da sua página será afetada negativamente. É por isso que a opção mais barata não é necessariamente a melhor opção para a sua infraestrutura técnica.
Por exemplo, muitos planos básicos de hospedagem de sites são compartilhados. Isso significa que outros sites usam o mesmo servidor que você, portanto, um pico de tráfego de um deles pode retardar o tempo de carregamento. Hospedagem VPS (para sites em crescimento) ou servidores de sites dedicados (para aqueles que podem pagar) retornarão melhores resultados.
Você também deseja ter certeza de que seu registrador de domínio, que lida com a hospedagem DNS, tem alto desempenho. O DNSPerf mantém um registro contínuo do desempenho do DNS para que você possa ver por si mesmo como os vários provedores se comparam.
É claro que a velocidade não importa apenas nos níveis mais altos. Conversamos sobre como encontrar plug-ins leves e simplificados. Você também vai querer pensar em serviços como software de segurança e outras ferramentas de back-end. Embora os clientes não interajam diretamente com eles, eles ainda podem impactar o desempenho do seu site de comércio eletrônico.
15. Monitore as operações do site
Verificar o desempenho do seu site de vez em quando para ver se há grandes problemas é uma ideia inteligente. Monitorar constantemente o seu site para que você esteja ciente no momento em que um problema surgir é ainda mais inteligente.
Você pode investir em ferramentas que coletam dados sobre a experiência dos usuários para mostrar o desempenho do seu site no mundo real. Como muitos compradores visitarão você em configurações diferentes das suas, o monitoramento real do usuário oferece uma nova perspectiva.
Outras ferramentas fingem ser visitantes humanos, usando uma série de scripts para navegar no seu site e testar seu desempenho. Configurações de monitoramento sintético como essas são mais úteis para equipes que buscam coletar dados de testes controlados. Se você estiver otimizando seu site, o monitoramento sintético o ajudará a identificar mudanças que realmente fazem a diferença. Esses sistemas também podem executar testes programados com o objetivo de detectar problemas importantes antes que seus clientes os encontrem.
Existem muitas ferramentas que realizam essas duas tarefas (e mais):
- Site24x7 realiza monitoramento de usuários sintéticos e reais para você
- LogRocket monitora usuários e identifica erros e interações do site com os quais os usuários normalmente têm dificuldade
- New Relic é um sistema de monitoramento sintético de ponta a ponta que se integra a praticamente todas as infraestruturas existentes
Qualquer que seja a ferramenta que você usar, certifique-se de configurar os alertas para avisar quando algo der errado. Quanto mais rápido você resolver o problema, menos clientes decepcionará.
O desempenho do site tem tudo a ver com a necessidade de velocidade
À medida que a Internet e as ligações móveis se tornam mais rápidas e ainda mais omnipresentes, os padrões de consumo continuarão a aumentar. Fornecer uma experiência rápida e conveniente é uma expectativa básica. As empresas que conseguirem descobrir como se destacar em dispositivos móveis e reduzir a velocidade de carregamento para um segundo ou menos terão a chance de conquistar mais participação de mercado.
A experiência do cliente que você oferece está diretamente ligada às suas taxas de conversão e retenção, e o desempenho do seu site está diretamente relacionado à experiência do cliente. A otimização de sites não é um projeto que pode esperar por um dia chuvoso. É uma parte essencial para trazer clientes ao seu site e realizar mais vendas.
Melhorar a velocidade do seu site não é a única maneira de alcançar mais clientes. Confira essas maneiras de aumentar o tráfego orgânico para manter o ritmo no SERP.
