Otimizar a Sua Loja para Velocidade e Desempenho

A velocidade das páginas não é uma métrica de vaidade. Situa-se diretamente no caminho entre um visitante curioso e um cliente pagante, e cada segundo adicional de tempo de carregamento dá a alguém um motivo para sair. A própria investigação da Google sobre páginas móveis aponta há muito na mesma direção: à medida que o tempo de carregamento sobe de um para três segundos, a probabilidade de abandono aumenta acentuadamente. Numa loja, esse abandono é uma venda perdida — e muitas vezes um cliente perdido que nunca mais regressa.

A boa notícia é que grande parte do trabalho pesado é tratado por si ao nível da plataforma. O resto resume-se a uma pequena lista de hábitos que qualquer comerciante pode adotar sem tocar em código. Este guia cobre ambos: o que a Dirora faz nos bastidores e o que controla por cima disso.

Porque é que a velocidade se paga a si própria

A velocidade compõe-se com tudo o resto que faz. Páginas mais rápidas convertem melhor, posicionam-se melhor nas pesquisas e custam menos a publicitar, porque as plataformas de publicidade recompensam páginas de destino que não frustram as pessoas que lhe enviam. Se está a investir em SEO para a sua loja, o desempenho não é um projeto separado — os Core Web Vitals são um sinal de posicionamento, pelo que um site rápido e um site bem otimizado são cada vez mais a mesma coisa.

Também protege o dinheiro que já gastou. Atrair tráfego através de anúncios ou de conteúdo e depois perder uma parte dele para uma página de carregamento lento é um dos erros mais dispendiosos no comércio eletrónico, precisamente porque é invisível na maioria dos painéis. Os visitantes não se queixam; simplesmente saem.

Compreender os Core Web Vitals

Os Core Web Vitals são a tentativa da Google de transformar «esta página parece rápida e estável?» em três números mensuráveis. Vale a pena compreendê-los porque correspondem de forma clara ao que um comprador realmente experimenta:

• Largest Contentful Paint (LCP) — quanto tempo demora até o conteúdo principal, normalmente a sua imagem de destaque ou a fotografia do produto, ficar visivelmente renderizado. Aponte para menos de 2,5 segundos. É sobretudo um problema de imagem e de resposta do servidor.

• Interaction to Next Paint (INP) — a rapidez com que a página responde quando alguém toca em «Adicionar ao cesto» ou abre um menu. Aponte para menos de 200 milissegundos. É sobretudo um problema de JavaScript.

• Cumulative Layout Shift (CLS) — quanto a página salta durante o carregamento. Aponte para menos de 0,1. Nada é mais frustrante do que ir para carregar num botão que se desloca no momento em que o conteúdo acima dele carrega.

Não precisa de memorizar os limiares, mas saber que alavanca move que métrica ajuda-o a investir esforço onde ele conta. A maioria das melhorias abaixo visa o LCP e o CLS, porque é aí que os comerciantes têm mais influência.

Um backend em Go de alto desempenho

Antes de um único pixel ser renderizado, o navegador tem de pedir a página ao servidor — e a rapidez com que o servidor responde define o teto para tudo o resto. As montras da Dirora são servidas por um backend escrito em Go, uma linguagem construída exatamente para este tipo de trabalho concorrente e de elevado débito. Respostas rápidas do servidor significam um baixo Time to First Byte, o que alimenta diretamente um bom LCP.

Por trás disso, os dados de produto e de catálogo são colocados em cache de forma agressiva, para que os pedidos repetidos sejam respondidos a partir da memória em vez de recalculados a partir da base de dados todas as vezes. A arquitetura foi concebida para manter os tempos de resposta baixos mesmo quando uma promoção-relâmpago ou uma publicação viral lhe envia um pico de tráfego. Se tem curiosidade sobre como a plataforma está construída, escrevemos sobre a nossa arquitetura de microsserviços com mais profundidade. O resultado prático para si enquanto comerciante é simples: a parte mais lenta e mais dispendiosa da renderização de páginas está tratada, e mantém-se rápida à medida que cresce.

Renderização no servidor

As montras da Dirora usam renderização no servidor (SSR). Em vez de enviar ao navegador uma estrutura vazia e uma pilha de JavaScript que depois tem de ir buscar dados e construir a página, o servidor monta o HTML terminado e envia-o pronto a exibir. O cliente vê conteúdo quase imediatamente, em vez de olhar para um ecrã em branco ou para um ícone de carregamento enquanto os scripts são executados.

Isto importa por duas razões. Primeiro, é mais rápido para pessoas reais, sobretudo em telemóveis de gama média e ligações móveis irregulares, onde JavaScript pesado do lado do cliente mais prejudica. Segundo, é mais amigável para os motores de busca e para as pré-visualizações de ligações nas redes sociais, que conseguem ler o HTML totalmente formado sem terem de executar o seu JavaScript. O SSR é uma daquelas decisões que discretamente melhora ao mesmo tempo a conversão e a descoberta.

Otimização automática de imagens

As imagens são quase sempre os maiores ficheiros numa página de comércio eletrónico, e são onde estão os maiores e mais fáceis ganhos. A Dirora otimiza as imagens por si automaticamente: as fotografias carregadas são convertidas para formatos modernos e eficientes, e a plataforma gera múltiplos tamanhos responsivos, de modo a que um telemóvel descarregue uma imagem pequena enquanto um ecrã de secretária grande recebe uma mais nítida. Os dados móveis de ninguém são gastos a descarregar uma fotografia de produto de 4000 píxeis de largura para a exibir com 400 píxeis de largura.

As imagens abaixo da dobra também são carregadas de forma diferida, o que significa que o navegador só as vai buscar à medida que o cliente se desloca na direção delas. Isso mantém o carregamento inicial da página leve e coloca o seu conteúdo de destaque — o seu elemento de LCP — no ecrã mais depressa.

A automatização só vai até certo ponto, porém. O hábito mais útil que pode desenvolver é carregar originais sensatos:

• Dimensione corretamente antes de carregar. Uma imagem de produto exibida a 800 píxeis de largura não precisa de começar a vida com 5000. Exporte numa dimensão razoável e deixe a plataforma tratar do resto.

• Recorte de forma consistente. Proporções uniformes em todo o seu catálogo evitam a deslocação do layout e fazem com que as páginas de coleção pareçam arrumadas e profissionais.

• Defina texto alternativo. Ajuda a acessibilidade e a pesquisa de imagens, e é um trabalho de dois minutos por produto.

Se as imagens são centrais para a sua marca, o nosso guia sobre fotografia de produtos combina bem com isto — fotografias excelentes que também são leves são inteiramente alcançáveis.

Sirva os ficheiros perto dos seus clientes

Os ficheiros estáticos — imagens, tipos de letra, scripts, folhas de estilo — são entregues através de uma rede de distribuição de conteúdos com cache sensata, pelo que os ficheiros são servidos a partir de um local próximo do seu cliente em vez de fazerem uma longa viagem de ida e volta em cada visita. Combinado com o próprio domínio personalizado e SSL automático da sua montra, isto mantém a entrega rápida e segura. Uma ligação HTTPS moderna não é apenas o cadeado; é um pré-requisito para os protocolos web mais recentes e rápidos que aceleram a entrega de ficheiros. Cobrimos a configuração de ponta a ponta no nosso guia de domínios personalizados e SSL.

Mantenha o seu tema e o CSS personalizado enxutos

Esta é a área que controla mais diretamente. O editor visual de temas da Dirora permite-lhe construir páginas sofisticadas a partir de widgets de arrastar e largar, mas, como qualquer ferramenta poderosa, recompensa a contenção. Alguns hábitos mantêm a sua montra rápida:

• Não sobrecarregue a página inicial. Cada carrossel adicional, vídeo incorporado e animação acrescenta peso e trabalho para o navegador. Lidere com aquilo que vende; mova o resto para baixo da dobra ou para páginas dedicadas.

• Mantenha o CSS personalizado arrumado. Se usar a funcionalidade de CSS personalizado, evite seletores profundamente aninhados e apague regras que já não usa. O navegador tem de analisar todo o seu CSS antes de poder terminar a renderização, pelo que o excesso aqui atrasa a página inteira.

• Tenha cuidado com scripts de terceiros. Ferramentas de análise, widgets de chat e pixéis de marketing acrescentam, cada um, JavaScript que pode prejudicar o seu INP. Acrescente os que compensam e remova periodicamente os que deixou de usar.

• Reserve espaço para conteúdo dinâmico. Banners e incorporações que carregam tarde são uma causa comum de deslocação do layout. Sempre que puder, dê-lhes um espaço fixo para que nada salte.

A pré-visualização em tempo real e o histórico de anular/refazer do editor de temas tornam pouco arriscado experimentar — mude uma coisa, olhe para ela e reverta se parecer mais pesada. O nosso passo a passo sobre dominar o editor de temas aprofunda a construção de páginas que se mantêm rápidas.

Meça, não adivinhe

O trabalho de desempenho corre mal quando é conduzido por palpites. Teste as suas páginas em produção num verdadeiro telemóvel de gama média com dados móveis, não apenas no seu portátil rápido de escritório com banda larga — essa é a experiência que a maioria dos seus clientes está realmente a ter. Ferramentas gratuitas como o PageSpeed Insights e o Lighthouse da Google reportam os seus Core Web Vitals e, mais útil ainda, dizem-lhe que ficheiro ou script específico está a travar uma página.

Combine isso com os números da sua própria loja. O seu painel de análises mostra onde os visitantes desistem, e uma página com uma taxa de abandono invulgarmente elevada esconde frequentemente um problema de desempenho. Corrija, volte a medir e passe ao próximo estrangulamento. Melhorias pequenas e repetidas superam uma grande reescrita.

A conclusão

A maior parte da engenharia de desempenho mais difícil — o backend em Go, a renderização no servidor, a otimização de imagens, a cache e a entrega por CDN — é tratada por si, e aguenta-se à medida que o seu tráfego cresce. O seu trabalho é o último quilómetro: carregar imagens de dimensão sensata, manter o seu tema e o CSS personalizado enxutos, acrescentar scripts de terceiros com parcimónia e medir em dispositivos reais. Faça essas poucas coisas de forma consistente e terá uma loja que carrega depressa, se posiciona bem e transforma mais do seu tráfego arduamente conquistado em encomendas. Quando estiver pronto para construir, o nosso guia de introdução é o lugar por onde começar.