Como melhorar a velocidade de carregamento da sua página do Shopify

A importância da velocidade de carregamento de página otimizada

1. Reduza a taxa de rejeição

• De acordo com as Estatísticas do Google, se o tempo de carregamento de uma página exceder 3 segundos, a taxa de rejeição pode aumentar em até 32%. Isso significa que quanto mais tempo a página demora para carregar, maior a probabilidade de os clientes saírem antes de ver o conteúdo do seu site.
• Se o tempo de carregamento se estender para 5 segundos, a taxa de rejeição pode chegar a 90%, e se ele se estende até 10 segundos, esse número pode chegar a 123%.

2. Melhore a experiência do usuário e as conversões

• Um site rápido não só satisfaz os usuários, mas também melhora as taxas de conversão. Cada segundo de carregamento de página mais lento pode custar-lhes cerca de US$ 1.6 bilhões anualmente, o que destaca a importância da velocidade de carregamento.
• A Shopify também observou que lojas com tempos de carregamento mais lentos têm taxas de conversão muito mais baixas em comparação àquelas com tempos de carregamento mais rápidos.

3. Impulsione o SEO

• O Google confirmou que a velocidade de carregamento da página é um fator importante em seu algoritmo de classificação. Isso significa que sites mais rápidos têm uma chance maior de aparecer nos resultados de pesquisa.
• Um site com velocidade de carregamento rápida não só atrai mais clientes como também ajuda a melhorar a classificação de SEO, tornando seu site mais acessível a um público mais amplo.

Como funciona a velocidade de carregamento da página?

Quando um usuário visita seu site, o navegador solicita dados (imagens, scripts, fontes, conteúdo) do seu servidor de hospedagem e de quaisquer serviços de terceiros. O tempo que todos esses dados levam para carregar e renderizar determina:

• Primeira pintura com conteúdo (FCP): Quando o primeiro elemento visível aparece.
• Pintura com maior conteúdo (LCP): Quando o conteúdo principal é carregado.
• Tempo de interação (TTI): Quando os usuários podem interagir totalmente com a página.

Quanto menos e mais leves forem os recursos, mais rápido o site carrega. O GemPages é otimizado para isso, mas fatores como imagens pesadas, aplicativos desnecessários ou muitas fontes personalizadas ainda podem deixar o site lento.

Como verificar a velocidade de carregamento do seu site?

Ferramentas de Verificação

Para avaliar a velocidade de carregamento do seu site, duas ferramentas úteis são GTMetrix e Google Page Speed ​​Insights. Você pode acessá-los através dos seguintes links. Essas ferramentas fornecem uma visão abrangente e detalhada do desempenho do seu site:

Informações de velocidade do Google

Website: https://pagespeed.web.dev/

Foca nos padrões Core Web Vitals do Google, incluindo métricas como Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Esta ferramenta avalia o desempenho com base em fatores que o Google considera importantes para SEO e experiência do usuário. Portanto, os resultados do PageSpeed ​​Insights são muito úteis se você deseja otimizar sua classificação nos mecanismos de busca do Google.

GTMetrix

Website:  https://gtmetrix.com/

Utiliza ferramentas como Lighthouse e métricas específicas como Speed ​​Index (SI) e Total Blocking Time (TBT), que fornecem insights mais detalhados sobre os fatores técnicos que afetam a página. O GTMetrix também permite testes de diferentes locais ao redor do mundo, ajudando você a entender o desempenho do seu site da perspectiva de usuários globais.

• Largest Contentful Paint (LCP): Semelhante ao Google PageSpeed ​​Insights, esse valor deve ser inferior a 2.5 segundos.
• Total Blocking Time (TBT): Mede por quanto tempo a página fica bloqueada, ajudando a otimizar a capacidade de resposta da página.
• Speed Index (SI): Avalia quanto tempo leva para o conteúdo da página ser exibido completamente, então quanto menor, melhor.
• First Contentful Paint (FCP): O tempo que leva para o primeiro conteúdo aparecer, que deve ser otimizado para ser o mais rápido possível.
• Time to Interactive (TTI): O tempo que leva para a página se tornar totalmente interativa para o usuário.

Teste Manual

Além de usar ferramentas para testes, você também deve testar seu site diretamente para ter uma visão mais precisa de sua velocidade prática de carregamento.

Fatores que influenciam a velocidade de carregamento da página e como melhorá-los

O GemPages foi projetado com a otimização da velocidade de carregamento em mente, mas vários fatores ainda podem afetar a velocidade de carregamento de suas páginas. Aqui estão alguns fatores que você precisa considerar:

1. Tamanho da imagem

Um dos principais motivos para a lentidão no carregamento das páginas é o uso excessivo de imagens ou o upload de imagens muito grandes.

Para melhorar essa situação, é essencial otimizar o tamanho das imagens.

Solução 1: Redimensionar imagens

Certifique-se de que o tamanho das imagens que você carrega não excede 1 MB. Você pode cortar e redimensionar imagens para garantir que sejam adequadas. Uma boa regra prática é usar imagens com uma largura máxima de 1920px e um tamanho menos de 1 MB.

Solução 2: Escolha o formato de imagem correto

Considerar usando imagens no formato JPG, que geralmente têm um tamanho menor que o PNG porque esses dois formatos usam métodos de compactação diferentes.

O GemPages converte automaticamente as imagens para o formato WebP ao carregá-las no Shopify, o que otimiza significativamente seu tamanho.

Solução 3: Otimize imagens para dispositivos móveis

Usar imagens grandes em telas pequenas de celulares é desnecessário. Portanto, você pode selecionar imagens mais apropriadas e otimizadas especificamente para dispositivos móveis.

O GemPages seleciona automaticamente tamanhos menores com base no tipo de tela, mas para otimização completa, você pode atualizar manualmente essas imagens.

Por exemplo, se você usar o Bandeira de herói elemento, você pode usar duas imagens diferentes: uma para desktop e outra para mobile. Para mobile, escolha um tamanho de imagem menor, otimizado tanto em exibição quanto em estética.

Aqui estão algumas recomendações para imagens móveis:

• Largura: As imagens móveis geralmente têm uma largura máxima entre 640px e 750px, o que é suficiente para ter uma aparência elegante na maioria dos smartphones modernos sem tornar a página pesada.
• Tamanho do Arquivo: Para otimizar os tempos de carregamento, o tamanho da imagem deve ser mantido entre 100 KB e 200 KB (ou menos, se possível), sem sacrificar muita qualidade visual.
• Formato: Use formatos modernos como WebP ou comprimida JPEG, que reduzem o tamanho do arquivo, mantendo a alta qualidade da imagem.

Solução 4: Use o Lazy Loading

Carregamento lento no GemPages é uma técnica de otimização que ajuda seu site a carregar mais rápido, atrasando o carregamento de imagens e conteúdo desnecessários até que eles apareçam na tela do usuário.

Em outras palavras, somente quando o usuário rola a tela para baixo e o conteúdo precisa ser exibido é que ele começa a carregar.

Isso reduz o tempo de carregamento inicial da página, economiza largura de banda e melhora a experiência do usuário, especialmente em dispositivos móveis ou com conexões de internet lentas.

Atualmente, o GemPages já oferece suporte nativo a esse recurso, então você não precisa se preocupar com esse aspecto.

Solução 5: Use aplicativos para compactação automática de imagens

• Otimização de imagem de velocidade Avada SEO
• SEOAnt ‑ Otimizador de imagem e velocidade 
• Otimização de imagem minúscula de SEO, velocidade

2. Usar muitos aplicativos de terceiros

Solução 1: Oculte o cabeçalho e o rodapé para evitar o carregamento de scripts de aplicativos de terceiros

Se você estiver criando uma landing page com o GemPages, significa que você está totalmente focado no conteúdo, no design e nas funções necessárias para vender, o que também significa que você não precisa carregar todas as funções de todos os aplicativos da sua loja.

Neste caso, você pode usar o “Ocultar cabeçalho e/ou rodapé” função, que você pode encontrar em este link.

Ocultar o cabeçalho e o rodapé significa que a página criada pelo GemPages não carregará scripts JavaScript desnecessários de aplicativos.

Solução 2: Limite a instalação de aplicativos desnecessários

Escolha aplicativos Shopify bem desenvolvidos e otimizados para tempos de carregamento, garantindo que sua página sempre carregue rapidamente.

3. Usar muitas fontes, especialmente fontes personalizadas

Usar fontes diferentes pode tornar seu design mais atraente, mas também tem um custo.

Solução: Limite o uso de muitas fontes.

• Recomendamos usar no máximo três fontes na sua página; normalmente, você deve usar apenas duas: uma para títulos e outra para o corpo do texto.
• Além disso, considere usar Google Fonts em vez de carregar arquivos de fonte personalizados.

4. Usando muitas seções separadas para cada tela

O GemPages oferece um recurso muito útil que permite ocultar ou mostrar uma seção em uma tela específica. Isso leva os usuários a criar duas seções: uma dedicada ao desktop e outra dedicada ao celular. Essa prática ajuda a otimizar a exibição e o design do conteúdo em diferentes dispositivos.

No entanto, usar muitas seções independentes mostradas em telas diferentes pode inadvertidamente aumentar o peso do conteúdo, resultando em tempos de carregamento mais longos.

Solução: Limite o uso de seções duplicadas para desktop e dispositivos móveis.

Limite a exibição de seções independentes em cada tela; é recomendado usar apenas 1 ou 2 seções especialmente importantes, como a seção hero e a seção above-the-fold. Para outras seções, é melhor aproveitar e otimizar a exibição responsiva de seções de desktop existentes.

5. Seu tema não está otimizado para velocidade de carregamento

Certifique-se de escolher temas que sejam bem otimizados para velocidade de carregamento. Aqui estão alguns temas que você pode considerar utilizar:

Solução 1: Use um tema leve

É recomendado que você escolha temas leves do Shopify. Não hesite em selecionar temas gratuitos do Shopify, pois eles também são bem projetados, como:

Temas grátis:

• Tema do amanhecer
• Gosto
• sentido

Temas pagos

• Tema Booster

Solução 2: Use a função de página de destino instantânea (sem cabeçalho)

A Instant Landing Page do GemPages usa tecnologia headless, o que significa que ela separa o frontend do backend. Dessa forma, o GemPages pode gerenciar o código-fonte do frontend 100%. Essencialmente, o GemPages salvou sua página em um servidor independente, permitindo que ela seja executada de forma autônoma e não dependa de scripts de outros aplicativos do Shopify, melhorando assim a velocidade de carregamento.

Saiba mais sobre a página de destino instantânea aqui..

Perguntas frequentes

1. O construtor de páginas está deixando minha página lenta?

Sim e Não. O GemPages foi projetado com a otimização da velocidade de carregamento em mente. A velocidade de carregamento depende de muitos fatores, então, ao usar um construtor de páginas, é importante entender os fatores mencionados neste artigo para usar o construtor de páginas corretamente.

2. Por que minha página está carregando lentamente na América Latina?

A velocidade da rede e a infraestrutura nesta região não são altas.

Imagens pesadas (comportamento comum em páginas na América Latina) devem ser limitadas ao projetar a página.

3. Como posso testar a velocidade de carregamento do meu site?

Use ferramentas de teste como as mencionadas acima; recomendamos duas ferramentas: Google Speed ​​Insights e GTMetrix.

4. Qual o papel de uma Rede de Distribuição de Conteúdo (CDN) na melhoria da velocidade de carregamento?

A Rede de entrega de conteúdo (CDN) desempenha um papel crucial na melhoria da velocidade de carregamento de um site ao distribuir o conteúdo do seu site em vários servidores no mundo todo.

Quando um visitante acessa seu site, a CDN fornece o conteúdo do servidor mais próximo da localização dele, reduzindo a distância que os dados precisam percorrer e acelerando os tempos de carregamento.

Na GemPages, otimizamos o desempenho armazenando imagens diretamente na CDN da Shopify e hospedando nossos scripts na CDN da Amazon. Essa configuração garante que as páginas criadas com a GemPages carreguem de forma rápida e fluida, independentemente de onde seus visitantes estejam.

Ao aproveitar essas poderosas CDNs, ajudamos a oferecer uma experiência de usuário mais rápida e tranquila em todo o mundo.

5. Qual é a diferença entre First Contentful Paint (FCP) e Time to Interactive (TTI)?

Primeira pintura com conteúdo (FCP) é o tempo que leva para o primeiro conteúdo aparecer na tela, sinalizando o início do carregamento da página.

Hora de interagir (TTI) é o tempo que leva para a página ficar totalmente utilizável, permitindo que o usuário interaja com ela sem atrasos. 

O FCP mostra quando o conteúdo se torna visível, enquanto o TTI mostra quando a página está totalmente funcional.

6. Como posso obter um design visualmente atraente e ao mesmo tempo manter uma velocidade de carregamento rápida?

Para equilibrar um design visualmente atraente com velocidade de carregamento rápida, concentre-se na simplicidade. Um site com boa aparência não requer animações pesadas ou designs excessivamente complexos.

O segredo é oferecer a melhor experiência aos seus clientes, mantendo um design limpo e minimalista: menos é mais. Priorize um design simplificado e otimize cada elemento para que fique pixel-perfect.

Ao fazer isso, você criará um site visualmente atraente, eficiente e rápido, melhorando a experiência do usuário sem comprometer o desempenho.