Um guia para otimização de velocidade do Shopify

Uma das principais considerações para proprietários de lojas Shopify é o desempenho do site. O desempenho do seu site impacta diretamente a capacidade do seu site de converter usuários. Quanto mais rápido for o seu site, mais usuários você provavelmente converterá. Da mesma forma, se você está procurando melhorar o SEO da sua loja Shopify, o desempenho é um pequeno fator de classificação no algoritmo do Google.

Além disso, o desempenho do site impacta todas as suas outras iniciativas de marketing digital. Quer seja pago, email ou marketing social, a velocidade do seu site impactará os usuários de todos esses canais diferentes. Se o seu site está recebendo uma boa quantidade de tráfego desses canais, mesmo uma pequena melhoria no desempenho pode resultar em melhorias de receita perceptíveis.

Uma melhoria de um segundo na velocidade do site pode resultar em + $ 8.000 em receita para este site.

É por isso que garantir o bom desempenho de seu site do Shopify é crucial para o sucesso de sua loja. Acelerar seu site do Shopify não só pode melhorar a experiência do usuário, mas também pode ter um impacto direto em seus resultados financeiros.

Quais otimizações de velocidade do site o Shopify já possui?

Uma das partes interessantes do Shopify é que sua loja vem com algumas otimizações de velocidade prontas para o uso. Em geral, os sites do Shopify são muito rápidos em comparação com outras soluções. Esta é uma ótima notícia para os proprietários de lojas Shopify, pois a plataforma é geralmente mais rápida do que plataformas como Magento.

Depois de criar um novo site Shopify, você descobrirá que os seguintes recursos de desempenho já devem estar implementados:

• Aproveite o cache do navegador : o Shopify já deve armazenar em cache os recursos internos do seu site por padrão. O cache permite que parte do seu conteúdo, como imagens, JavaScript e CSS, seja armazenado localmente nos navegadores dos usuários. Isso significa que eles não terão que baixar novamente o conteúdo ao visualizar o mesmo recurso duas vezes. Isso pode acelerar sua loja, pois os usuários poderão ver parte do conteúdo do seu site muito mais rápido do que antes. Observe, se você estiver vendo recursos de terceiros sendo sinalizados por problemas de cache, não há nada que você possa fazer para ajustar diretamente o cache.
• Utilize um CDN : o Shopify utiliza o Fastly CDN. Uma CDN (Content Delivery Network) permite que parte do conteúdo do seu site seja armazenado em servidores em todo o mundo. Isso reduz a distância física entre seus usuários e o conteúdo do seu site. Reduzir a distância física ajuda a melhorar o desempenho do seu site.

Como otimizar a velocidade do site do Shopify:

Seguindo essas etapas, você pode acelerar significativamente um site Shopify:

• Escolha um tema leve do Shopify
• Reduzir tamanhos grandes de imagem
• Comprimir imagens
• Substitua GIFs por imagens estáticas
• Imagens de carregamento lento
• Limitar JavaScript de terceiros e aplicativos Shopify
• Migrar códigos de rastreamento para o Gerenciador de tags do Google
• Administre sua loja por meio do Google PageSpeed ​​Insights

1. Escolha um tema leve do Shopify (dados originais)

A escolha de um tema rápido do Shopify pode colocar imediatamente o seu site em uma ótima posição do ponto de vista do desempenho. Alguns temas podem vir com inchaço desnecessário fora da caixa, colocando seu site em desvantagem de desempenho. Por outro lado, um tema mais leve definirá seu site para um forte desempenho no futuro.

Para lhe dar uma ideia de alguns dos temas de melhor desempenho, testamos mais de 200 modelos disponíveis na loja de temas Shopify e registramos seu benchmark First Contentful Paint (FCP) e Time To Interactive (TTI) do Google PageSpeed ​​Insights. Abaixo, você pode encontrar os temas de melhor desempenho que nossos testes identificaram:

1. Criar Tema (1.1 FCP, 7.8 TTI)
2. Tema do brinquedo (1.1 FCP, 7.7 TTI)
3. Tema caloroso (1,9 FCP, 7,8 TTI)
4. Tema leve (1.1 FCP, 7.8 TTI)
5. Tema ao ar livre (1.1 FCP, 8.1 TTI)

É claro que isso não quer dizer que os temas de alto desempenho não possam ser tornados mais lentos ou que essas sejam as melhores opções para o seu site. No entanto, se a otimização de velocidade é sua prioridade, talvez você deva escolher essas opções.

2. Reduza tamanhos grandes de imagem

O redimensionamento de recursos de imagens grandes pode ser uma das melhores maneiras de acelerar um site do Shopify. Ao avaliar muitos sites do Shopify, percebemos que muitas empresas tendem a usar um grande número de imagens. Isso faz sentido, pois as imagens são um item básico das lojas de comércio eletrônico. Isso é ainda mais verdadeiro em setores como o varejo, onde as imagens são uma necessidade para destacar os produtos.

Embora as imagens sejam uma maneira fantástica de melhorar a experiência do usuário e a marca de sua loja, elas geralmente vêm com uma compensação de desempenho. Os arquivos de imagem geralmente são muito maiores em tamanho do que o HTML ou CSS padrão. O resultado do uso de um grande número de imagens na página pode ser um peso de página muito pesado, que leva mais tempo para os usuários fazerem o download do que uma página com menos imagens:

Esta página usa 173 solicitações de imagem com um tamanho total de 14 MB em recursos de imagem

Da mesma forma, imagens não otimizadas podem tornar a página do seu site ainda mais pesada. Freqüentemente, as imagens serão carregadas em tamanhos muito maiores do que seu “tamanho de renderização”. Este é o tamanho que os usuários realmente veem no navegador:

Esta página contém um tamanho real de quase 2x o tamanho de renderização

Quando as imagens são carregadas em tamanhos muito maiores do que o tamanho de renderização, isso causa problemas de desempenho desnecessários. Isso significa que os usuários devem fazer download de uma imagem maior do que o necessário para renderizar. O resultado é que os usuários devem desperdiçar recursos e dados extras do navegador para realmente ver o conteúdo.

Você pode encontrar imagens maiores em uma determinada página usando o Chrome DevTools. Basta clicar com o botão direito e selecionar “Inspecionar”. Navegue até a guia “Rede” e atualize a página. Isso mostrará todos os recursos usados ​​para carregar sua página. Você pode então classificar por “Tamanho” para encontrar os maiores ativos.

Se você vir imagens grandes (100+ KB), encontre essa imagem em sua página e, mais uma vez, clique com o botão direito e escolha “Inspecionar”. Passe o mouse sobre o link da imagem para mostrar o tamanho da renderização em comparação com o tamanho real (intrínseco).

3. Comprimir imagens

As imagens também podem ser não otimizadas quando não são compactadas. É muito comum ver lojas Shopify onde nenhuma compactação foi aplicada às imagens carregadas, o que resulta em tamanhos de imagem maiores do que o necessário.

Ao usar a compactação, você pode garantir que seus ativos de imagem tenham tamanhos de arquivo muito menores do que a imagem original. O tamanho de arquivo menor permitirá que os navegadores carreguem o conteúdo do seu site com mais rapidez.

Quando se trata de compactação de imagem, preferimos usar uma combinação desses dois métodos:

• Aplicativos Shopify: Alguns aplicativos compactam imagens automaticamente após o upload. Tivemos boas experiências com o Crush.pics.
• Optimizilla: permite compactar manualmente grandes ativos de imagem antes de enviar para o seu site.

4. Substitua GIFs por imagens estáticas

Uma tendência inegável que vimos nas lojas Shopify mais lentas é a utilização de GIFs. Os GIFs podem ser extremamente valiosos, pois fornecem uma experiência mais interativa para os usuários. Mais uma vez, isso pode ajudar a melhorar seu site do ponto de vista da experiência do usuário e da marca.

No entanto, os ativos GIF são extremamente grandes. Usar apenas um GIF em uma página pode aumentar drasticamente seu tamanho:

Este único ativo GIF é responsável por 2,8 MB

Vimos casos em que apenas o uso de dois ou três GIFs foi responsável por mais de 10 MB de uma única página. Esses arquivos aumentam significativamente o peso da página, portanto, recomendamos tentar substituí-los por imagens estáticas sempre que possível. Isso pode resultar em economia significativa de recursos e otimização da velocidade do Shopify.

5. Imagens de carregamento lento

Ao executar nossa lista de sites do Shopify por meio do PageSpeed ​​Insights, uma das recomendações mais comuns que encontramos foi “Adiar imagens fora da tela”. Isso é uma indicação de que todos os ativos de imagem do site estão carregando de uma vez:

Como muitos sites do Shopify usam muitas imagens, examinar o carregamento lento faz sentido em um grande número de casos. Isso pode acelerar o seu site Shopify, pois todas as imagens do seu site não carregam de uma vez, apenas quando o usuário rola a página para baixo.

Se você estiver interessado em implementar o carregamento lento, o Shopify tem uma documentação de ajuda muito boa sobre isso. Tivemos o maior sucesso de nossos clientes trabalhando com nossos desenvolvedores para implementar a biblioteca lazysizes.

6. Limite JavaScript de terceiros e aplicativos Shopify

Uma loja Shopify está usando um grande número de aplicativos e recursos de terceiros. Isso está resultando em um grande número de solicitações que o navegador deve fazer

Semelhante aos plug-ins do WordPress, o Shopify tem “aplicativos” que permitem facilmente aos proprietários de sites adicionar funcionalidades aos seus sites sem a necessidade de um plano de fundo de desenvolvedor. Os aplicativos são uma forma fantástica de aumentar as capacidades do seu site. O mesmo vale para scripts de terceiros adicionais.

No entanto, lembre-se de que essas adições têm um custo de desempenho.

Cada vez que você adiciona aplicativos ou scripts ao seu site, isso aumenta o número total de solicitações que o seu site está fazendo. Além disso, o tamanho desses scripts deve ser levado em consideração. Muitos aplicativos ou códigos de terceiros podem diminuir o desempenho de sua loja Shopify.

Um exemplo de uma loja Shopify que utiliza um grande número de códigos de rastreamento de terceiros

Como esses recursos podem prejudicar o desempenho do site, é importante revisar regularmente todo o código de rastreamento, aplicativos Shopify e qualquer outro recurso de terceiros que você esteja usando. Achamos útil ter uma conversa honesta com sua equipe de marketing e desenvolvimento. Fazer estas cinco perguntas sobre cada recurso pode ser útil para tomar uma decisão sobre ele:

1. Com que frequência usamos realmente esse recurso?
2. É um “must-have” ou “nice to have”?
3. Existe uma opção mais leve que possamos usar?
4. O benefício que obtemos disso vale uma compensação de desempenho?
5. Há alguma métrica que possamos consultar para ver com que frequência esse recurso é usado por nossos usuários?

É claro que as respostas a essas perguntas certamente irão variar de acordo com sua loja e modelo de negócios. Por exemplo, um recurso de bate-papo pode ser crucial para algumas lojas, mas não essencial para outras. Depois de responder a essas perguntas, recomendamos trabalhar com sua equipe de desenvolvimento para descobrir quais elementos podem ser removidos com segurança.

Não sabe por onde começar? Aqui estão alguns códigos de terceiros que encontramos nas lojas Shopify e que tendem a ter impactos maiores no desempenho:

• Lucky Orange
• Sumo
• Sentinela
• ZenDesk
• Deriva
• PayPal
• Klaviyo
• Privado
• Yotpo

Claro, não estamos defendendo nenhuma dessas tecnologias. No entanto, se você sabe que está utilizando um deles, é bom estar ciente de que pode estar causando um impacto no desempenho de sua loja Shopify. Se o seu teste revelar que eles podem estar causando problemas, considere removê-los ou substituí-los para acelerar o seu site Shopify.

7. Migrar códigos de rastreamento para o Gerenciador de tags do Google

O Gerenciador de tags do Google é uma solução que permite adicionar e remover tags de seu site com facilidade, sem precisar tocar no código. É uma maneira fantástica de gerenciar todo o código de acompanhamento do seu site em um só lugar. Além disso, uma das melhores coisas sobre o Gerenciador de tags do Google é que todo o código é carregado de forma assíncrona. Isso significa que o código carregado por meio do Gerenciador de tags do Google não bloqueará a renderização do conteúdo do seu site. Isso significa que você pode considerar fazer uma “migração de tag” para mover parte do seu código de rastreamento para o Gerenciador de tags do Google. Você pode fazer isso executando as seguintes etapas:

1. Adicione o Gerenciador de tags do Google à sua loja Shopify
2. Navegue até Tags> Novo e procure por tags integradas em “Tipos de tag” que você está usando no Shopify.
3. Implementar essas tags no Gerenciador de tags do Google
4. Se você não encontrou nenhuma tag incorporada, você pode escolher “HTML personalizado” e adicionar sua tag
5. Defina seu acionamento corretamente. Muitas vezes, isso é definido como “Todas as páginas”
6. Publique suas alterações do Gerenciador de tags do Google
7. Navegue de volta para o Shopify e remova todos os aplicativos que você adicionou por meio do Gerenciador de tags do Google
8. Navegue até sua loja e teste se suas novas tags estão funcionando corretamente. Você pode fazer isso usando o modo “Visualizar” do Gerenciador de tags do Google

Considere mover pixels de rastreamento, como Google Analytics, Hotjar, Facebook e outros códigos de terceiros para o Gerenciador de tags do Google.

8. Administre sua loja por meio do Google PageSpeed ​​Insights

O Google PageSpeed ​​Insights é a ferramenta de teste de velocidade do site do Google. Ele analisa o seu site e fornece métricas sobre o desempenho do seu site, bem como recomendações sobre como você pode melhorar a velocidade do seu site. Para executar um teste, simplesmente navegue até a ferramenta e entre na página da qual deseja ver os dados de desempenho. Você deve ver algo como a seguinte captura de tela:

Você pode recuperar uma boa quantidade de dados e isso pode ser bastante opressor. Vamos discutir os principais pontos de dados que observamos:

• Primeira pintura com conteúdo: quanto tempo leva para a primeira parte do conteúdo ser renderizada. Isso é importante para mostrar ao usuário que o conteúdo está começando a carregar.
• Tempo para interação: quanto tempo leva para a página se tornar interativa para o usuário pela primeira vez.

Geralmente, veremos essas duas métricas primeiro para ter uma ideia de como uma página específica está carregando. Isso pode fornecer ótimos dados de referência que você pode voltar e medir novamente para ver se as melhorias na velocidade do site estão tendo um impacto.

Testes de desempenho da loja Shopify (dados originais)

Uma coisa que você pode querer saber é como sua loja se compara a outros sites do Shopify. Para lhe dar um ponto de referência, realizamos uma análise em algumas das lojas Shopify mais proeminentes para avaliar seu desempenho.

Metodologia:

Para coletar esses dados, medimos o desempenho da página inicial de mais de 400 sites do Shopify. Coletamos pontos de dados como Primeira pintura com conteúdo, Tempo para interação, Tamanho da página, Tamanho da imagem e Total de solicitações. Todos os dados de desempenho são para a versão móvel do site. Em seguida, comparamos os 20% superiores e inferiores das páginas com base na pontuação do Google PageSpeed.

20% principais:

• Primeira pintura com conteúdo: 2,78 segundos
• Tempo para interação: 8,98 segundos
• Tamanho total da página: 2,01 MB
• Total de ativos de imagem: 1,11 MB
• Pedidos: 72

Média:

• Primeira pintura com conteúdo: 3,8 segundos
• Tempo para interação: 22,1 segundos
• Tamanho total da página: 4,41 MB
• Total de ativos de imagem: 2,1 MB
• Pedidos: 171

20% inferiores:

• Primeira pintura com conteúdo: 5,89 segundos
• Tempo para interação: 30,37 segundos
• Tamanho total da página: 5,54 MB
• Total de ativos de imagem: 2,59 MB
• Solicitações: 235

Recursos adicionais

Da mesma forma, se você estiver procurando por outras maneiras de melhorar o desempenho de seu site do Shopify, os recursos abaixo devem ajudar. Agregamos nossas ferramentas e recursos de velocidade de site favoritos que podem ser usados ​​para melhorar o desempenho em sites da Shopify e sites com outros sistemas de gerenciamento de conteúdo.

Ferramentas de teste de velocidade da página:

1. Pingdom
2. Google Pagespeed Insights
3. WebPageTest.org
4. Chrome DevTools
5. Farol do Google
6. Think With Google

Otimização de imagem:

• Optimizilla
• Crush.pics

Consulte Mais informação:

• Otimizando a velocidade do site com as ferramentas de desenvolvedor do Chrome
• O guia definitivo para a velocidade do site

Se você deseja otimizar a velocidade de sua loja no Shopify, esses ajustes podem ser ótimos. Melhorar a otimização de imagem, reduzir solicitações e implementar carregamento lento podem ser ótimas maneiras de garantir que seu site carregue mais rápido. Esperançosamente, o resultado é um desempenho superior que melhora a experiência do usuário em todos os seus canais digitais. Se você deseja melhorar o desempenho do site da sua loja Shopify ou SEO, pode aprender mais sobre nossos serviços de SEO da Shopify.