Introdução

Uma loja PrestaShop rápida não se define apenas por sua alta pontuação no Lighthouse. O desempenho se resume à rapidez com que o usuário consegue acessar o conteúdo importante, interagir com os produtos e os campos do formulário de finalização da compra, e navegar pela página sem interrupções.

É aí que entra a otimização das Web Vitals do PrestaShop Core.

As Core Web Vitals focam em três aspectos da experiência real da página: desempenho de carregamento, responsividade e estabilidade visual. De acordo com as recomendações do Google, o tempo de carregamento ideal deve ser inferior a 2.5 segundos, o tempo de interação deve ser inferior a 200 milissegundos e o tempo CLS deve ser inferior a 0.1.

No entanto, quando se trata de lojas PrestaShop, atingir esses padrões não é tão fácil, pois não envolve apenas compactar imagens e configurar o cache.

Existem diversos elementos, incluindo o tema utilizado, módulos, scripts, informações do produto e configuração do servidor, que afetam o desempenho do site e dificultam o atendimento aos padrões estabelecidos pelo Google.

O artigo descreve o processo de otimização das Core Web Vitals para o PrestaShop.

O que são os principais sinais vitais da Web?

As Core Web Vitals são métricas do Google criadas para medir a eficácia de um design do ponto de vista da experiência do usuário.

As três métricas atuais são

Largest Contentful Paint (LCP): mede o desempenho de carregamento. 
Meta ideal: ≤ 2.5 segundos.
Interação com a Próxima Pintura (INP): Mede a capacidade de resposta à interação. 
Meta ideal: < 200 milissegundos.
Deslocamento cumulativo de layout (CLS): mede a estabilidade visual. 
Meta ideal: < 0.1.

Essas métricas não devem ser tratadas como números isolados de SEO. Elas descrevem aspectos reais de como os usuários interagem com uma página. Bons indicadores Core Web Vitals não garantem as primeiras posições nos resultados de busca; a experiência da página é mais abrangente do que essas três métricas.

Para uma loja virtual, essa distinção é importante. Uma página inicial pode carregar rapidamente, enquanto as páginas de produtos permanecem lentas. Uma página de produto pode ser exibida rapidamente, mas deixar de responder quando os clientes alteram as combinações. Uma página também pode parecer rápida, mas sofrer uma mudança drástica quando um banner promocional ou um widget de avaliações é carregado.

Por que as lojas PrestaShop costumam apresentar problemas de desempenho?

O PrestaShop em si raramente é o único motivo para uma loja ficar lenta. O gargalo real costuma ser a combinação da plataforma, tema, módulos, servidor, banco de dados, recursos e serviços de terceiros.

Os motivos típicos para o baixo desempenho de um site são:

• Banners e imagens de produtos em tamanho grande
• Uso excessivo de JavaScript
• Os módulos carregam os recursos em todo o site.
• Ter muitos scripts de análise de marketing
• Funções de tema complexas
• O CSS causa bloqueio na renderização.
• O cache está mal configurado.
• Processamento PHP lento
• Solicitações dispendiosas ao banco de dados
• Requisições externas para APIs
• Hospedagem de má qualidade
• Muitos elementos DOM
• O carregamento lento está sendo feito de forma inadequada.
• O conteúdo é adicionado dinamicamente com otimização de desempenho. 

Para que funcione, a otimização de desempenho precisa ser realizada medindo e identificando os problemas, fazendo as alterações necessárias e testando e medindo novamente antes de prosseguir para a próxima etapa.

Como melhorar as principais métricas da web no PrestaShop

O primeiro passo para melhorar os Core Web Vitals no PrestaShop é testar páginas representativas.

Isso definitivamente deve incluir:

• Página inicial
• Página de categoria
• Página do produto
• Página de pesquisa
• Carrinho
• Finalizar Compra
• Páginas de destino essenciais

O desempenho das páginas de produtos pode ser diferente do da página inicial. Por exemplo, o banner principal pode ser o elemento LCP na página inicial, enquanto seu lugar na página do produto pode ser ocupado pela imagem principal do produto, enquanto uma página de categoria com filtros pode estar sobrecarregada com JavaScript e uso do DOM.

Para acompanhar o processo com precisão, utilize as seguintes ferramentas: Google PageSpeed ​​Insights, Lighthouse, Chrome DevTools, Google Search Console e ferramentas de monitoramento de usuários.

Não se esqueça de que confiar apenas em uma sessão do Lighthouse não é suficiente. Os resultados dos testes podem variar devido a fatores como dispositivo, rede, cache, etc.

Como melhorar o LCP no PrestaShop

 

O Largest Contentful Paint (LCP) é uma medida do momento em que o principal elemento de conteúdo relevante aparece na tela.

No PrestaShop, o elemento LCP geralmente é a imagem mais importante do produto, a imagem principal da página inicial, o banner da categoria ou o bloco de conteúdo/título grande. É crucial não presumir qual é exatamente o elemento LCP; você precisa descobri-lo usando ferramentas de teste de desempenho.

Encontre o elemento LCP real

Se uma página de produto gerar uma pontuação LCP de 4.2 segundos, a pergunta que pode surgir imediatamente é: "Qual a melhor maneira de otimizar a imagem?". No entanto, é preciso primeiro verificar se o componente LCP se refere à imagem do produto. Além disso, também é importante considerar o seguinte: 

1. O momento da chegada do HTML.
2. O momento em que o navegador identifica a imagem.
3. Se os blocos CSS estão sendo renderizados ou não.
4. O tamanho da imagem.
5. A velocidade com que a imagem é baixada.
6. O efeito do JavaScript no processo de renderização.
7. A velocidade de resposta do servidor.

Isso seria muito mais vantajoso do que simplesmente usar uma técnica de compressão comum.

Otimizar a imagem LCP

Nos casos em que o elemento LCP for a imagem principal do produto, certifique-se de que o navegador não baixe um arquivo excessivamente grande do que o necessário.

Para alcançar esse objetivo:

• As imagens devem ter tamanho adequado.
• Utilize métodos responsivos de exibição de imagens.
• As imagens devem ser compactadas de forma eficiente.
• Use WebP ou AVIF, se possível.
• Escolha a qualidade de imagem adequada.
• Gere miniaturas corretamente.

Exibir imagens de produtos com dimensões de 700 × 700 pixels, com a resolução necessária, garantirá que não haja downloads desnecessários de imagens muito grandes.

Idealmente, o carregamento lento de imagens pode ser feito para imagens que aparecem abaixo da dobra na página do produto.

Seja seletivo com a pré-carga.

O pré-carregamento de uma imagem essencial pode auxiliar o navegador a encontrá-la antecipadamente. No entanto, a aplicação de instruções de pré-carregamento para várias imagens, fontes, arquivos CSS e scripts pode levar ao resultado contrário, pois competem pela largura de banda.

Pré-carregue apenas os recursos que são realmente de grande importância para a renderização inicial; da mesma forma, `fetchpriority="high"` deve ser usado seletivamente, e não indiscriminadamente.

Reduzir o tempo de resposta do servidor

Para exibir conteúdo útil, um navegador precisa primeiro obter a resposta correspondente.

Existem diversos motivos que podem causar atrasos no tempo de resposta, incluindo:

 – Problemas com o tempo de execução do PHP

 – Consultas dispendiosas ao banco de dados

 – Falta de capacidade do servidor

 – Cache ineficaz

 – Eficiência do processamento de módulos

 – Utilização de APIs externas

 – Grande quantidade de trabalho de backend realizado para gerar uma página.

Portanto, a necessidade de diminuir o tempo de resposta está correlacionada com a otimização do LCP.

Como reduzir o CLS no PrestaShop

O Cumulative Layout Shift (CLS) mede o movimento inesperado do conteúdo durante o carregamento da página.

Um exemplo típico é um banner promocional que carrega depois que as informações do produto já apareceram e é inserido acima delas. Tudo o que está abaixo se move para baixo, o que pode criar uma experiência ruim.

As causas comuns de problemas no PrestaShop são as seguintes:

• Imagens sem dimensões pré-definidas.
• Galerias de produtos.
• Controles deslizantes.
• Bandeiras.
• Banner de cookies.
• Boletins informativos.
• Comentários.
• Recomendações carregadas dinamicamente.
• Fontes da Web.
• Conteúdo AJAX.
• Widgets de terceiros.

Reserve espaço para imagens.

As imagens devem ter dimensões conhecidas ou estar contidas em um contêiner com proporção adequada. Por exemplo:

A forma específica de implementação varia de acordo com o tema do PrestaShop e o sistema de imagens responsivas, mas o princípio básico permanece o mesmo: o navegador precisa saber quanto espaço a imagem necessita antes que o carregamento seja concluído. 

Estabilizar módulos dinâmicos

Se o módulo insere conteúdo dinamicamente, pense se um espaço reservado poderia ser criado antes da chegada do conteúdo.

Em vez de permitir que um widget de avaliação empurre a descrição do produto para baixo de forma drástica, certifique-se de manter um espaço reservado para ele ou posicione o widget de forma que o processo de carregamento não interfira com o conteúdo importante.

O objetivo de eliminar o CLS não é impedir todas as mudanças visuais, mas sim evitar alterações imprevisíveis que afetam negativamente o trabalho do usuário.

Como melhorar a entrada de dados

A função INP é especialmente importante em páginas web de comércio eletrônico. Os usuários precisam escolher opções de produtos, modificar quantidades, visualizar imagens, aplicar filtros, pesquisar produtos, adicionar itens ao carrinho, abrir menus suspensos, usar cupons e alterar opções de entrega.

Quando o JavaScript monopoliza o navegador do usuário, essas operações podem ser lentas.

Por que a entrada de dados INP pode ser difícil no PrestaShop

Uma loja típica do PrestaShop pode conter JavaScript proveniente de funcionalidades do tema, módulos de produtos, módulos de pesquisa, análises, gerenciadores de tags, sistemas de avaliação, aplicativos de chat, ferramentas de personalização, plataformas de consentimento e integrações de pagamento.

Cada script individual pode parecer inofensivo. No entanto, o custo total de execução combinado pode se tornar significativo.

Use as Ferramentas de Desenvolvedor do Chrome para investigar o desempenho e a cobertura, a fim de encontrar tarefas demoradas, código JavaScript não utilizado, ouvintes de eventos, execuções de scripts dispendiosas e reflows/repinturas devido a manipulações do DOM.

Reduza o JavaScript desnecessário

Ao minimizar o JavaScript, o tamanho do arquivo diminui; no entanto, isso não significa que não haverá processamento pesado em tempo de execução.

Um manipulador de cliques ainda pode causar lentidão no navegador, mesmo que os arquivos JS estejam minificados e tenham um tamanho muito pequeno.

Se possível, deve-se procurar eliminar o código desnecessário, introduzir funcionalidades apenas se essenciais, minimizar operações demoradas e reavaliar o código escrito por terceiros.

Carregar funcionalidade somente onde necessário

Uma forma prática de otimizar o PrestaShop seria evitar o carregamento de recursos de módulos em páginas onde essa funcionalidade não é necessária.

Por exemplo, um módulo que gerencia a galeria de produtos não deve precisar carregar todo o seu pacote JavaScript em páginas CMS onde esse recurso não é utilizado.

Como otimizar imagens para melhor desempenho

As imagens são necessárias para o comércio eletrônico, mas contribuem frequentemente para o aumento do tamanho da página.

Utilize dimensões apropriadas, formatos eficientes como WebP ou AVIF quando suportados, compressão adequada, exibição responsiva de imagens e carregamento lento para imagens abaixo da dobra.

O objetivo não é simplesmente ter imagens menores. O objetivo é ter a imagem certa, nas dimensões certas, entregue no momento certo.

Como corrigir recursos que bloqueiam a renderização

CSS e JavaScript podem atrasar a capacidade do navegador de renderizar a página. Uma loja PrestaShop pode acumular recursos de arquivos de tema, funcionalidades principais, módulos, desenvolvimento personalizado e integrações de terceiros.

Consulte a aba Rede nas Ferramentas de Desenvolvedor do Chrome para encontrar arquivos CSS e JavaScript grandes, bibliotecas redundantes, recursos de módulos carregados globalmente, scripts de terceiros, fontes e solicitações que estejam bloqueando o acesso.

Encontre os estilos necessários para a primeira janela de visualização e remova o CSS desnecessário, adie funcionalidades não essenciais e evite carregar globalmente o CSS de módulos não utilizados.

Não combine todas as folhas de estilo indiscriminadamente. Pode haver dependências entre o tema e os módulos do PrestaShop, o que pode ser perigoso para o gerenciamento agressivo de recursos.

Módulos do PrestaShop: O Custo Oculto de Desempenho

Os módulos podem adicionar processamento PHP, consultas a bancos de dados, CSS, JavaScript, chamadas AJAX, solicitações externas, HTML e código de rastreamento.

A questão prática não é se os módulos são ruins, mas sim se um módulo precisa ser executado em uma página específica.

Um módulo de avaliações pode precisar funcionar apenas nas páginas de produtos, enquanto um widget de frete pode ser relevante apenas na finalização da compra. Se um módulo carrega recursos globalmente, verifique se sua implementação pode ser ajustada com segurança.

Cache e desempenho do PrestaShop

No entanto, é importante lembrar que o cache pode ser usado para evitar tarefas redundantes no nível do servidor, mas essa ferramenta precisa ser compreendida e não apenas ativada indiscriminadamente.

Dependendo do ambiente do sistema, recomenda-se o uso de cache do PrestaShop, cache de aplicativo/página, cache de opcode, cache HTTP, cache de CDN e cache do navegador.

A natureza dinâmica das operações de comércio eletrônico torna a configuração de cache mais complexa em comparação com sites estáticos. Alguns dados, como informações pessoais do cliente, conteúdo do carrinho de compras, status de autenticação, informações de preços, níveis de estoque e personalização, podem ter requisitos especiais de cache.

Teste as páginas após armazená-las em cache.

Como reduzir o tempo de resposta do servidor

1. Crie uma linha de base: colete detalhes sobre LCP, INP, CLS, TTFB, peso, contagem de solicitações, execução de JavaScript e tempos de recursos importantes.
2. Teste modelos representativos: páginas de destino de produto, categoria, pesquisa, carrinho, preenchimento e CMS/outras páginas.
3. Identifique os pontos problemáticos: verifique se o problema está relacionado à resposta do servidor, ao envio de imagens, ao CSS, aos arquivos JavaScript ou a quaisquer serviços fornecidos por terceiros.
4. Realizar uma auditoria: localizar módulos utilizados que funcionam globalmente, impõem JavaScript/CSS, fazem requisições externas ou executam operações dispendiosas no backend.
5. Aprimorar o sistema gradualmente: sistemas de passagem de imagens, passagem de CSS, passagem de JavaScript, resposta do servidor, etc.
6. Verifique a funcionalidade: diversas possibilidades avançadas do produto, incluindo buscas, processos de carrinho de compras, pagamento e aspectos de uso em dispositivos móveis.
7. Faça as medições e compare-as com a linha de base inicial.

Como melhorar a velocidade de carregamento de páginas em dispositivos móveis

O desempenho em dispositivos móveis é um tópico à parte. Esses dispositivos podem apresentar processadores de baixo desempenho com uma conexão de rede celular instável, o que torna a execução de JavaScript e o download de imagens ainda mais cruciais.

Prestar atenção em:

• Imagens compactas e responsivas
• JavaScript mínimo
• Scripts de terceiros mínimos
• CSS eficiente
• Layout estável
• Tempo de resposta rápido do servidor
• DOM mínimo
• carregamento lento adequado
• Navegação leve

Não assuma que um bom desempenho em desktops seja equivalente a um bom desempenho em dispositivos móveis, teste!

Um fluxo de trabalho prático para otimização de Web Vitals do PrestaShop

1. Crie uma linha de base: colete detalhes sobre LCP, INP, CLS, TTFB, peso, contagem de solicitações, execução de JavaScript e tempos de recursos importantes.
2. Teste modelos representativos: páginas de destino de produto, categoria, pesquisa, carrinho, preenchimento e CMS/outras páginas.
3. Identifique os pontos problemáticos: verifique se o problema está relacionado à resposta do servidor, ao envio de imagens, ao CSS, aos arquivos JavaScript ou a quaisquer serviços fornecidos por terceiros.
4. Realizar uma auditoria: localizar módulos utilizados que funcionam globalmente, impõem JavaScript/CSS, fazem requisições externas ou executam operações dispendiosas no backend.
5. Aprimorar o sistema gradualmente: sistemas de passagem de imagens, passagem de CSS, passagem de JavaScript, resposta do servidor, etc.
6. Verifique a funcionalidade: diversas possibilidades avançadas do produto, incluindo buscas, processos de carrinho de compras, pagamento e aspectos de uso em dispositivos móveis.
7. Faça as medições e compare-as com a linha de base inicial.

Exemplo prático do PrestaShop: Página de produto lenta (LCP)

Suponha que uma página de produto tenha um LCP (tempo de carregamento do ciclo) de 4.5 segundos. Há uma imagem grande do produto na página.

Pode-se concluir que a imagem está muito grande. No entanto, após investigação, percebe-se que a resposta do servidor demora 1.5 segundos, o CSS impede a renderização, a imagem do produto está sendo usada em um tamanho muito grande para a página, a inicialização da galeria é atrasada por um módulo JavaScript desnecessário e a imagem é tratada como uma imagem de carregamento lento (lazy loading).

É importante ressaltar que a simples verificação de problemas de otimização não deve ser considerada uma prática eficaz para melhorar a velocidade da página.

Exemplo do mundo real: Entrada de dados deficiente proveniente de múltiplos módulos

Imagine uma página de produto com funcionalidades como lógica de variantes de produto, ferramenta de avaliação, chat, análises, gerenciamento de tags e mecanismo de sugestões.

Quando um cliente clica em um tamanho, o navegador pode executar o manipulador de variantes, atualizar os detalhes do produto, recalcular parte do DOM, iniciar análises, executar outro manipulador de eventos e atualizar a interface do usuário.

No entanto, a melhor opção nem sempre é remover todos os módulos do processo. É preciso analisar a interação e determinar qual manipulador de eventos específico é custoso e qual script executa operações demoradas, além de investigar se há código de terceiros incluído, se algum trabalho desnecessário está sendo feito no DOM e se é possível simplificar ou adiar certas funcionalidades.

Exemplo prático: CLS de um banner promocional

Suponhamos que um varejista coloque um banner publicitário após o carregamento da página do produto. Como resultado, o banner ocupa um espaço acima do nome do produto, afetando assim o título, a imagem do produto, o preço e a posição do botão "Adicionar ao carrinho". 

Uma ideia melhor seria pré-alocar o espaço para o banner ou posicioná-lo de forma que não interfira com o conteúdo principal da página. 

Portanto, a resposta reside na compreensão dos fatores responsáveis ​​pela movimentação dos objetos, os motivos dessa movimentação e o momento em que eles chegam ao destino.

Erros comuns na otimização de indicadores vitais da web (Web Vitals)

1. Buscamos uma pontuação ideal no PageSpeed ​​Insights. O objetivo da empresa é criar uma experiência melhor para o usuário, e não apenas atingir uma determinada meta de pontuação.
2. Utilizar vários módulos de otimização. O uso excessivo de múltiplas soluções de otimização e atraso pode levar a complicações indesejadas.
3. Utilizando carregamento lento para tudo. Mas isso pode causar atrasos no carregamento de informações importantes.
4. Pré-carregar tudo. Caso muitas coisas sejam consideradas importantes, haverá competição pela largura de banda limitada.
5. As otimizações não funcionam em conjunto com a página inicial. As otimizações aplicadas às páginas de destino não podem ser usadas com modelos de categorias e produtos.
6. Omitir JavaScript de terceiros. O uso eficaz de análises e marketing pode levar a custos de execução muito elevados.

Medindo o resultado

A otimização de desempenho deve ser vista como um esforço contínuo. Após a instalação de um novo módulo, a atualização para um novo tema, a implementação de uma ferramenta de marketing ou o upload de imagens em alta resolução, uma loja online pode apresentar queda de desempenho.

Assim, quaisquer alterações significativas relacionadas ao tema, módulos, layout ou infraestrutura devem ser consideradas como possíveis causas de deterioração do desempenho.

Os indicadores vitais da web devem ser um processo contínuo.

A otimização de desempenho não é uma tarefa pontual. Uma loja pode ficar mais lenta após a instalação de um novo módulo, atualização de um tema, adição de uma ferramenta de marketing, upload de imagens maiores, adição de scripts de rastreamento, mudança de hospedagem, modificação de modelos de produtos ou implementação de novas funcionalidades.

Portanto, qualquer alteração importante em temas, módulos, infraestrutura ou interfaces deve ser tratada como uma potencial alteração de desempenho.

Recomendações finais

A otimização das Web Vitals do PrestaShop Core não se resume à combinação máxima de técnicas. No que diz respeito ao LCP (Local Control Protocol), é necessário investigar o servidor, os recursos críticos, as imagens, o CSS e a descoberta de recursos.

No que diz respeito ao CLS, o objetivo é identificar os elementos em movimento e economizar o espaço que eles exigem.

Considerando o INP, será necessário realizar um perfilamento das interações reais e configurar o JavaScript e os eventos necessários para funcionar na thread principal.

A otimização geral do desempenho de um site envolve a auditoria de módulos, scripts de terceiros, cache, imagens, operação do banco de dados e recursos do servidor.

O processo de desempenho mais eficaz do PrestaShop é

Medir → Diagnosticar → Otimizar → Testar → Medir novamente.

Essa abordagem produz melhorias sustentáveis ​​sem sacrificar a funcionalidade que torna uma loja de comércio eletrônico útil.

Perguntas frequentes

Qual é o melhor LCP para um site PrestaShop?

Conforme as recomendações do Google, uma pontuação LCP de 2.5 segundos ou menos é ideal.

Como posso melhorar o LCP (Load-to-Core Pages - Páginas de Produtos com Melhoria de Carreira) do PrestaShop?

Para começar, descubra qual é o elemento LCP. Caso seja a imagem principal do produto, tente otimizá-la em termos de tamanho e carregamento, garantindo que seja encontrada rapidamente e não carregada de forma lenta.

Como posso reduzir o CLS no PrestaShop?
Identifique quais elementos se deslocam. Causas comuns incluem imagens sem dimensões reservadas, banners dinâmicos, pop-ups, sliders e widgets de terceiros. Reserve o espaço apropriado antes que o conteúdo dinâmico seja carregado.

Como melhorar o INP?

O desempenho real do usuário deve ser examinado e as tarefas JavaScript custosas devem ser detectadas. O próximo passo é eliminar o uso desnecessário de JavaScript, minimizar a manipulação do DOM e verificar as ferramentas e módulos de terceiros implementados.

Habilitar o cache resolverá automaticamente os problemas com as Core Web Vitals?

Não, o cache reduz o processamento necessário no servidor e melhora a capacidade de resposta, mas não resolve problemas relacionados a imagens grandes, CSS que bloqueia a renderização, JavaScript excessivo, CLS e lentidão.

A melhoria do desempenho do site exige a desinstalação de todos os módulos do PrestaShop?

Não, porque os módulos são cruciais para atender às necessidades do negócio. O objetivo é encontrar processos desnecessários, não desinstalar o software sem pensar.

É obrigatório obter uma pontuação de 100 no PageSpeed?

Não, porque esse não é o objetivo. O único importante é proporcionar a melhor experiência possível ao usuário.

O que devo otimizar primeiro?

Primeira medida. Identifique os modelos de página com pior desempenho e descubra qual é o principal gargalo: LCP, INP, CLS, TTFB, imagens, JavaScript, CSS, módulos ou problemas no servidor.