Desenvolvimento Como melhorar o carregamento da sua loja e a sua nota no Pagespeed

Como melhorar o carregamento da sua loja e a sua nota no Pagespeed

Por Rafael em 11 de maio de 2021

Neste artigo, mostraremos alguns dos pontos mais importantes para melhorar a nota da sua loja virtual no Pagespeed e a qualidade de carregamento.

O Pagespeed é um serviço gratuito disponibilizado pelo Google, que ajuda milhares de pessoas a identificar possíveis gargalos em seu site ou loja.

Ele traz várias métricas que instruem onde e como se deve investir esforços para melhorar o carregamento das páginas.

Além disso, ele é, desde 2010, um dos fatores que influenciam no ranking da sua página nas buscas orgânicas dos buscadores mais conhecidos atualmente.

Mas você sabe realmente quais pontos podem impactar negativamente na nota demonstrada pelo serviço?

Neste artigo, mostraremos alguns desses pontos, divididos em três etapas, mas com uma nova abordagem: aprender como deixar o carregamento da sua loja virtual mais rápido.

Por consequência isso refletirá na nota que o Pagespeed retornará.

Etapa usuário

Pode não parecer, mas esta sem dúvida é a etapa que mais afetará o carregamento da sua loja.

Qualquer descuido nesta etapa implicará diretamente nos resultados que as outras, Desenvolvedor e Servidor, poderiam oferecer.

Muitas vezes, não nos damos conta da quantidade de conteúdo que cadastramos em nossas lojas e como isso pode afetar o carregamento delas.

Esta etapa aborda pontos simples, mas essenciais, que você lojista pode fazer para melhorar o carregamento.

Quantidade de elementos

Páginas com muito conteúdo tendem a demorar mais para serem baixadas, analisadas e exibidas pelo navegador.

Isso acontece, pois existem mais elementos para serem processados e, portanto, demandam mais tempo para ficarem disponíveis ao seu cliente.

O ideal é encontrar um ponto de equilíbrio, onde uma quantidade razoável do conteúdo mais importante da sua loja seja exibido na página principal, mas, que não tenha conteúdo demais para impactar no tempo de carregamento.

Recursos de mídia 

Tais recursos são um grande diferencial entre cada loja.

Um banner promocional legal, um vídeo exibindo uma análise ou mesmo uma página totalmente personalizada de um produto premium.

Entretanto, eles devem ser sempre otimizados para que sua loja tire o melhor proveito deles.

Para explicar melhor, vamos tomar como exemplo uma imagem de um banner com resolução 1000×1000 pixels. Essa imagem, mesmo possuindo o mesmo formato .jpg, pode ter diferentes tamanhos e afetar o carregamento.

Veja a seguir:

Alta qualidade (1.4MB ou 1433.6KB)
Qualidade Normal (264.3KB)

As duas imagens acima parecem a mesma, correto? Errado. Elas são bem diferentes para o seu navegador.

Elas representam o mesmo cenário, possuem o mesmo formato e a mesma resolução, mas, foram geradas com configurações de qualidade diferentes e possuem, portanto, tamanhos muito diferentes. 

Enquanto a da esquerda possui tamanho de 1433.6KB, a imagem da direita possui 264.3KB, um tamanho aproximadamente 81% menor.

Para o navegador isso faz muita diferença, pois indica que ele terá que baixar muito mais conteúdo para exibi-la.

Isso, quando escalamos para dezenas ou centenas de imagens que sua loja pode ter, prejudicaria muito o carregamento.

Podemos fazer também a mesma analogia, agora utilizando formatos de imagens diferentes.

Os mais conhecidos e utilizados hoje são as imagens com extensão .png e .jpg. No entanto, existem outros formatos mais modernos e mais otimizados para a internet. Um deles é o webp, um acrônimo para web picture. Observe:

Imagem formato .jpg
Imagem formato .webp

Novamente, as duas imagens são idênticas na resolução e na configuração de qualidade, porém, com formatos diferentes, sendo um pensando para a internet.

Enquanto a imagem em formato .jpg possui tamanho de 183KB, a imagem em webp possui tamanho de 50KB, ou seja, mais de 3 vezes e meia menor.

Esse novo formato já é amplamente suportado por diversos navegadores e cada vez mais sistemas operacionais recebem suporte nativo a ele.

Neste ponto, a dica que deixamos é sempre otimizar as configurações das imagens da sua loja virtual, e se possível, utilize novos formatos de imagem.

Um excelente site para otimizar suas imagens é o tinypng.com, que suporta formatos .jpg e .png.

Plugins terceiros

Muitas vezes, é necessário habilitar ferramentas nas lojas virtuais que não estão disponíveis nativamente.

Essa integração pode ser feita por scripts adicionados manualmente na loja ou por aplicativos instalados.

Esses plugins precisam ser bem pensados antes de serem colocados na loja, pois eles penalizam muito o carregamento da página.

Um exemplo desses plugins é o Jivochat, um excelente serviço de chat, mas que possui arquivos bem pesados que farão o carregamento da loja demorar mais.

Existem ainda plugins que adicionam mais vitrines de produtos a sua loja, como é o caso do Smarthint.

Nesses casos, eles são ainda mais preocupantes, pois podem quebrar a experiência pensada pelo desenvolvedor, além de criar lacunas no qual essas novas vitrines irão ocupar, mas, que ainda não estão disponíveis, criando deslocamentos nos elementos da página que pode levar um cliente clicar em um elemento não desejado.

Então, pensem com cuidado ao ativar esses plugins e remova sempre aplicativos ou scripts que não são mais utilizados. Isso evitará que recursos desnecessários sejam carregados.

Lembramos que não estamos dizendo para não usarem esses aplicativos, afinal, eles são excelentes no que se propõe a fazer e geram resultados surpreendentes.

Apenas ressaltamos que é importante avaliar como eles afetarão no carregamento da sua loja.

Etapa desenvolvedor

Aqui estão os tópicos mais técnicos, os quais quem desenvolveu a parte visual da sua loja deve se atentar.

Estão presentes pontos que nós como desenvolvedores da parte que você e seu cliente interagem conseguimos controlar.

Sem entrar em muitos detalhes técnicos, os pontos a seguir são alguns dos principais que precisam ser validados:

  • Manter scripts atualizados;
  • Minificar os scripts e estilos da loja;
  • Fazer pré carregamento de recursos chaves;
  • Pré conexão com outros servidores;
  • Adiar o carregamento de scripts;
  • Carregar scripts externos de maneira assíncrona;
  • Adiar carregamento de elementos fora da área visível;
  • Manter os elementos acessíveis, na medida do possível, para leitores de telas;
  • Seguir as recomendações para criações de elementos html;
  • Usar fontes legíveis.

Todos os pontos acima fazem parte de um checklist rigoroso, que nós implementamos para todos os temas e projetos da Netzee.

Esses itens são constantemente revisados e, na medida do possível, aprimorados para garantir a melhor experiência para os nossos clientes.

Etapa plataforma / servidor

Nessa divisão estão as responsabilidades na qual, nem você lojista e nem nós desenvolvedores da parte visual da sua loja possuímos acesso.

Essas medidas devem ser implementadas por quem está por trás dos panos, cuidando da infraestrutura que não é visível, mas, totalmente essencial para a operação da sua loja.

Reduzir tempo de resposta do servidor

Ao entrar em uma loja, existe um tempo no qual o servidor responsável demora para processar e devolver a página para o navegador.

Caso esse tempo seja muito alto, a nota do pagespeed será afetada.

Existem várias maneiras de melhorar esse tempo e cada plataforma implementa a que achar mais condizente com o seu plano de negócios.

Servir recursos com política de cache eficiente

Uma das maneiras de se fazer uma página carregar mais rápido é usar o recurso de cache que os navegadores possuem. Esse tempo de cache de cada recurso é controlado pelo servidor.

Realizando uma política eficiente, o navegador entende que determinado recurso não precisará ser baixado novamente, pois ele ainda está válido, fazendo com que a página carregue mais rapidamente para o seu cliente.

Reduzir o impacto de códigos terceiros

Muitas vezes, ao desenvolver uma plataforma, seus criadores utilizam scripts que fornecem funcionalidades básicas essenciais para todos os lojistas.

Esses scripts precisam ser pensados para que não afetar o carregamento das lojas virtuais, e ao contrário do que acontece na etapa do desenvolvedor, não podem ser facilmente mudados pelo programador.

Conclusão

Para finalizar, um último exemplo, reúne vários pontos acima de maneira bem simples. Se você comprar um tema bem otimizado, mostrar poucos produtos, uns 12 e aliar com poucos banners, uns 4, pode ter uma carregamento excelente. Entretanto, de decidir exibir 80 produtos, ativar o plugin do Facebook, colocar o feed do Instagram, 4 sliders de banners cada um com 4 banners, aquele pop-up de retenção e ainda um chat para seu usuário interagir, o desempenho vai cair lá embaixo.

Esperamos que esse artigo tenha dado uma ideia do impacto que o tema desenvolvido pode ter no desempenho da sua loja, mas que ele não é o único fator envolvido. Nós precisamos da sua ajuda. Isso é um conceito primordial de ser entendido. Se ficou com dificuldades de entender o que os teste do Pagespeed e similares avaliam, procure o auxílio de um profissional que entenda do assunto. Ele irá trabalhar em conjunto com você para definir quais são os pontos essenciais que precisam ser mantidos e qual podem ser otimizados para o seu negócio.

E parabéns pela sua preocupação com o desempenho da sua loja. Esse é o primeiro passo. O assunto é mesmo complicado, o caminho é árduo e poucos chegam ao topo do desempenho.

Esperamos que essas dicas, principalmente as da etapa Usuário, possam ajudar você a melhorar o tempo de carregamento da sua loja virtual e, consequentemente, a nota no Pagespeed, tornando sua loja mais visível e atraindo ainda mais clientes.

Existe algum ponto que você não sabia e achou legal? Comenta aqui embaixo, vamos adorar saber sua opinião!

Comente, sugira e participe: