Dicas de otimização de velocidade de sites

Os utilizadores da internet estão mais impacientes do que nunca. Cerca de 70% dos consumidores admitem que um site com carregamento lento afeta a sua disposição para comprar a um retalhista online. Isto significa que é fundamental encontrar um equilíbrio entre proporcionar experiências digitais apelativas e ricas em conteúdo e garantir que se mantêm eficientes.

Este guia mostra-lhe como consegui-lo.

O que é a otimização da velocidade de um site?

A otimização da velocidade de um site é a estratégia por trás da melhoria da velocidade de carregamento das suas páginas. Também conhecida como otimização do desempenho de um site, o seu objetivo é fazer com que a sua loja de e-commerce carregue o mais rapidamente possível — antes que os potenciais clientes se frustrem com a experiência online e fechem o separador do navegador.

Existem duas métricas essenciais para medir a velocidade:

1. A velocidade da página, que mede o tempo que o conteúdo de um URL demora a carregar.
2. A velocidade do site, que representa o desempenho geral do seu site. É avaliada por serviços como o Google PageSpeed Insights, que analisam de forma agregada os vários tempos de carregamento do seu site.

O Google recomenda uma velocidade de carregamento de página de dois segundos para um site de e-commerce. Mas, de um modo geral, quanto mais rápido, melhor. A taxa de conversão média de uma loja de e-commerce diminui 0,3% por cada segundo adicional que o seu site demora a carregar. «As pessoas são impacientes», afirma Josh Stutt, responsável de marketing da the49, uma agência de inovação digital. «Todos nos lembramos de ocasiões em que tentámos visitar um site, este não carregou rapidamente e simplesmente fechámos o separador.»

Se tiver uma loja com um valor médio de encomenda de 60 € e 5000 visitantes por dia, por exemplo, um atraso de um segundo na velocidade do site pode custar-lhe 9000 € por dia.

Por que razão a velocidade de um site é importante?

Quanto mais rápido for o seu site, melhor conseguirá captar clientes — incluindo aqueles que abandonam sites de concorrentes mais lentos.

Na verdade, uma melhoria de apenas um milissegundo na velocidade do site pode ter um impacto positivo nas conversões. A Deloitte concluiu que, com um aumento de 0,1 segundos na velocidade do site, as conversões no retalho aumentaram 8,4%. Esses consumidores gastaram quase 10% mais numa única sessão de carregamento rápido.

A investigação da Portent corrobora estas conclusões. Constatou que os sites de e-commerce que carregam em menos de um segundo têm uma taxa de conversão 2,5 vezes superior à dos que carregam em cinco segundos.

A taxa de conversão diminui à medida que a velocidade de carregamento da página aumenta.

Os sites com carregamento lento também prejudicam a sua visibilidade nas pesquisas e a sua classificação em SEO. O Google, o maior motor de busca do mundo, dá prioridade aos sites com bons Core Web Vitals (ou seja, bom desempenho) nos seus resultados de pesquisa.

Além disso, se investir em pesquisa paga como canal de aquisição de clientes, as páginas de destino lentas baixam o seu Índice de Qualidade do Google Ads — o que significa um custo por clique mais elevado. Trata-se de um problema oneroso numa altura em que os custos de aquisição de clientes e de publicidade aumentam de forma desproporcionada na maioria dos setores.

Fatores comuns que afetam a velocidade de um site

A sua plataforma de e-commerce

O seu negócio precisa de uma plataforma de e-commerce com a infraestrutura necessária para melhorar os tempos de carregamento. Enquanto utilizador da plataforma, deve conversar com o seu fornecedor sobre melhorias no back end do seu site, para que as suas páginas carreguem rapidamente para os compradores.

A renderização é o processo de criação do código HTML quando um utilizador carrega a página no seu navegador. A sua infraestrutura de e-commerce dita o processo de renderização.

O Storefront Renderer (SFR) da Shopify, por exemplo, é uma aplicação dedicada a responder aos pedidos das lojas o mais rapidamente possível, resultando em ganhos de desempenho no servidor de 2,5 a 5 vezes superiores à velocidade dos pedidos feitos sem SFR.

“O bloqueio de renderização significa que ficheiros como JavaScript ou CSS impedem uma página de aparecer rapidamente”, explica Chris McCarron, proprietário da GoGoChimp. “Quando um navegador tenta carregar uma página, tem de parar e descarregar esses ficheiros antes de poder mostrar o resto da página.”

Os maiores ganhos de desempenho através do SFR verificam-se nas falhas de cache — os casos em que uma página ou outros dados solicitados não são encontrados na memória cache e têm de ser recuperados de outros níveis de cache ou da memória principal, causando atrasos e lentidão.

A Rhone Apparel começou a usar o SFR em abril de 2020 e registou melhorias notáveis em relação ao mês anterior:

• Aumento de 15% na receita
• Aumento de 17% na taxa de conversão
• Redução de 12% no tempo médio de carregamento das páginas
• Redução de 37,95% no tempo médio de resposta do servidor
• Redução de 3% na taxa de rejeição

Se a sua plataforma de comércio não estiver empenhada em tornar a velocidade uma prioridade máxima, as restantes sugestões que se seguem não farão tanta diferença. Sabendo que dispõe disto com a Shopify, pode assumir o controlo da velocidade do seu site de e-commerce trabalhando nos seguintes pontos para o melhorar ainda mais.

Alojamento

O seu serviço e infraestrutura de alojamento de e-commerce podem influenciar o desempenho do seu site — especialmente em dias de tráfego e de transações elevados.

A lista de retalhistas conhecidos que sofrem quebras nos seus sites de e-commerce durante períodos de vendas cruciais, como a Black Friday — como a Lululemon, a J.Crew e a Lowe’s — não para de crescer. Oitenta e um por cento dos inquiridos num estudo afirmaram que 60 minutos de inatividade custam ao seu negócio mais de 300 000 dólares.

Ao analisar os requisitos de uma plataforma de alojamento, esteja atento a:

• Limites de memória ou de largura de banda para escalar durante promoções sazonais
• Tráfego previsto e carga máxima de utilizadores, para evitar quebras causadas por um pico súbito de visitantes

Antes de qualquer grande evento de vendas, peça ao fornecedor da sua plataforma de comércio que o ajude a preparar-se para picos de tráfego inesperados ou uma afluência de encomendas.

As quebras de serviço nunca são fáceis de gerir, mas podem ser particularmente graves para uma empresa avaliada em 5 mil milhões de dólares durante a sua maior época de vendas do ano. O site da JB Hi-Fi esteve inativo durante duas horas na BFCM devido a problemas técnicos. “Já vimos os sites de retalhistas de renome ficarem inacessíveis”, afirma Chris Lang, diretor-geral de engenharia da JB Hi-Fi. 

“O país inteiro fica a saber. É mau para os clientes e é mau para a marca. Faríamos tudo para evitar isso.”

Depois de mudar para a Shopify Plus, a JB Hi-Fi registou vendas recorde, graças a quase o dobro do tráfego online durante a BFCM — tudo isto sem problemas de desempenho no site.

Com a sua infraestrutura baseada na cloud, a Shopify Plus tem uma disponibilidade geral de 99,98%, com uma loja que carrega 2,97 vezes mais depressa do que outras plataformas SaaS.

Arquitetura do site

Os sites de e-commerce utilizam diversas arquiteturas para apresentar informação tanto aos utilizadores como aos navegadores. Isto pode tornar-se complexo à medida que cresce, afirma Javier Moreno, gestor de ciência de dados na Shopify: “À medida que as marcas crescem e se tornam mais sofisticadas, os seus sites tornam-se mais ricos. Essa riqueza costuma ter um preço; a menos que preste atenção ativa à velocidade, as alterações vão tornar o seu site mais lento.”

Na tentativa de melhorar a velocidade dos sites, alguns comerciantes recorrem ao comércio headless — um conceito que separa o front end do seu site de e-commerce da plataforma de back end que o alimenta.

Os retalhistas que usam os Commerce Components da Shopify levam isto ainda mais longe. Escolhem as tecnologias de e-commerce de que precisam, quando precisam, em vez de sobrecarregarem um navegador com demasiados fragmentos de código que prejudicam a velocidade do site.

O desempenho de um site piora à medida que este cresce.

Excesso de aplicações de terceiros

Se tiver mais de 20 plug-ins de e-commerce instalados na sua loja, provavelmente não os está a usar todos. Talvez tenha instalado alguns em modo experimental e depois se tenha esquecido de os remover. Mas essas aplicações continuam a funcionar em segundo plano e podem estar a prejudicar ativamente o desempenho do seu site.

Recorra a um programador para remover quaisquer aplicações desnecessárias. Depois, realize testes de velocidade das páginas com ferramentas como o GTmetrix ou o PageSpeed Insights, ou até um teste manual usando as ferramentas de programador do Chrome. Clique no separador “Rede” e recarregue a página.

Sempre que quiser instalar uma nova aplicação, pergunte a si mesmo: o valor acrescentado desta aplicação compensará a possível lentidão na velocidade de carregamento?

A maioria dos ficheiros de script/CSS das aplicações descarregadas através do Administrador da Shopify Plus é injetada no <head> do seu ficheiro theme.liquid, dentro de {{ content_for_header }}.

Uma aplicação precisa de ser renderizada antes de qualquer outro código ser carregado.

“Gerir esta tensão entre um carregamento mais rápido e o valor experiencial e comercial das aplicações é a razão pela qual carregamos de forma assíncrona os scripts adicionados com a API Script Tag — para que o carregamento da página não seja interrompido”, afirma Jason Bowman, líder de equipa de engenharia de soluções na Shopify Plus. “No entanto, os <scripts> adicionados diretamente no <head> têm, muitas vezes, um impacto imediato no desempenho.”

Formas de aceder à informação sobre a velocidade de um site

Cada ferramenta de teste de velocidade usa um método de avaliação diferente, tal como cada equipa terá uma definição diferente do que é uma boa velocidade de site. As ferramentas que indicam o tempo de “carregamento da página” têm de selecionar um marcador temporal específico — como o “tempo até ao primeiro byte” (TTFB) — nos seus resultados.

Use estes testes de velocidade para orientar as suas decisões, mas mantenha uma mente aberta. Tem de equilibrar a velocidade do seu site com a criação de uma interface que otimize o percurso do cliente.

Google PageSpeed Insights

O PageSpeed Insights é uma ferramenta do Google Labs que lhe dá sugestões personalizadas para melhorar o desempenho do seu site. Também assinala os elementos do seu site que tornam a página mais lenta, como o CSS e o JavaScript.

“Garanto que todos os projetos em que trabalho são testados regularmente no Google PageSpeed Insights ou numa ferramenta semelhante”, afirma Josh Stutt. “Antes de poder melhorar, precisa de saber como está a desempenhar-se e quais poderão ser os seus pontos fracos.”

Pode até analisar o desempenho do site móvel dos seus concorrentes. Saber o que está errado no site deles pode ajudá-lo a evitar os mesmos erros.

Na imagem podemos ver um exemplo de relatório do Google PageSpeed Insights.

GTMetrix

O GTMetrix atribui ao seu site uma classificação de velocidade de A a F. Combina dados do Yslow e do PageSpeed Insights para fornecer um relatório de desempenho que inclui:

• A velocidade de carregamento das suas páginas
• Análise dos Web Vitals e do Lighthouse
• Oportunidades de otimização da velocidade do site
• Detalhe da composição da página por pedidos e tamanho total em bytes

Na imagem podemos ver um exemplo de relatório de desempenho do GTMetrix.

Pingdom

O Pingdom.com classifica o desempenho do seu site (numa escala de 0% a 100%). Também dispõe de uma útil funcionalidade de “análise em cascata” que o ajuda a identificar outras áreas problemáticas de destaque. Esta avaliação linha a linha é uma ferramenta de referência muito prática.

Exemplo de relatório do Pingdom para um site de e-commerce.

Como otimizar a velocidade do seu site:

• Use uma rede de distribuição de conteúdos
• Não exagere nos ajustes ao tema
• Ative a vista rápida nas páginas de categoria
• Remova pop-ups desnecessários
• Reduza os carrosséis de imagens principais na página inicial
• Comprima, redimensione e reduza imagens
• Use embeds leves para vídeo
• Reduza os redirecionamentos e as ligações quebradas
• Ative o carregamento diferido
• Desbloqueie o navegador dos scripts que bloqueiam o parser
• Organize o rastreio com o Google Tag Manager
• Cuidado com o excesso de ciclos Liquid

Use uma rede de distribuição de conteúdos (CDN)

Uma rede de distribuição de conteúdos, ou CDN (Content Delivery Network), é um conjunto de servidores dispersos por todo o mundo. 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 dos utilizadores locais mais rápidas.

Uma vez que cada vez mais sites de e-commerce se tornam globais, uma CDN — ou, no caso da Shopify, CDNs duplas — é um ingrediente indispensável para o desempenho de uma plataforma.

A Shopify oferece uma CDN de nível mundial, com tecnologia Fastly, sem custos adicionais. Existem agora menos Pontos de Presença (PoPs) da Fastly, mas mais potentes, em localizações estratégicas por todo o mundo. Estes PoPs de alta densidade permitem servir mais a partir da cache, incluindo conteúdos estáticos e dinâmicos. Isto melhora o seu rácio de acertos de cache, resultando em melhores experiências para os utilizadores.

De um modo geral, as CDNs aumentam a velocidade ao mesmo tempo que reduzem custos. «Obter a nossa licença, o alojamento e a CDN através da Shopify Plus poupou-nos, logo à partida, cerca de 100 000 dólares por ano», afirma Diana Harbour, proprietária da Red Dress Boutique.

Veja o caso do conteúdo visual — muitas vezes a causa de um desempenho lento. A Shopify informa a CDN sempre que os seus recursos (por exemplo, imagens, JavaScript e CSS) mudam.

Faça isto com a Shopify

Os comerciantes da Shopify podem usar o filtro asset_url e adicionar automaticamente números de versão a todos os URLs que geramos. Por exemplo, um número de versão adicionado ao final de um URL pode ter este aspeto: ?v=1384022871. Este filtro indica à CDN qual a versão correta a apresentar. Sem ele, poderá não ver o recurso esperado depois de ter feito alterações ao seu conteúdo.

Além disso, se referenciar conteúdo diretamente no seu CSS, o URL será estático. Também não incluirá a versão do recurso atualizada automaticamente pela Shopify.

Para garantir atualizações automáticas, altere a sintaxe do seu CSS de modo a incluir o filtro asset_url. Para obter informações sobre todos os filtros de URL que ajudam a apresentar recursos, visite o Centro de Ajuda da Shopify.

Não exagere nos ajustes ao tema

O aspeto de um site determina a probabilidade de um cliente interagir com ele. Vários estudos mostram que 94% das primeiras impressões estão relacionadas com o design — e estas decisões acontecem a uma velocidade impressionante. A primeira impressão dos visitantes de um site forma-se em apenas um décimo de segundo.

Dito isto, existe uma relação de compromisso entre a velocidade do site e um tema apelativo — este último costuma vir acompanhado de código sobrecarregado e gráficos em excesso. “Não precisa de um tema com todos os luxos”, afirma Josh Stutt. “Precisa de um que seja limpo, rápido e fácil de navegar. Já vi melhorias superiores a 50% na taxa de rejeição da página inicial para novos visitantes simplesmente por mudar para um tema mais depurado.”

Nirav Sheth, CEO e fundador da Anatta, afirma: “Truques rápidos de velocidade não constroem a base para um desempenho duradouro — só melhorias reais de velocidade o farão, e isso começa por otimizar a arquitetura subjacente do seu tema.”

Ative a vista rápida nas páginas de categoria

Os pop-ups de vista rápida mostram um produto — diretamente a partir de uma página de listagem de produtos — sem obrigar o utilizador a visitar a página de detalhe do produto.

Em teoria, a vista rápida deveria poupar tempo aos seus clientes, mas na prática pode prejudicar a experiência do cliente no seu site de e-commerce:

• Acrescenta um passo extra ao percurso do cliente.
• Pode ser clicada por engano, o que é frustrante para o utilizador.
• Pode ser confundida com uma página de produto.
• E, mais importante, pode tornar o tempo de carregamento da sua página significativamente mais lento.

As implementações de pop-ups de vista rápida (integradas num tema ou através de uma aplicação) podem, por vezes, pré-carregar a informação de uma página de produto inteira, para o caso de um visitante clicar no botão “Vista rápida”.

Mas isso representa uma quantidade enorme de dados a carregar, especialmente numa 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 utilizadores fazem scroll ou movem o cursor para clicar nas páginas do seu site — pode ajudá-lo a perceber se os seus clientes estão sequer a usar a vista rápida.

Algumas aplicações que podem ajudar incluem:

• Hindsight
• Hotjar

Encontre a vista rápida na Shopify

Deve sempre ser fácil verificar se existe um botão de vista rápida nas miniaturas de produtos da sua loja. Consulte o personalizador do seu tema para encontrar uma opção que permita ativar ou desativar esta função. Se não vir esta opção no personalizador do tema, verifique se provém de uma aplicação. Se for esse o caso, deverá ser óbvio como removê-la.

Se os dois primeiros passos não ajudarem, é provável que a funcionalidade esteja integrada no próprio tema. Nesse caso, precisa de um programador para a identificar e remover. Encontre um Parceiro de Serviços da Shopify Plus para o auxiliar neste processo.

Use AJAX para obter a informação do produto apenas quando um visitante clica no botão de vista rápida. Em alternativa, guarde um conjunto limitado de informação do produto como atributos de dados no item da grelha de produtos. Depois, construa dinamicamente o HTML e o pop-up com JavaScript.

Qualquer uma destas opções é menos ideal do que remover a vista rápida. A informação do produto continua a ter de ser carregada para cada produto. Ainda assim, é melhor do que descarregar todas as imagens e ligações dos produtos.

Remova pop-ups desnecessários

Os pop-ups existem para apresentar ofertas especiais ou incentivar as pessoas a dar o próximo passo no percurso do cliente. Quer seja resgatar um cupão ou introduzir o endereço de email, os pop-ups ajudam a envolver os visitantes de primeira vez e abrem a porta a comunicações futuras.

No entanto, existe uma arte subtil nos pop-ups de e-commerce. Demasiados gráficos intermitentes podem prejudicar a velocidade e o desempenho do site — para não falar de distrair os utilizadores do conteúdo do site que já otimizou para conversões.

Defina parâmetros para a utilização dos seus pop-ups, de forma a evitar atrasos na velocidade do site. 

Por exemplo, pode criar acionadores para os pop-ups, para que o código extra não contribua para um site com carregamento lento. Evite apresentá-los imediatamente ao carregar a página, optando antes por pop-ups de intenção de saída ou com atraso temporal. Ambos os acionadores dão algum espaço de respiração entre o carregamento inicial da página e o do pop-up.

Reduza os carrosséis de imagens principais na página inicial

As grandes apresentações de diapositivos com várias imagens principais são ótimas para exibir os seus produtos. Infelizmente, há uma desvantagem: o tamanho e a qualidade necessários para que um carrossel de imagens fique bem podem aumentar os tempos de carregamento — sobretudo se tiver quatro ou cinco diapositivos.

Reduza o número de diapositivos na página inicial ou elimine-os por completo. Uma única imagem principal de alta qualidade e bem pensada — com uma chamada para ação clara — ajuda a captar os seus clientes rapidamente, uma vez que o cérebro processa imagens visuais 60 000 vezes mais depressa do que processa texto.

Se tiver mesmo de usar um carrossel, siga as boas práticas de UX, tais como:

• Limite-se a dois ou três diapositivos
• Apresente os diapositivos como secções de conteúdo estático, em vez de carrosséis com rotação automática
• Use srcset ou Lazy Load como solução abrangente

A Chubbies, por exemplo, usa imagens otimizadas em vez de um carrossel de imagens principais tradicional na página inicial. O cofundador Tom Montgomery afirma: «Estamos com a Shopify desde o primeiro dia. Nenhum de nós é engenheiro, por isso é ótimo podermos confiar nos especialistas da Shopify para nos podermos concentrar em inovar.»

Comprima, redimensione e reduza imagens

As imagens representam entre 50% e 75% do peso total das suas páginas web. Isto pode tornar-se um problema maior à medida que o seu site de e-commerce cresce. Quanto mais produtos vender, mais ficheiros de imagem terá no seu servidor. Cada imagem que usa numa página gera um novo pedido HTTP. Além de otimizar a velocidade da página, reduzir as imagens ajuda-o a dizer mais com menos.

Alex Mirzaian, gestor de marketing da Eightvape, afirma: “Quando estamos constantemente a criar conteúdo através de artigos de blogue ou a criar vários produtos por dia, temos tendência a adicionar imagens ao site sem pensar. Comprimir imagens pode ajudar imenso quando temos milhares de imagens no site.”

Pode minimizar o tamanho das imagens sem reduzir a qualidade através de compressão sem perdas, com ferramentas como o TinyJPG ou o TinyPNG.

Esteja também atento a fontes de imagem vazias — <img src = ’ ’> — no seu código. Estas criam uma carga excessiva no navegador, ao enviarem mais um pedido aos seus servidores. Uma solução simples são os “sprites” de CSS, que consolidam várias imagens (como ícones) numa só, limitando o número de pedidos de imagens individuais ao servidor. Também melhoram a velocidade da sua página.

Os parâmetros de tamanho de imagem integrados na Shopify permitem-lhe descarregar a menor imagem possível mantendo a qualidade. Solicita à Shopify o tamanho exato da imagem que vai ser apresentada, reduzindo assim o tamanho do ficheiro descarregado da CDN e o redimensionamento necessário do lado do navegador.

«Um dos nossos clientes tinha um site com carregamento lento, por isso começámos por otimizar as imagens», afirma Maria Harutyunyan, cofundadora da Loopex Digital. “Tornámo-las mais pequenas e comprimimo-las, o que fez uma enorme diferença na rapidez com que as páginas carregam. Na verdade, as imagens ocupam agora 60% menos espaço e carregam muito mais depressa.”

Use embeds leves para vídeo

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

O código de incorporação padrão do YouTube não só sobrecarrega o seu site — já que alguns ficheiros são descarregados mesmo antes de o visitante clicar no botão de reprodução — como usa a etiqueta <iframe>, na qual a largura e a altura do leitor de vídeo são fixas. O seu vídeo não se ajusta ao tamanho do ecrã dos diferentes dispositivos.

A solução são os embeds leves, que carregam os vídeos diretamente na sua página web. Quando a página carrega inicialmente, o site incorpora apenas a imagem em miniatura do vídeo do YouTube. O próprio leitor de vídeo (e todo o seu JavaScript adicional) só carrega quando o utilizador clica dentro da miniatura.

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

Reduza os redirecionamentos e as ligações quebradas

Demasiados redirecionamentos e ligações quebradas podem prejudicar o desempenho e a sua classificação em SEO.

Faça uma limpeza aos seus redirecionamentos. Por exemplo, os redirecionamentos 302, que indicam que uma página foi movida temporariamente, podem prejudicar o seu SEO. Também acionam pedidos HTTP adicionais e atrasam a transferência de dados.

Em vez disso, use um “redirecionamento com cache” ou a função de redirecionamentos integrada da Shopify — que são 301 por predefinição — no seu painel de Navegação. E lembre-se: nunca redirecione URLs para páginas que sejam elas próprias redirecionamentos.

As ligações quebradas de elementos da página, como imagens, ficheiros CSS e JS, aumentam os pedidos HTTP e prejudicam a velocidade do seu site. Use uma ferramenta como o Broken Link Checker para as remover. Criar páginas de erro 404 personalizadas ajudará os visitantes que, por engano, introduzam um URL incorreto do seu site.

A comerciante da Shopify Plus Gymshark direciona as pessoas que caem numa ligação quebrada para as suas duas maiores categorias: roupa de mulher e de homem.

Ative o carregamento diferido

O carregamento diferido (lazy loading) é uma técnica que impede que todo o conteúdo de uma página web seja carregado de imediato. Os sites de e-commerce que usam o carregamento diferido só mostram o conteúdo quando os utilizadores acionam determinados gatilhos.

Podemos ver o carregamento diferido em ação quando um utilizador visita a página de um produto no seu site de e-commerce. Apenas o conteúdo visível acima da dobra aparece imediatamente, como o título do artigo, as imagens e a descrição do produto. O conteúdo complementar surge quando os utilizadores fazem scroll para baixo dessa secção. O conteúdo gerado pelos utilizadores, os carrosséis de redes sociais e as avaliações dos clientes são todos carregados de forma diferida, para evitar que o código sobrecarregue o servidor com demasiada informação logo no carregamento.

Chris McCarron, da GoGoChimp, usou esta estratégia de otimização da velocidade na loja de e-commerce de um cliente: “Havia um número impressionante de imagens abaixo da dobra em cada página web. O problema é que um navegador descarrega em simultâneo todas as imagens de uma página, independentemente de quais estão visíveis. No entanto, o carregamento diferido só descarrega uma imagem quando esta pode ser vista no navegador.”

Desbloqueie o navegador dos scripts que bloqueiam o parser

Antes de um navegador poder apresentar uma página ao seu cliente, tem de passar por um processo chamado «análise do HTML» (parsing). Mas os scripts que bloqueiam o parser interrompem este processo: quando um navegador encontra um script destes, tem de parar tudo e concentrar-se apenas na execução desse script antes de poder continuar a fazer qualquer outra coisa.

Felizmente, há uma solução simples, e basta o atributo “async” ou “defer”.

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

Vale a pena referir que o próprio JavaScript não bloqueia os navegadores — é a forma como o JavaScript é carregado que determina se bloqueia ou não o navegador. Depois de fazer estas alterações ao seu código, verifique se o seu site continua a oferecer a mesma experiência pretendida.

Organize o rastreio com o Google Tag Manager

Os dados dos clientes alimentam as suas estratégias de e-commerce e de marketing digital. Mas a recolha desses dados também pode tornar o desempenho do seu site mais lento. Todas aquelas etiquetas de rastreio em JavaScript (por exemplo, para análises gerais, conversões, objetivos e retargeting comportamental) são, muitas vezes, as culpadas.

A recolha de dados dos clientes também pode representar uma sobrecarga de tempo e de recursos para as suas equipas de programação, de TI ou de marketing. Um sistema de gestão de etiquetas (TMS) como o Google Tag Manager condensa todas as suas etiquetas num único pedido de JavaScript. Se uma falha numa etiqueta fizer com que o seu site fique inacessível, ter um TMS também o ajuda a remover a etiqueta rapidamente.

Nirav Sheth acrescenta que, quando a Anatta estava a otimizar a velocidade de um site de e-commerce do setor da beleza, “o que mais fez a diferença na velocidade do site, mais do que qualquer outra coisa, foi a combinação de tirar partido das APIs da Shopify e de limpar o Google Tag Manager”.

Basta um único fragmento de código para gerir num só lugar as etiquetas da sua loja Shopify Plus com o Google Tag Manager. Para saber mais, consulte as orientações no Centro de Ajuda da Shopify Plus.

Cuidado com o excesso de ciclos Liquid

A Liquid é uma poderosa linguagem de programação da Shopify. Há, no entanto, certos casos em que é preciso ponderar os benefícios acrescentados face aos custos.

A iteração com forloop é um desses casos. O forloop significa que o sistema tem de percorrer (por exemplo, rastrear ou pesquisar) todos os produtos de uma coleção, e ocorre quando procura uma condição específica (por exemplo, o preço ou uma etiqueta).

Estas funcionalidades podem ser úteis em certos casos — como mostrar imagens ou variantes de produtos. Também são úteis quando tem um número reduzido de produtos numa página de coleção, mas tenha cuidado com o impacto nos tempos de carregamento.

Reveja o código do seu tema para se certificar de que não está a executar vários forloops Liquid à procura da mesma informação. Isto pode acontecer quando vários programadores trabalham num tema e acabam por duplicar tarefas ou introduzir código conflituoso. Remover estas duplicações fará com que a sua página carregue mais depressa.

Muitas vezes, é mais fácil usar um simples ciclo product.options_with_values. Reveja a documentação para compreender como funcionam a linguagem de templates da Shopify e os ciclos Liquid.

Como realizar um teste de velocidade de um site

Os Core Web Vitals são um conjunto de métricas que ajudam a avaliar a velocidade de um site. Nos sites que cumprem estes limiares dos Core Web Vitals, os utilizadores tinham uma probabilidade 24% menor de abandonar o site a meio do carregamento da página.

• Página totalmente carregada: esta é a medida mais tradicional do tempo que a sua página demora a carregar por completo.
• Tempo até ao primeiro byte: a rapidez com que uma página inicia o processo de carregamento.
• Primeira renderização significativa: a rapidez com que os visitantes conseguem carregar o suficiente de uma página para lhe dar sentido.

O Google PageSpeed Insights avalia cada um destes Core Web Vitals por estado: Bom, Precisa de Melhorias e Fraco. Por baixo de cada pontuação, verá também recomendações de velocidade personalizadas para o seu site.

Na imagem podemos ver o relatório de Core Web Vitals do Google PageSpeed Insights.

Otimizar a velocidade para dispositivos móveis

A tendência das compras através de dispositivos móveis só vai continuar a crescer — prevê-se que as vendas do comércio móvel venham a representar 10,4% de todas as vendas de e-commerce até 2025.

Apesar das elevadas taxas de compra em dispositivos móveis, nem todos os compradores estão dispostos a gastar dinheiro em sites com carregamento lento. Tanto assim é que uma melhoria de apenas um milissegundo na velocidade de carregamento em dispositivos móveis pode aumentar as taxas de conversão em 8,4%.

Depois de descobrir que a maioria dos seus visitantes em dispositivos móveis não estava a converter, a Merchology, marca de vestuário e artigos promocionais corporativos, decidiu redesenhar o seu site móvel para uma experiência do cliente com prioridade aos dispositivos móveis. Dois meses após o lançamento do site móvel, a Merchology conseguiu um aumento de 40% nas taxas de conversão em dispositivos móveis.

Eis como pode garantir que a sua presença com prioridade aos dispositivos móveis, bem como o desempenho e a velocidade gerais do seu site, igualam ou superam os dos seus concorrentes.

Crie Accelerated Mobile Pages

As Accelerated Mobile Pages (AMP) são um projeto patrocinado pelo Google que reformata o conteúdo de um site para dispositivos móveis. Nos sites com AMP ativadas, o Google guarda cada página em cache e recarrega-a sempre que um utilizador a visita a partir da pesquisa. Isto reduz os tempos de carregamento, resultando num aumento de duas vezes no tempo passado na página e num aumento de 20% nas conversões, em comparação com páginas sem AMP.

Implemente as AMP na sua loja de e-commerce com aplicações da Shopify como o AMP, o Fire AMP ou o The AMP App. Cada uma elimina o código complexo que sobrecarrega o seu site móvel, para carregar as páginas rapidamente.

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

Nem todos os utilizadores de internet móvel navegam no seu site de e-commerce com uma ligação de rede forte. Talvez sejam clientes da Allbirds a consultar o site do retalhista a meio de uma caminhada, quando os sapatos que calçam se estão a desfazer. Ou clientes da Firebelly Tea a encomendar a próxima caixa de saquetas de chá enquanto esperam no parque de estacionamento que os filhos saiam da escola.

Seja como for, estas pessoas poderão interagir com os vídeos que os retalhistas usam para comunicar com potenciais clientes no seu site móvel. Mas reproduzir estes vídeos automaticamente pode causar atrasos graves na velocidade do site.

A ligação de rede móvel precisa de descarregar um ficheiro grande quando um vídeo está definido para reprodução automática. Quando este é substituído por uma miniatura estática e por um botão opcional para acionar o vídeo, o ficheiro de tamanho completo não precisa de ser carregado através de uma ligação de internet fraca. Os visitantes obtêm a sua primeira visualização significativa a uma velocidade recorde.

Otimize a finalização da compra em dispositivos móveis

O processo de finalização da compra é, muitas vezes, esquecido quando se fazem melhorias à velocidade do site móvel. As páginas iniciais, de produtos e de categorias recebem a maior atenção, sobretudo porque não queremos que os potenciais clientes tropecem logo no primeiro obstáculo: a sua interação inicial com a loja através do dispositivo móvel.

Não incluir o processo de finalização da compra na sua estratégia de otimização de velocidade resultará, muito provavelmente, numa taxa mais elevada de abandono do carrinho. As pessoas têm confiança suficiente para escolher a dedo os artigos que querem comprar. Mas, se depararem com atrasos na finalização da compra, têm mesmo de adorar o produto que têm no carrinho para se manterem por lá. (Ou seja: vai perder os compradores por impulso.)

O Shop Pay permite aos compradores em dispositivos móveis finalizar a compra a uma velocidade recorde. Segundo a Shopify, os comerciantes que usam o checkout com o Shop Pay têm uma taxa de conversão de checkout em encomenda, em dispositivos móveis, 1,91 vezes superior à dos que usam o checkout normal.

“Hoje em dia, a maioria dos nossos clientes descobre novos produtos em movimento, nos seus dispositivos móveis, e, se tiverem de preencher um formulário, perdemo-los”, afirma Benjamin Sehl, cofundador da Kotn. “Ativar o Shop Pay no nosso checkout tornou verdadeiramente agradável o ponto mais penoso da experiência do cliente e, como está ligado a um ecossistema de um milhão de comerciantes, até os novos clientes conseguem finalizar a compra com um só clique.”

A Kotn usa o Shop Pay para proporcionar experiências rápidas de finalização da compra em dispositivos móveis.

Otimize a velocidade do seu site e veja o impacto nas conversões

É importante obter o apoio da sua equipa para investir tempo e recursos na otimização do desempenho e da velocidade do seu site. Os dados e as ferramentas que partilhámos podem ajudá-lo a construir um argumento sólido.

Muitas destas otimizações podem ser feitas por si. Quando tal não for possível, pode recorrer à ajuda de um Parceiro da Shopify Plus. Ele pode orientá-lo sobre como acelerar o seu site Shopify.