Os indicadores de desempenho web tornaram-se passagem obrigatória das auditorias e produzem muitas vezes listas intermináveis de recomendações cuja metade não tem efeito mensurável. Numa loja PrestaShop, cinco frentes concentram o essencial do ganho disponível.
Medir onde é preciso
Ponto prévio, e muda tudo.
As ferramentas de auditoria executam um teste único em condições simuladas. São úteis para diagnosticar, mas não medem o que os seus visitantes vivem.
Os dados de campo, recolhidos em visitas reais, são os que contam. Estão acessíveis no relatório dedicado da Search Console e divergem muitas vezes bastante dos resultados de laboratório.
Três razões para esse desvio: os seus visitantes têm equipamentos e ligações variados, chegam a páginas diferentes daquela que testa, e uma parte deles navega a partir de um cache já quente.
O método: diagnostique em laboratório, decida no campo. Um problema visível em teste mas ausente dos dados reais não é prioritário.
Frente 1: a imagem principal da ficha de produto
É quase sempre o elemento que determina o seu indicador de carregamento principal, e é a frente mais rentável.
Quatro ações, por ordem de efeito.
Não a carregar em diferido. A imagem visível logo à chegada tem de ser carregada de imediato. Um carregamento diferido aplicado a todas as imagens sem distinção atrasa precisamente aquela que conta.
Pré-carregá-la, assinalando ao navegador que é prioritária. Isso faz com que arranque antes mesmo da análise completa da página.
Servir a dimensão certa. Uma imagem de 2000 píxeis apresentada a 600 desperdiça várias centenas de kilobytes. Os formatos adaptativos resolvem o caso.
Usar um formato moderno, que reduz o peso em 30 a 50 % com qualidade percebida equivalente.
Estas quatro ações tratam-se num dia e produzem normalmente o ganho mais visível de toda a frente de desempenho.
Frente 2: a estabilidade visual
A segunda frente por rentabilidade, porque as causas são poucas e fáceis de identificar.
Cinco fontes de deslocamento numa loja.
As imagens sem dimensões declaradas. O navegador não reserva o espaço e o conteúdo salta quando a imagem chega. Declarar largura e altura é suficiente.
As barras inseridas depois do carregamento: cookies, promoção, anúncio. Reserve o espaço delas ou apresente-as em sobreposição.
As fontes personalizadas. O texto aparece primeiro numa fonte de substituição e depois muda, o que desloca a maquetização. Um pré-carregamento e uma regra de apresentação adequada limitam o efeito.
Os blocos de módulos carregados de forma assíncrona: avaliações, produtos semelhantes, chat. Cada um empurra o conteúdo que lhe fica abaixo.
A publicidade e as integrações de terceiros, cuja altura varia.
Método de diagnóstico: abra uma ficha de produto com as ferramentas de programador, ative o indicador de deslocamento de maquetização e recarregue. As zonas que mexem aparecem de imediato.
Cache de Página e Otimização da Velocidade PrestaShop 8 e 9Cache de página, Critical CSS e otimização avançada para PrestaShop 8 e 9.149,00€
Frente 3: a reatividade às interações
É o indicador mais recente e o pior tratado nas lojas, porque as suas causas são menos evidentes.
Mede o intervalo entre uma ação do visitante e a resposta visível. Numa loja, três interações concentram os problemas.
Os filtros por facetas, quando o tratamento da seleção bloqueia a linha de execução antes mesmo do pedido de rede.
A adição ao carrinho, quando desencadeia vários processamentos síncronos antes do retorno visual.
A abertura do menu no telemóvel, se o menu for construído no momento do clique em vez de no carregamento.
Três correções, aplicáveis sem refazer o site.
Dar um retorno visual imediato, antes do processamento. Um botão que muda de estado logo no clique melhora o indicador mesmo que o processamento demore o mesmo tempo.
Dividir os processamentos longos para devolver o controlo ao navegador entre duas etapas.
Reduzir o código executado no clique, em particular os scripts de terceiros que se agarram aos mesmos eventos.
Frente 4: o tempo de resposta do servidor
Condiciona todos os outros indicadores: nada pode aparecer antes de o servidor responder.
Três alavancas, por ordem de efeito no PrestaShop.
O cache de página completo. Transforma uma geração dinâmica no serviço de um ficheiro pronto. É o maior ganho nas páginas de categoria e de produto.
O cache aplicacional, sobre os dados de catálogo, que evita recalcular o que não mudou.
A otimização das consultas mais lentas, identificadas no registo da base de dados.
Duas precauções sobre o cache de página. Tem de ser invalidado corretamente nas alterações de preço e de stock, sob pena de mostrar informação falsa. E tem de excluir as páginas personalizadas: carrinho, conta, processo de compra.
Ponto muitas vezes esquecido: o cache só serve os visitantes que chegam depois do primeiro. Num catálogo de dez mil páginas com tráfego moderado, uma parte importante das visitas continua sem cache. A geração antecipada de cache, nas páginas mais visitadas, trata este ponto.
Frente 5: os scripts de terceiros
A frente mais ingrata e muitas vezes a mais rentável.
Uma loja média carrega entre oito e vinte scripts externos: medição de audiência, publicidade, chat, avaliações, cookies, mapas. Cada um foi acrescentado por uma boa razão e nenhum foi retirado.
Três ações.
Inventariar. Liste os scripts carregados numa ficha de produto, com o peso e o tempo de execução. As ferramentas de programador dão-lhe isso em poucos minutos.
Eliminar o que já não serve. Vai encontrar quase sempre uma ferramenta de análise abandonada ou um pixel de uma campanha terminada.
Diferir o que fica. Um chat, uma ferramenta de avaliações ou uma medição secundária não precisam de carregar antes da apresentação do conteúdo.
Acrescente um ponto de governação: condicione os scripts publicitários ao consentimento, o que é obrigatório de qualquer forma ao abrigo da Lei n.º 41/2004 e do RGPD, e tem o efeito secundário de aliviar a página para quem recusa.
O que não serve para nada
Quatro recomendações frequentes cujo efeito é nulo ou marginal numa loja.
Minificar o HTML. O ganho conta-se em kilobytes, invisível face ao peso das imagens.
Reduzir o número de pedidos a todo o custo. Esta recomendação vem dos protocolos antigos. Nos protocolos atuais, a multiplexagem torna o número de pedidos bastante menos determinante.
Eliminar todas as fontes personalizadas. Uma fonte bem carregada custa pouco e serve a sua identidade. O problema é o modo de carregamento, não a fonte.
Procurar cem em cem numa ferramenta de auditoria. A pontuação não é o objetivo; os limiares de campo é que são.
A ordem e o ritmo
Uma sequência em três meses.
Semana 1: levantamento dos dados de campo, por tipo de página, para saber onde está realmente.
Semanas 2 e 3: frentes 1 e 2, imagem principal e estabilidade visual. São as mais rápidas e as mais visíveis.
Semanas 4 a 6: frente 4, cache de servidor, que exige testes e uma invalidação cuidada.
Semanas 7 e 8: frente 5, inventário e limpeza dos scripts de terceiros.
Depois: frente 3, reatividade, que é a mais técnica e cujo efeito se mede ao longo do tempo.
Um ponto de método: os dados de campo assentam numa janela deslizante de várias semanas. Não tire conclusões antes de um mês após uma alteração.
O módulo Cache de Página e Otimização da Velocidade para PrestaShop cobre a quarta frente no PrestaShop 8 e 9: cache de página completo com invalidação nas alterações de preço e de stock, exclusão automática das páginas personalizadas, geração antecipada nas páginas mais visitadas e carregamento diferido dos scripts não críticos.
