Como eu atingi uma pontuação móvel 100 do Google PageSpeed ​​no WooCommerce com o WP Rocket

Você pretende obter um perfeito 100 no PagePeed Insights para celular do Google com sua loja WooCommerce?

Neste artigo, mostrarei exatamente como o conseguimos com Femme-Fatale.Gr, uma foto de beleza que originalmente correu em Magento. Naquela época, as cargas de páginas móveis levaram entre 5 e 15 segundos, e o site estava sangrando vendas, apesar de um catálogo de 35.000 produtos com 500 categorias de produtos e 450 atributos do produto.

Sou Dimitris Vayenas, fundador da Oxford Metadata. Nas últimas três décadas, fiquei obcecado por cada milissegundo de desempenho na web. No início de 2022, meu amigo Nikos Orfanos me pediu para ajudar com sua loja on -line, e começamos a trabalhar.

Depois de migrar para o WooCommerce e focar inteiramente na velocidade - usando o foguete WP como nossa arma secreta -, esmagamos as pontuações móveis de página de páginas com uma pontuação consistente entre 99 e 100/100. Mais importante, o site passou da máquina estagnada para a receita.

Continue lendo e você aprenderá como conseguimos obter esses resultados e como o WP Rocket nos ajudou a alcançar uma pontuação de mais de 95 anos, além do ajuste final que nos levou a 100. Mais importante, você descobrirá o impacto dos negócios que se seguiu quando o site começar a carregar em apenas 300 milissegundos.

Por que se concentrar no desempenho, especialmente no celular

Na FEMME -FATALE.GR, mais de 90% das compras acontecem no Mobile. Isso tornou o desempenho móvel nossa principal prioridade desde o primeiro dia.

Os dispositivos móveis são o melhor teste de estresse para qualquer site. A CPU limitada, a memória e as conexões instáveis ​​podem fazer com que até as páginas mais magras carreguem até 10 vezes mais lentamente do que na área de trabalho. É por isso que toda otimização é importante.

Velocidade significa eficiência. Código mais limpo, ativos menores e um DOM mais magro se traduzem em uma experiência mais suave para todos os visitantes, especialmente no celular.

Como eu gosto de dizer: "Se sua experiência móvel não é instantânea, você está perdendo dinheiro real com cada milissegundo extra".

O ponto de virada: migrando de magento para wooCommerce

Em dezembro de 2021, Nikos estendeu a mão com um claro desafio. "Minha loja atingiu o pico durante o bloqueio em 0,81 € por sessão. Então as vendas voltaram a 0,15 € por sessão. Podemos voltar ao máximo de bloqueio?"

Sabíamos que o primeiro passo era mudar de plataformas.

Primeiro, escolhemos o WooCommerce por sua pilha moderna e ágil. Ofereceu um ecossistema de plugins e criadores de temas que cobrem todas as funcionalidades que se possa imaginar, juntamente com a maior comunidade de engenheiros da Web com espírito de performance.

Fomos ao vivo em março de 2022 sem alterar os dados do produto ou aumentar os gastos de marketing. A única diferença foi a velocidade. Cortamos as cargas de 5 a 10 segundos para apenas 1 a 2 segundos.

Esta é a captura de tela GTMetrix, mostrando os resultados do tempo de carregamento antes da migração do Magento: 5,8 segundos para a página inicial e 7,9 segundos para a categoria, capturados enquanto ainda estávamos desenvolvendo o novo site.

Por outro lado, esse é o desempenho atual, com todos os principais vitais da Web em verde:

Qual é o verdadeiro valor da velocidade para um woocommerce?

O impacto dos negócios no desempenho era impossível de ignorar, e os números o tornaram claro.

Antes da migração, Femme -Fatale.Gr estava preso em uma rotina de desempenho. No Magento, o rotatividade mensal variou de € 7.000 a € 10.000, com cerca de 40.000 sessões, com média de apenas 0,15 a 0,20 € por sessão. Mesmo durante o pico de bloqueio em 2020, quando o tráfego aumentou para 62.500 sessões, o melhor desempenho chegou a 0,81 € por sessão.

Em fevereiro de 2022, pouco antes de migrarmos para o WooCommerce, o site havia melhorado ligeiramente para 0,29 € por sessão, mas ainda estava longe de ser seu potencial.

O impacto do desempenho mais rápido foi imediato. Em março de 2022, o primeiro mês inteiro após a migração, a receita por sessão dobrou para € 0,58, apesar de uma queda temporária em sessões enquanto os bots aqueciam os caches.

Os ganhos não pararam por aí. Em dezembro de 2023, combinamos o pico de bloqueio de 0,81 por € por sessão. Hoje, esse número subiu ainda mais: o site agora ganha 1,11 € por sessão com 40.000 visitas mensais.

Nikos, o proprietário do Femme -Fatale.gr, coloque o melhor:

Ao combinar e agora exceder o nosso Covid Peak, provamos que a velocidade é a maior alavanca de nossos negócios.

A Fundação de Performance todo site de WooCommerce precisa

Antes de o WP Rocket poder oferecer todo o seu potencial de desempenho, uma base sólida precisa estar em vigor. Essas decisões iniciais tiveram um grande impacto em nossos resultados, e também é isso que eu recomendo para qualquer pessoa que administra uma loja WooCommerce:

1. Escolha um tema da primeira vez: testamos dezenas de temas antes de resolver as melhores opções. Botiga (baseada em Gutenberg) por Athemes e Ray Theme (baseada em Elementor) marcou mais de 90 em demos de fornecedores. Algo abaixo de 70? Evitamos isso.

2. Escolha um host verdadeiramente rápido: usamos Cloudways , apoiados por Linode, Vultr e Digitalocean em regiões européias importantes como Londres, Frankfurt, Amsterdã, Milão e Estocolmo. Ele nos fornece atualizações de PHP e banco de dados com um clique, verniz e redis embutidos, além de detecção de dispositivos móveis perfeita. Isso garante que as chamadas de API não atingem o conteúdo otimizado. Tivemos zero tempo de inatividade em três anos e sua equipe de apoio é excelente.
   
   No comércio eletrônico, a proximidade de seus clientes não é negligente: todas as consultas de produtos, atualização do carrinho e verificação de inventário tocam sua origem. Com os compradores em Atenas ou as Ilhas Gregas e as nuvens que não têm um nó local, temos que implantar o Fastpath . Ele espia diretamente com todas as principais operadoras de celular gregas e Cloudflare, fornecendo sub -50 ms TTFBs e uma experiência verdadeiramente local.

3. Faça parceria com fornecedores de apoio: escolhemos fornecedores que oferecem suporte confiável e rápido para responder a perguntas e solucionar problemas ao seu lado, de Athemes e Fibosearch a Welaunch , Pixel Your Site , Gravity Forms , AioSeo e WP Rocket .

4. Otimize seu conteúdo: convertemos todas as imagens em WebP e as organizamos em pastas baseadas em data, garantindo que cada pasta contenha menos de 10.000 arquivos. Para fontes, nós auto-hospedamos arquivos WOFF2 e os subconjugamos para incluir apenas os personagens que nosso público precisava. Isso reduziu os tamanhos de arquivo de fonte em 70 a 80 %. Servê -los localmente e pré -carregar cedo ajudou a eliminar pesquisas externas e evitou turnos de layout.

5. Use carregamento de plug -in cirúrgico e mantenha a higiene do banco de dados: usamos o organizador do plug -in e os filtros manuais para carregar apenas os plugins necessários por página. Também limpamos os transientes semanalmente e desabilitamos automaticamente as entradas grandes WP_Options.

O foguete WP que nos levou para 99/100 no PageSpeed

Uma vez que a fundação estava em vigor, o WP Rocket nos ajudou a aumentar a velocidade e a obter resultados excelentes de desempenho rapidamente. Esses recursos tiveram um papel fundamental em levar -nos a uma pontuação de mais de 95 no Google PagesPeed no Mobile:

• O cache móvel e a pré -carga do sitemap: o WP Rocket detecta automaticamente dispositivos móveis e cria um cache dedicado para eles. Isso significa que os usuários de smartphones sempre recebem um instantâneo HTML pré -carregado. O pré-carregador baseado em sitemap também rasteja suas páginas logo após qualquer purga de cache, que remove o atraso que geralmente acontece nas primeiras visitas.
  
• Minificação CSS e JS : WP Rocket tira o espaço em branco e os comentários para encolher os tamanhos dos arquivos. Ele também pode combinar arquivos JavaScript em um, reduzindo o número de solicitações HTTP. Isso é especialmente importante para usuários móveis em redes mais lentas.  
  
• Remova CSS não utilizado (RUCSS): Diferentemente da simples minificação, o RUCSS analisa o HTML das suas páginas e retira todas as regra CSS nunca usadas no front -end. As folhas de estilos de declarações geralmente corta dezenas de Kilobyte, para que o navegador se torne mais rápido com menos bytes. Vimos em primeira mão que permitindo que os RUCSS apenas rasparam 200 kb da nossa carga útil da página inicial, resultando em páginas de carregamento mais rápidas.
  
• Atraso na execução do JavaScript : scripts como análise, ferramentas de bate-papo ou widgets de terceiros geralmente não precisam ser executados imediatamente. WP Rocket os atrasa até que o usuário role, torne ou clique. Isso torna as páginas interativas mais rápidas e melhora a interação com a resposta geral da próxima tinta e da página às interações do usuário.

Depois de ativar esses recursos, obtivemos uma pontuação de desempenho de 99 PagesPeed:

Bônus: complementos de foguetes WP para casos especiais

Às vezes, as configurações fora da caixa precisam de um pouco de impulso. Para configurações selecionadas como a nossa - com agendadores complexos, regras de fontes personalizadas ou detecção incomum de dispositivos - instalamos cinco complementos de foguetes WP gratuitos após consultar engenheiros seniores do WP Rocket:

• Altere os parâmetros RUCSS: Ajustamos com que frequência e quão profundamente o foguete WP Remova o CSS não utilizado. Isso foi essencial para a compatibilidade com plugins como o AutomateWoo, que pode sobrecarregar o agendador de tarefas.
• Desativar fragmentos de carrinho de wooCommerce: Como nosso banco de dados já foi otimizado, desativamos o cache de fragmentação de carrinho do WP Rocket para acelerar ainda mais as chamadas de check-out.
• Desative a pré-carga de fontes CSS usada: usamos fontes Woff2 personalizadas com regras de pré-carga manual. Esse complemento garantiu que essas regras não foram substituídas pela pré-carga automática da fonte do WP Rocket.
• Remova as regras do HTML expira: Nossa CDN e o servidor já lidaram com os cabeçalhos de cache, então removemos as regras HTML padrão do WP Rocket, expiram as regras para evitar conflitos.
• Defina os tablets como móveis: tratamos tablets como dispositivos móveis para garantir que eles se beneficiassem de cache móvel e otimizações responsivas. Isso foi importante para a funcionalidade personalizada, dependendo da verificação wp_is_mobile ().

Além do plug-in tablet, a maioria desses complementos é necessária apenas em lojas de alta complexidade. Para configurações típicas de comércio eletrônico, o WP Rocket funciona muito bem imediatamente.

O segredo 100/100: aperfeiçoando o LazyLoading e essa imagem LCP

Atingir 99 no PagePeed Insights do Google foi um grande marco, mas não ficamos satisfeitos. Um ponto estava entre nós e a perfeição.

Primeiro, abordamos o elemento Bloat, o que significa reduzir o número de elementos HTML na página. O Google penaliza as páginas com mais de 810 elementos DOM, e nossos menus, controles deslizantes e rodapé nos empurraram bem depois de 1.000.

Aqui está o que fizemos:

• Conteúdo estático com carregamento preguiçoso : diferimos elementos não críticos, como menus de cabeçalho, controles deslizantes de categoria de produto, carrosséis de marca e rodapé até depois da tinta inicial.

• Removido elementos desnecessários : podamos os níveis de menu profunda e desabilitaram áreas de widgets inativos no celular. Isso nos ajudou a obter o DOM total abaixo do limite de penalidade do Google.

Mesmo com uma página mais limpa, ainda não conseguimos quebrar 100. A edição final era a imagem do herói.

Originalmente, era uma imagem de 350 × 622 px com sobreposições, sombras e texto - complexo demais para carregar rapidamente. Simplificamos a um WebP 350 × 350 PX e o pré -carregamos com alta prioridade usando o seguinte código:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

E é assim que, simplificando e pré -carregando a imagem do herói, alcançamos uma pontuação perfeita de 100/100 psi da Mobile.

O impacto dos negócios: velocidade como mecanismo de crescimento

Como expliquei, a velocidade não apenas melhorou nossa pontuação no PagesPeed. Ele aumentou diretamente o nosso resultado final.

Depois de otimizar o desempenho e alavancar os recursos do WP Rocket, vimos ganhos mensuráveis ​​nos resultados:

• As taxas de conversão aumentaram 33%.

• A receita por sessão aumentou mais de cinco vezes , de € 0,20 para 1,11 €.

Esses resultados traduzidos em 384.000 € adicionais em receita durante os primeiros 18 meses após a migração .

Essas não foram pequenas melhorias. Eles corresponderam e, eventualmente, ultrapassaram nosso desempenho de pico de bloqueio, provando que a velocidade do site era a principal alavanca para o crescimento .

Como eu gosto de dizer: "Cada milissegundo raspou acrescentou euros reais aos resultados".

3 dicas práticas para empresários

Se você estiver executando uma loja de comércio eletrônico, gostaria de compartilhar algumas dicas práticas adicionais podem ajudá -lo a tirar o máximo proveito de seus esforços de desempenho - seja você técnico ou não.

1. Rastrear usuários reais: use o Monitoramento Real do Usuário (Rum) para ficar de olho nos dados de campo. As pontuações do laboratório são úteis, mas o que realmente conta é o desempenho do seu site para os visitantes reais. Apenas certifique -se de desativá -lo ao executar testes de insights do PagePeed para evitar resultados distorcidos.
2. Geolocate sua origem: hospede seu site próximo aos seus clientes. Quando o seu servidor de origem está próximo do seu público, tudo, desde pesquisas de produtos até check -out, se torna mais rápido e mais confiável.
3. Inclinar -se no foguete WP: comece com as configurações padrão. Eles lidam automaticamente com a maioria dos problemas de desempenho imediatamente. Depois que sua linha de base for sólida, você pode ajustar os recursos adicionais, por exemplo, para otimizar os arquivos CSS e JS. E se você não tem conhecimento técnico, lembre-se: "Sites mais rápidos significam menos frustração, mais vendas e clientes mais felizes".

Embrulhando

Mudamos de Magento para WooCommerce, aumentamos nossa pontuação móvel de página de páginas de 55 para 100 e aumentou a receita por sessão de 0,20 € para 1,11 €. Essa jornada provou uma coisa claramente: a velocidade é mais do que um marco técnico. É um verdadeiro impulsionador do crescimento dos negócios.

Focamos no desempenho, construímos uma base técnica forte e usamos o WP Rocket para desbloquear os resultados rapidamente. Se a sua loja WooCommerce parecer lenta ou com baixo desempenho, agora é a hora de agir. Um site mais rápido significa uma experiência mais suave para seus visitantes e ganhos reais para o seu negócio.