Dicas e ferramentas para otimizar a velocidade do site em 2025

Os usuários da internet estão mais impacientes do que nunca.

70% dos consumidores admitem que um site que carrega lentamente afeta sua disposição para comprar de um varejista online. Isso significa que é essencial encontrar um equilíbrio entre oferecer experiências digitais bonitas e ricas em conteúdo e garantir que elas permaneçam eficientes.

Velocidades de site mais rápidas também resultam em mais vendas. Dados da Shopify mostraram que melhorar a velocidade do seu site em apenas meio segundo pode aumentar as conversões.

A seguir, você aprenderá as principais dicas e ferramentas para otimizar a velocidade do site e impulsionar as vendas.

O que significa otimizar a velocidade do site?

A otimização de velocidade de site é a estratégia por trás da melhoria do tempo de carregamento da sua página. Também conhecida como otimização de desempenho do site, seu objetivo é fazer com que seu e-commerce carregue o mais rápido possível — antes que os clientes em potencial fiquem frustrados com a experiência online e fechem a aba do navegador.

Existem duas métricas principais usadas para medir a velocidade:

1. First Contentful Paint, que o Google explica, mede o tempo que leva para o seu navegador renderizar o primeiro conteúdo DOM após um usuário navegar para sua página.
2. Time to First Byte, que mede o tempo que leva para o servidor que hospeda um site responder ao navegador de um usuário.

Por que a otimização de velocidade é importante?

Quanto mais rápido seu site, melhor você será em capturar clientes — incluindo aqueles que abandonam o site de um concorrente mais lento.

O Google recomenda um tempo de carregamento de página de dois segundos (artigo em inglês) para um e-commerce. Mas, em geral, quanto mais rápido, melhor. Um estudo da Semrush (artigo em inglês) descobriu que a taxa de rejeição quase triplica se sua página levar mais de três segundos para carregar.

Se você está operando uma loja com um valor médio de pedido de R$ 300 e 5.000 visitantes por dia, por exemplo, um atraso de um segundo na velocidade do site pode estar custando R$ 45.000 por dia.

Sites que carregam lentamente também impactam negativamente sua capacidade de ser encontrado e sua classificação em SEO. O Google, o maior mecanismo de busca do mundo, prioriza sites (artigo em inglês) com fortes indicadores de desempenho (ou seja, desempenho do site) em seus resultados de busca.

Além disso, se você está investindo em busca paga como um canal de aquisição de clientes, páginas de destino lentas diminuem sua Qualidade do Google Ads — o que significa um custo por clique mais alto. Esse é um problema caro em um momento em que os custos de aquisição de clientes e publicidade estão aumentando desproporcionalmente em muitas indústrias.

Fatores que afetam a velocidade do site

• Plataforma de e-commerce
• Hospedagem
• Arquitetura do site
• Aplicativos de terceiros em excesso

Plataforma de e-commerce

Sua empresa precisa de uma plataforma de e-commerce que tenha a infraestrutura necessária para ajudar nos tempos de carregamento. Como usuário da plataforma, você deve conversar com seu provedor sobre melhorias no back-end do seu site para que suas páginas carreguem rapidamente para os compradores.

Rendering é o processo de criação de marcação HTML quando um usuário carrega a página em seu navegador. Sua infraestrutura de e-commerce dita o processo de renderização.

O Renderizador de Vitrine (SFR) da Shopify, por exemplo, é um aplicativo dedicado a atender solicitações de vitrine o mais rápido possível. De fato, as lojas Shopify são as mais rápidas do mundo (estudo em inglês), carregando 1,8 vezes mais rápido do que lojas em outras plataformas.

Se sua plataforma de comércio não estiver comprometida em fazer da velocidade uma prioridade, então as demais sugestões a seguir não farão tanta diferença. Sabendo que 93% das empresas na Shopify têm uma loja rápida, mais do que qualquer outra plataforma de comércio importante, você pode controlar a velocidade do seu e-commerce trabalhando nos seguintes itens para melhorar ainda mais seu site.

Hospedagem

Seu serviço de hospedagem de e-commerce e infraestrutura podem influenciar o desempenho do seu site de e-commerce — especialmente durante dias de alta demanda e alta transação.

Ao pesquisar os requisitos da plataforma de hospedagem, fique atento a:

• Limites de memória ou largura de banda para escalabilidade durante promoções sazonais
• Tráfego projetado e carga máxima de usuários para evitar quedas devido a um aumento repentino de visitantes

Além disso, escolha uma plataforma que permita evitar gerenciar seu próprio servidor. Varejistas DTC muitas vezes precisam gastar muito em infraestrutura de TI, e os custos vêm aumentando constantemente ao longo dos anos. A Shopify hospeda todos os planos nos próprios servidores — que são confiáveis por alguns dos maiores varejistas do mundo devido à sua velocidade e confiabilidade.

Antes de qualquer grande evento de vendas, peça ao seu provedor de plataforma de comércio para ajudá-lo a se preparar para picos inesperados de tráfego ou um influxo de pedidos.

Quedas de site nunca são fáceis de lidar, mas podem ser bastante ruins para uma empresa de US$ 5 bilhões durante sua maior temporada de vendas do ano. O site da JB Hi-Fi ficou fora do ar por duas horas durante a Black Friday devido a problemas no site. “Já vimos sites de varejistas de alto perfil ficarem fora do ar,” diz Chris Lang, gerente geral de engenharia da JB Hi-Fi. “Todo o país fica sabendo. É ruim para os clientes e ruim para a marca. Faríamos qualquer coisa para evitar isso.”

Após migrar para a Shopify, a JB Hi-Fi viu vendas recordes, graças a quase o dobro de tráfego online durante a Black Friday — tudo isso sem problemas de desempenho do site. Com a infraestrutura baseada em nuvem, a Shopify tem uma taxa de disponibilidade geral de 99,98%, com uma vitrine que carrega 2,97 vezes mais rápido do que outras plataformas SaaS.

Arquitetura do site

E-commerces usam uma variedade de arquiteturas para apresentar informações tanto para usuários quanto para navegadores. Isso pode se tornar complexo à medida que você escala, diz Javier Moreno, gerente de ciência de dados da Shopify: “À medida que as marcas crescem e se tornam mais sofisticadas, seus sites se tornam mais ricos. Essa riqueza geralmente vem com um preço; a menos que você esteja prestando bastante atenção à velocidade, as mudanças vão desacelerar seu site.”

Na tentativa de melhorar a velocidade do site, algumas empresas recorrem ao comércio headless — um conceito que desassocia o front-end do seu e-commerce da plataforma de back-end que o alimenta.

Varejistas que usam os componentes de comércio da Shopify levam isso para o próximo nível. Eles utilizam as tecnologias de e-commerce que precisam, quando precisam, em vez de sobrecarregar um navegador com muitos trechos de código que afetam negativamente a velocidade do site.

Aplicativos de terceiros em excesso

Se você tem mais de 20 plugins de e-commerce instalados em sua loja, provavelmente não está usando todos eles. Talvez você tenha instalado alguns como teste e depois esqueceu de removê-los. Mas esses aplicativos ainda estão rodando em segundo plano e podem estar prejudicando o desempenho do seu site.

Contrate um desenvolvedor para remover quaisquer aplicativos desnecessários. Em seguida, execute testes de velocidade da página usando ferramentas como GTmetrix ou PageSpeed Insights, ou até mesmo um teste manual usando as ferramentas de desenvolvedor do Chrome. Clique na aba Rede e recarregue a página.

Sempre que você quiser instalar um novo aplicativo, pergunte a si mesmo se o valor agregado desse aplicativo superará a possível desaceleração na velocidade de carregamento.

A maioria dos arquivos de script/CSS para aplicativos baixados usando o Admin da Shopify são injetados no <head> do seu arquivo theme.liquid dentro de {{ content_for_header }}.

Um aplicativo precisa ser renderizado antes que qualquer outro código seja carregado.

“Navegar por essa tensão entre carregamento mais rápido e o valor experiencial e de vendas dos aplicativos é o motivo pelo qual carregamos scripts adicionados com a API Script Tag de forma assíncrona — para que o carregamento da página não seja interrompido,” diz Jason Bowman, líder da equipe de engenharia de soluções da Shopify. “No entanto, <scripts> adicionados diretamente no <head> geralmente têm um impacto imediato no desempenho.”

Como otimizar a velocidade do seu site

1. Use uma rede de entrega de conteúdo
2. Não exagere nas alterações de tema
3. Ative a visualização rápida nas páginas de categoria
4. Remova pop-ups desnecessários
5. Modere os sliders de destaque na página inicial
6. Comprima, redimensione e reduza imagens
7. Use embeds leves para vídeos
8. Reduza redirecionamentos e links quebrados
9. Ative o carregamento preguiçoso (lazy load)
10. Desbloqueie o navegador de scripts que bloqueiam o parser
11. Organize o rastreamento com o Google Tag Manager
12. Cuidado com loops excessivos de Liquid
13. Construa Páginas Móveis Aceleradas
14. Desative a reprodução automática de vídeos em dispositivos móveis
15. Otimize o checkout móvel

1. Use uma rede de entrega de conteúdo (CDN)

Uma rede de entrega de conteúdo, ou rede de distribuição de conteúdo (CDN), é um grupo de servidores espalhados pelo mundo. Ela distribui a carga de entrega de conteúdo através do servidor mais próximo da localização do seu visitante, tornando as experiências locais mais rápidas.

Como mais e-commerces estão se tornando globais, uma CDN — ou no caso da Shopify, duas CDNs — é um ingrediente indispensável para o desempenho da plataforma.

A Shopify oferece uma CDN de primeira classe alimentada pela Cloudflare sem custo adicional. Nos últimos anos, a Shopify melhorou significativamente a velocidade do servidor ao utilizar hospedagem de domínio único para conteúdo estático. Isso aprimorou o desempenho do navegador com prioridades HTTP/3 e empregou técnicas inteligentes de carregamento preguiçoso (lazy load) para elementos da página.

Consolidando a hospedagem sob um único domínio em vez de cdn.shopify.com, a Shopify garante tempos de carregamento mais rápidos e melhor gerenciamento de recursos. Dados do Chrome User Experience (CrUX) ao longo do último ano mostram uma melhora de 35% no Time to First Byte (TTFB) para vitrines, aprimorando a experiência do usuário globalmente. Essas otimizações levam a renderizações de página mais rápidas e uma experiência de compra mais consistente, independentemente da localização do usuário.

No geral, as CDNs aumentam a velocidade enquanto reduzem custos. “Obter nossa licença, hospedagem e CDN da Shopify nos economizou cerca de US$ 100.000 por ano logo de cara,” diz a proprietária da Red Dress Boutique, Diana Harbour.

Leve em consideração o conteúdo visual — frequentemente a causa do desempenho lento do site. A Shopify informa a CDN quando seus ativos (por exemplo, imagens, JavaScript e CSS) mudaram.

Faça isso com a Shopify

As empresas Shopify podem usar o filtro asset_url e automaticamente adicionar números de versão a todos os URLs que geram. Por exemplo, um número de versão adicionado ao final de uma URL pode parecer assim: ?v=1384022871. Esse filtro informa à CDN para puxar a versão correta. Sem ele, você pode não ver o ativo que espera após fazer alterações no seu conteúdo.

Além disso, se você referenciar conteúdo diretamente em seu CSS, o URL será estático. Ele também não carregará a versão do ativo atualizada automaticamente pela Shopify.

Para garantir atualizações automáticas, altere sua sintaxe CSS para incluir o filtro asset_url. Para informações sobre todos os filtros de URL que ajudam a puxar ativos, visite a Central de Ajuda da Shopify.

2. Não exagere nas alterações de tema

A aparência de um site pode determinar a probabilidade de um cliente interagir com ele. Estudos (em inglês) mostram que as primeiras impressões são 94% relacionadas ao design — e essas decisões acontecem em velocidade recorde. A primeira impressão de um visitante do site é formada em um décimo de segundo.

Dito isso, há um trade-off entre a velocidade do site e um tema bonito — este último muitas vezes vem com código desordenado e gráficos excessivos. “Você não precisa de um tema com todos os sinos e apitos,” diz Josh Stutt. “Você precisa de um que seja limpo, rápido e fácil de navegar. Eu vi uma melhoria de mais de 50% na taxa de rejeição da página inicial para novos visitantes simplesmente ao mudar para um tema mais simplificado.”

Nirav Sheth, CEO e fundador da Anatta, diz: “Dicas rápidas de velocidade não construirão a base para um desempenho de longo prazo — apenas melhorias reais de velocidade farão isso, e isso começa com a otimização da arquitetura subjacente do seu tema.”

3. Ative a visualização rápida nas páginas de categoria

Pop-ups de visualização rápida exibem um produto — diretamente de uma página de listagem de produtos — em vez de fazer você visitar uma página de detalhes do produto.

Em teoria, a visualização rápida deve economizar tempo para seus clientes, mas pode, na verdade, prejudicar a experiência do cliente em seu e-commerce:

• Adiciona um passo extra na jornada do cliente.
• Pode ser clicado acidentalmente, o que é frustrante para o usuário.
• Pode ser confundido com uma página de produto.
• Mais importante, pode desacelerar significativamente o tempo de carregamento da sua página.

Implementações de pop-up de visualização rápida (seja integrada em um tema ou de um aplicativo) podem, às vezes, pré-carregar as informações de uma página de produto inteira caso um visitante selecione o botão de Visualização Rápida.

Mas isso é uma quantidade enorme de dados a serem carregados, especialmente em uma página de coleção com 20 ou 30 miniaturas de produtos. O mapeamento de cliques — uma ferramenta baseada em JavaScript que rastreia onde os usuários rolam ou movem o cursor para clicar nas páginas do seu site — pode ajudá-lo a ver se seus clientes estão realmente usando a visualização rápida.

Alguns aplicativos que podem ajudar incluem:

• Hindsight
• Hotjar

Deve ser fácil ver se há um botão de Visualização Rápida nas miniaturas de produtos da sua vitrine. Verifique seu personalizador de tema para uma opção de ativar ou desativar essa função. Se você não vê essa opção no personalizador de tema, verifique se ela vem de um aplicativo. Se for, deve ser fácil removê-la.

Se os dois primeiros passos não ajudarem, é provável que esteja embutido no próprio tema. Nesse caso, você precisará de um desenvolvedor para identificar e removê-lo. Encontre um Parceiro de Serviço da Shopify para ajudar nesse processo.

Use AJAX para puxar as informações do produto assim que um visitante clicar no botão de pop-up de Visualização Rápida. Ou, salve um conjunto limitado de informações do produto como atributos de dados no item da grade de produtos. Em seguida, construa o HTML e o pop-up dinamicamente com JavaScript.

Qualquer uma das opções é menos ideal do que remover a opção de visualização rápida. As informações do produto ainda precisam ser carregadas para cada produto. No entanto, é melhor do que baixar todas as imagens e links dos produtos.

4. Remova pop-ups desnecessários

Pop-ups existem para exibir ofertas especiais ou incentivar as pessoas a dar o próximo passo na jornada do cliente. Seja resgatando um cupom ou inserindo seu endereço de e-mail, os pop-ups ajudam a engajar visitantes pela primeira vez e abrem a porta para futuras comunicações.

No entanto, há um detalhe nos pop-ups de e-commerce. Muitos gráficos piscantes podem ser prejudiciais à velocidade e ao desempenho do site — sem mencionar que distraem os usuários de interagir com o conteúdo do site que você já otimizou para conversões.

Defina parâmetros em torno do uso de pop-ups para evitar atrasos na velocidade do site. Por exemplo, você pode criar gatilhos de pop-up para que códigos extras não contribuam para um site que carrega lentamente. Exiba imediatamente após o carregamento da página, como pop-ups de intenção de saída ou de atraso de tempo. Ambos esses gatilhos dão um espaço entre o carregamento inicial da página e o carregamento do pop-up.

5. Modere os sliders de destaque na página inicial

Grandes slideshows com várias imagens de destaque são ótimos para mostrar seus produtos. Infelizmente, há um lado negativo: o tamanho e a qualidade exigidos para um slider de destaque parecer bom podem aumentar os tempos de carregamento — especialmente se você tiver quatro a cinco slides.

Reduza o número de slides na página inicial ou elimine-os completamente. Uma única imagem de destaque de alta qualidade, bem pensada — com uma clara chamada para ação — ajuda a atrair seus clientes rapidamente, porque o cérebro processa imagens visuais 60.000 vezes mais rápido (artigo em inglês) do que processa texto.

Se você precisar usar um slider, siga as melhores práticas de UX, como:

• Limitar a dois ou três slides
• Exibir os slides como seções de conteúdo estático em vez de carrosséis que giram automaticamente
• Usar srcset ou Lazy Load como uma solução abrangente

A Chubbies, por exemplo, usa imagens otimizadas em vez de um slider de destaque tradicional na página inicial. O cofundador Tom Montgomery diz: “Estamos com a Shopify desde o primeiro dia. Nenhum de nós é engenheiro, então é ótimo poder contar com os especialistas da Shopify para que possamos nos concentrar em inovar.”

6. Comprima, redimensione e reduza imagens

As imagens representam entre 50% e 75% do peso total das suas páginas da web. Isso pode ser um problema maior à medida que seu e-commerce escala. Quanto mais produtos você vende, mais arquivos de imagem você tem em seu servidor. Cada imagem que você usa em uma página cria uma nova solicitação HTTP. Enquanto otimizar a velocidade da página, reduzir imagens ajuda você a dizer mais com menos.

Alex Mirzaian, gerente de marketing da Eightvape, diz: “Quando você está constantemente criando conteúdo através de postagens de blog ou criando muitos produtos por dia, tende a apenas adicionar imagens ao site sem pensar. Comprimir imagens pode ajudar muito quando você tem milhares de imagens no site.”

Você pode minimizar o tamanho da imagem sem reduzir a qualidade com compressão sem perda usando ferramentas como TinyJPG ou TinyPNG.

Além disso, fique atento a fontes de imagem vazias — <img src = ’ ’> — em seu código. Isso causa um ônus excessivo no navegador ao enviar mais uma solicitação para seus servidores. Uma solução simples é CSS “sprites,” que consolidam várias imagens, como ícones, em uma, limitando o número de solicitações individuais de imagem do servidor. Isso também melhora a velocidade da sua página.

Os parâmetros de tamanho de imagem integrados da Shopify permitem que você baixe a menor imagem possível enquanto mantém a qualidade. Ele solicita à Shopify o tamanho exato da imagem que será exibido, depois reduz o tamanho do arquivo baixado da CDN e diminui a escalabilidade necessária do lado do navegador.

“Um de nossos clientes tinha um site que carregava lentamente, então começamos otimizando as imagens,” diz Maria Harutyunyan, cofundadora da Loopex Digital. “Nós as tornamos menores e comprimimos, o que fez uma enorme diferença na velocidade de carregamento das páginas. De fato, as imagens agora ocupam 60% menos espaço e carregam muito mais rápido.”

7. Use embeds leves para vídeo

O vídeo está rapidamente se tornando a linguagem da internet — cerca de 91% das empresas usam vídeo como uma ferramenta de marketing. Mas dependendo de como eles são incorporados ao seu site, podem causar grandes diferenças no tempo de carregamento.

Não apenas o código de incorporação padrão do YouTube torna seu site pesado — já que alguns arquivos são baixados mesmo antes do visitante clicar no botão Play — como também usa a tag <iframe> onde a largura e a altura do player de vídeo são fixas. Seu vídeo não se ajusta ao tamanho da tela de diferentes dispositivos.

A solução são os embeds leves, que carregam os vídeos diretamente na sua página da web. Quando a página é carregada inicialmente, o site apenas incorpora a imagem em miniatura do vídeo do YouTube. O player de vídeo em si (e todo o seu JavaScript extra) só carrega quando o usuário clica na miniatura.

As miniaturas do YouTube têm cerca de 15 kilobytes, então os embeds leves podem reduzir o tamanho das páginas da web em quase um megabyte.

8. Reduza redirecionamentos e links quebrados

Redirecionamentos e links quebrados em excesso podem impactar negativamente o desempenho e prejudicar seu ranking em SEO.

Faça uma limpeza nos seus redirecionamentos. Por exemplo, redirecionamentos 302, que indicam que uma página foi movida temporariamente, podem prejudicar seu SEO. Eles também acionam solicitações HTTP adicionais e atrasam transferências de dados.

Em vez disso, use um “redirecionamento cacheável” ou a função de redirecionamentos integrada da Shopify — que são 301 por padrão — dentro do seu painel de navegação. E lembre-se: nunca redirecione URLs para páginas que são, por si mesmas, redirecionamentos.

Links quebrados para elementos de página como imagens, CSS e arquivos JS aumentam as solicitações HTTP e prejudicam a velocidade do seu site. Use uma ferramenta como Broken Link Checker para removê-los. Criar páginas de erro 404 personalizadas ajudará visitantes que acidentalmente inserirem um URL incorreto para seu site.

9. Ative o carregamento preguiçoso (lazy load)

O carregamento preguiçoso é uma técnica que evita que todo o conteúdo seja carregado imediatamente em uma página da web. E-commerces que usam lazy load exibem apenas o conteúdo quando os usuários acionam certos gatilhos.

Podemos ver o carregamento preguiçoso em ação quando um usuário visita sua página de produto de e-commerce. Apenas o conteúdo visível acima da dobra aparece imediatamente ao chegar, como o título do item, imagens e descrição do produto.

O conteúdo de suporte aparece quando os usuários rolam para baixo dessa seção. Conteúdo gerado pelo usuário, carrosséis de redes sociais e avaliações de clientes são todos carregados de forma preguiçosa para evitar que o código sobrecarregue o servidor com muitas informações imediatamente ao carregar.

Chris McCarron da GoGoChimp usou essa estratégia de otimização de velocidade da página para o e-commerce de um cliente: “Havia um número impressionante de imagens abaixo da dobra em cada página da web. O problema com isso é que um navegador da web fará o download simultaneamente de todas as imagens em uma página da web, independentemente de quais imagens estão visíveis. No entanto, o carregamento preguiçoso só baixa uma imagem quando ela pode ser visualizada dentro do navegador.”

10. Desbloqueie o navegador de scripts que bloqueiam o parser

Antes que um navegador possa exibir uma página para seu cliente, ele precisa passar por um processo chamado “análise do HTML.” Mas scripts que bloqueiam o parser interrompem esse processo: quando um navegador encontra um script que bloqueia o parser, ele precisa parar tudo e se concentrar apenas em executar esse script antes de poder continuar fazendo qualquer outra coisa.

Felizmente, há uma solução fácil e tudo o que você precisa é do atributo “async” ou “defer”:

• Bloqueio do parser: <script src="jquery.js"></script>
• Não bloqueia o parser: <script src="jquery.js" defer></script>

Vale a pena notar que o JavaScript em si não bloqueia os navegadores — é a forma como o JavaScript é carregado que determina se ele bloqueia ou não o navegador. Após fazer essas alterações no seu código, verifique se seu site ainda está oferecendo a mesma experiência desejada.

11. Organize o rastreamento com o Google Tag Manager

Os dados dos clientes alimentam suas estratégias de e-commerce e marketing digital. Mas coletar esses dados também pode desacelerar o desempenho do seu site. Todos aqueles tags de rastreamento JavaScript (por exemplo, para análises gerais, conversões, metas e retargeting comportamental) normalmente são os culpados.

A coleta de dados dos clientes também pode ser um fardo de tempo e recursos para suas equipes de desenvolvimento, TI ou marketing. Um sistema de gerenciamento de tags (TMS) como o Google Tag Manager condensa todas as suas tags em uma única solicitação JavaScript. Se uma falha de tag causar a queda do seu site, ter um TMS também ajuda você a remover a tag rapidamente.

Nirav Sheth acrescenta que quando a Anatta estava otimizando a velocidade do site de um e-commerce no setor de beleza, “O que mais impactou a velocidade do site foi a combinação de aproveitar as APIs da Shopify e limpar o Google Tag Manager.”

Um trecho de código é tudo o que você precisa para gerenciar as tags da sua loja Shopify em um só lugar com o Google Tag Manager. Para saber mais, consulte as diretrizes no Centro de Ajuda da Shopify.

12. Cuidado com loops excessivos de Liquid

Liquid é uma poderosa linguagem de programação da Shopify. Mas há certos casos em que você precisa pesar os benefícios adicionais em relação aos trade-offs.

A iteração de forloop é uma dessas instâncias. Forloop significa que o sistema precisa percorrer (ou seja, pesquisar) todos os produtos em uma coleção, e acontece quando está procurando uma condição específica (por exemplo, preço ou uma tag).

Esses recursos podem ser vantajosos em certos casos — como gerar imagens ou variantes de produtos. Eles também são úteis quando você tem um número menor de produtos em uma página de coleção; mas tenha cuidado com o impacto nos tempos de carregamento.

Revise o código do seu tema para garantir que você não esteja executando forloops várias vezes procurando a mesma informação. Isso pode acontecer quando vários desenvolvedores trabalham em um tema e podem duplicar tarefas ou introduzir códigos conflitantes. Remover essas duplicações fará com que sua página carregue mais rápido.

Geralmente, é mais fácil usar um loop simples product.options_with_values. Revise a documentação para entender como a linguagem de template e loops de liquid funcionam.

13. Construa Páginas Móveis Aceleradas

Páginas Móveis Aceleradas (AMP) é um projeto patrocinado pelo Google que reformata o conteúdo do site para dispositivos móveis. Em sites com AMP habilitado, o Google armazena em cache cada página e a recarrega sempre que um usuário visita a partir da busca. Isso reduz os tempos de carregamento das páginas, resultando em um aumento de duas vezes no tempo gasto na página e 20% de aumento nas conversões em comparação com páginas não AMP.

Implemente AMP em seu e-commerce com aplicativos da Shopify como AMP, Fire AMP, ou The AMP App. Cada um elimina códigos complexos que poluem seu site móvel para carregar páginas rapidamente.

14. Desative a reprodução automática de vídeos em dispositivos móveis

Nem todos os usuários da internet móvel estão navegando em seu e-commerce com uma conexão de rede forte. Talvez eles sejam um cliente da Allbirds escaneando o site do varejista durante uma caminhada, quando os sapatos que estão usando estão se desfazendo. Ou eles são um cliente da Firebelly Tea pedindo sua próxima caixa de saquinhos de chá enquanto esperam no estacionamento da escola do filho.

De qualquer forma, essas pessoas podem interagir com os vídeos que os varejistas usam para se comunicar com potenciais clientes em seu site móvel. Mas reproduzir esses vídeos automaticamente pode causar sérios atrasos na velocidade do site.

A conexão de rede móvel precisa baixar um arquivo grande quando um vídeo está configurado para reprodução automática. Quando isso é substituído por uma miniatura estática e um botão opcional para acionar o vídeo, o arquivo em tamanho real não precisa ser carregado através de uma conexão de internet fraca. Os visitantes obtêm sua primeira visualização significativa em tempo recorde.

15. Otimize o checkout móvel

Ao fazer melhorias na velocidade do site móvel, o processo de checkout muitas vezes é esquecido. Páginas iniciais, de produtos e de categorias recebem mais atenção, em grande parte porque você não quer que potenciais clientes desistam no primeiro obstáculo: sua interação inicial com a loja.

Não incluir o processo de checkout em sua estratégia de otimização de velocidade do site provavelmente resultará em uma taxa de abandono de carrinho mais alta. As pessoas estão confiantes o suficiente para selecionar itens que desejam comprar. Contudo, se forem recebidas com atrasos no checkout, elas precisam realmente amar o produto em seu carrinho para permanecer. Ou, em outras palavras, você corre o risco de perder os compradores por impulso.

Shop Pay permite que os compradores móveis avancem rapidamente pelo checkout em velocidade recorde. Segundo um estudo externo, varejistas que usam checkouts do Shop Pay têm uma taxa de conversão de checkout para pedido 1,91 vezes maior do que aqueles que passam pelo checkout regular.

“A maioria de nossos clientes hoje está descobrindo novos produtos em movimento em seus dispositivos móveis, e se eles tiverem que preencher um formulário, já os perdemos," diz Benjamin Sehl, cofundador da Kotn. “Habilitar o Shop Pay em nosso checkout realmente tornou o ponto mais doloroso da experiência do cliente agradável, e como está vinculado ao ecossistema de um milhão de comerciantes, até novos clientes podem finalizar a compra em um clique.”

Ferramentas de teste de velocidade do site

Cada ferramenta de teste de velocidade usa um método de pontuação diferente, assim como cada equipe terá uma definição diferente do que seria uma boa velocidade de site. Ferramentas que fornecem o tempo de “carregamento da página” precisam selecionar um marcador de tempo específico — como TTFB — em seus resultados.

Use esses testes de velocidade para orientar sua tomada de decisões, mas mantenha a mente aberta. Você deve equilibrar a velocidade do seu site com a construção de uma interface de usuário que otimize a jornada do seu cliente.

Dashboard de Desempenho Web da Shopify

O dashboard de Desempenho Web da Shopify é uma ferramenta poderosa projetada para ajudar e-commerces a otimizar suas vitrines digitais.

Quando os tempos de carregamento de página e a experiência do usuário podem trazer ou perder uma venda, esse dashboard fornece insights inestimáveis sobre o desempenho de uma loja em três indicadores críticos de desempenho:

• Velocidade de carregamento
• Interatividade
• Estabilidade visual.

O dashboard mostra como os clientes reais experimentam a loja em desktops e dispositivos móveis com base em dados coletados ao longo de 28 dias. Você pode observar como mudanças como instalações de aplicativos ou atualizações de tema impactam suas métricas ao longo do tempo, rastreando suas classificações de desempenho, que variam de "bom" a "ruim."

Com filtros personalizáveis e visualizações claras, os comerciantes podem identificar áreas para melhoria e tomar decisões baseadas em dados para melhorar o desempenho da loja. Otimizar seus indicadores de desempenho é uma maneira eficaz de aumentar as taxas de conversão e a visibilidade da sua loja nos resultados de busca também.

À medida que a Shopify continua a evoluir sua infraestrutura, esse dashboard serve como uma ferramenta crucial para comerciantes que buscam oferecer experiências rápidas e sem interrupções para os compradores online modernos.

Auditoria de Velocidade do Site da Shopify

A Auditoria de Velocidade do Site da Shopify permite que você realize uma análise de velocidade competitiva. Insira os detalhes do seu site e a plataforma atual na qual seu site está hospedado (por exemplo, Adobe Commerce (Magento), WooCommerce). A ferramenta medirá várias métricas de desempenho, como tempo de carregamento, TTFB e fatores de velocidade relevantes.

Usando dados coletados de milhões de transações globais, a ferramenta compara as métricas de velocidade do seu site atual com o desempenho médio ou esperado na Shopify. A ferramenta então exibe os resultados da comparação. Por exemplo, pode mostrar que o site WooCommerce do usuário seria uma certa porcentagem mais rápido se fosse hospedado na Shopify.

Google PageSpeed Insights

PageSpeed Insights é uma ferramenta do Google Labs que oferece sugestões personalizadas para melhorar o desempenho do seu site. Ela também destaca os elementos em seu site que desaceleram a página, como CSS e JavaScript.

Você pode até olhar para o desempenho do site móvel de seus concorrentes. Saber o que está errado com o site deles pode ajudá-lo a evitar os mesmos erros.

GTMetrix

GTMetrix dá ao seu site uma nota de velocidade de A a F. Ele combina dados do Yslow e do PageSpeed Insights para fornecer um relatório de desempenho do site que inclui:

• Seu tempo de carregamento da página
• Web Vitals e análise Lighthouse
• Oportunidades de otimização de velocidade do site
• Quebra da composição da página por solicitações e tamanho total em bytes

Pingdom

Pingdom.com irá pontuar o desempenho do seu site (variando de 0% a 100%). Ele também possui um recurso útil de “análise em cascata” que ajuda você a identificar outras áreas problemáticas. Essa pontuação linha por linha é uma ferramenta de referência útil.

Otimize a velocidade do seu site e veja suas conversões dispararem

É importante obter o comprometimento da sua equipe para investir tempo e recursos na otimização do desempenho e da velocidade do seu site. Os dados e ferramentas que foram compartilhados podem ajudá-lo com isso.