fbpx
Como a velocidade do site te faz perder tráfego e clientes

Transformação Digital

Como a velocidade do site te faz perder tráfego e clientes

Bruno Santos
Escrito por Bruno Santos em 27 de maio de 2020

Em um mundo dominado por informações em tempo real e uma grande facilidade em acessá-las, torna-se cada vez mais importante manter o usuário interessado em seu conteúdo na web. 

Com nossa pressa rotineira, cresce a necessidade de termos a possibilidade de acessar estas informações mais rapidamente possível. Por isso, a performance e velocidade de carregamento de uma página web (seja ela um blog ou até mesmo um anúncio de produto) deve ser otimizada para evitar que o usuário espere por muito tempo para acessar a informação buscada.

Mas, o que seria “esperar por muito tempo” o carregamento de uma página?

Quando se trata de usuários, o tempo se torna relativo. Ou seja, uma página que demora um segundo a mais para carregar pode espantar uma quantidade massiva de pessoas do seu conteúdo. 

Segundo uma pesquisa realizada pelo ex-funcionário da Amazon, Greg Linden, uma página que demora 100 milissegundos a mais para carregar pode resultar em uma queda de aproximadamente 1% das vendas da Amazon.

Greg Linden pesquisa sobre carregamento de página
reprodução: www.niels-ole.com

Além disso, Greg também levantou dados que apontam uma queda de 20% do tráfego do Google se a pesquisa demorar 500 milissegundos a mais do que o tempo médio. 

Com estes dados, percebe-se que 1 segundo de lentidão já pode ser o suficiente para causar uma perda considerável em vendas e tráfego para páginas web.

Afinal, como saber se a velocidade do meu site está dentro do esperado?

Além dos testes massivos que podem ser feitos com pessoas comuns através de pesquisas, existem diversos sites e ferramentas que indicam como está a performance do nosso site. Assim, torna-se mais simples encontrar e resolver problemas de carregamento de páginas. 

A seguir, veja alguns exemplos dessas ferramentas:

Page Speed Insights

home page PageSpeed Insights velocidade do site

A ferramenta para medir velocidade de página do Google, Page Speed Insights, está entre as mais utilizadas pelo mercado. Nela, você recebe dados de carregamento do seu site tanto em dispositivos móveis (smartphones e tablets) quanto em desktops. Ao inserir sua URL o Page Speed atribui uma nota de 0 a 100 para velocidade do seu site. 

Além disso, o Page Speed Insights lista todas as “falhas” existentes no site, que podem resultar em uma piora de performance e dá dicas de como melhorar. 

Website Grader

Home Website Grader para velocidade do site

Para quem busca um serviço completo que aponte não só performance, mas todos os lugares onde seu site pode melhorar, o Website Grader é uma ótima opção. Esta ferramenta online classifica seu site com base em métricas importantes  como SEO, segurança, experiência do usuário e performance. Por fornecer uma análise completa do site, é uma ferramenta ideal para equipes de marketing que precisam otimizar conteúdos para blogs e sites.

Algumas dicas…

Existem diversos fatores que podem impactar em uma péssima experiência do usuário referente ao carregamento de um conteúdo, mas nem sempre estão ligadas a velocidade. 

Telas de loading e o Lazy Loading

O propósito das telas de loading é “arrumar a casa” para aguardar a chegada do usuário. Enquanto o conteúdo não carrega, o loading (geralmente uma animação ou mensagem) comunica ao usuário de que ele deve aguardar até que se complete o carregamento. Entretanto, a ideia de estar em uma “sala de espera”, pode levar o usuário para outro site, já que o conteúdo começa a carregar apenas no momento em que o usuário acessa a página – e não antes disso. 

Então, para resolver esse problema é usada uma técnica chamada Lazy Loading – inclusive é a mesma tecnologia usada em sites famosos como o Facebook e o G1 da Globo. 

O Lazy Loading, ou “carregamento preguiçoso”, faz exatamente o que seu nome diz, poupa esforços para carregar o conteúdo. Ao implementar esta técnica, o site vai carregar apenas o conteúdo inicial, poupando uma quantidade significativa de tempo e descartando a necessidade de uma tela de loading. 

Ilustração Lazy Loading para melhorar a velocidade do site
Reprodução: HC Desenvolvimento

Ao navegar pelo site, outras informações vão sendo carregadas, sempre em pequenas parcelas. Assim, o site só consultará o banco quando necessário, tornando a navegação mais rápida. Um exemplo prático deste método acontece no aplicativo do Instagram, pois as fotos do feed só carregam a medida em que o usuário rola a tela para baixo. 

Uma imagem vale mais que 1.000 usuários?

Este questionamento vem sendo cada vez mais utilizado entre as pessoas que desejam otimizar o carregamento de seu site. As mídias em geral (fotos e vídeos) tendem a ser o que mais afetam um bom carregamento. 

Um dos métodos para tornar as imagens mais leves é comprimi-las antes de colocar em sua página. Por exemplo, o site TinyPNG utiliza a técnica de quantização parar diminuir a quantidade de cores presentes em uma imagem deixando-a mais leve.

Carregando suas imagens no TinyPNG, é possível reduzir drasticamente seu tamanho sem afetar diretamente na qualidade delas. 

O revolucionário SVG

O formato de imagem SVG (Scalable Vector Graphics), vem se tornando tendência na web, já que tem um custo de armazenamento consideravelmente baixo. 

Além de ser um formato vetorizado, ou seja,  pode ser ampliado sem perda de qualidade, as imagens em SVG não são compostas de pixels, mas por formas geométricas vetoriais. Estas formas são linhas e curvas descritas matematicamente e, diferente de formatos como PNG ou JPG, são extremamente leves. 

Ilustração SVG
Reprodução: DEV Media

Pela combinação de alta qualidade e um peso leve, aplicar o SVG em seu site fará com que o carregamento aconteça mais rápido, além de garantir a nitidez a foto independentemente do tamanho.

Otimizando a performance da sua página em WordPress

Um dos pontos positivos do WordPress é a sua vasta biblioteca de plugins, que inclui diversas maneiras de melhorar a performance do seu blog, sem necessidade de utilizar linguagem de programação.

Veja a seguir alguns exemplos de plugins que podem melhorar a performance da sua página em WordPress:

BJ Lazy Load

Este plugin implementa o método de lazy loading nas mídias do seu blog/site. Para isso, ele impede o carregamento completo dos dados da página e apenas carrega-os à medida que o usuário rola a página. Ele adiciona uma “moldura” no lugar das imagens ou vídeos que não precisam ser carregados naquele momento. Assim, ele substitui a “moldura” pelo conteúdo original quando este é carregado.

EWWW Image Optimizer

EWWW Image Optimizer permite ao administrador de conteúdo comprimir as imagens sem precisar sair do WordPress, tudo isso sem causar uma perda de qualidade perceptível na mídia.

WP Super Cache

Para quem deseja um carregamento rápido em páginas que não são atualizadas com frequência, este plugin pode ser a chave. Com ele, o servidor cria uma “versão cache” da página, ou seja, salva a página na memória do navegador do usuário. Assim, a página sempre carregará instantaneamente, por já estar salva. Caso o administrador do conteúdo deseje atualizar algo nas páginas “cacheadas”, o plugin disponibiliza uma opção de atualizar a página. Com a atualização, o usuário irá carregá-la novamente ao acessar pela primeira vez após a atualização, resultando novamente em uma página salva e carregando instantaneamente até a próxima atualização.

SPA e o conceito de páginas instantâneas

Uma SPA (Single Page Aplication) é um modelo de aplicação que consiste em dar ao usuário a mesma experiência de navegação de um aplicativo. Caso você não saiba, quando navegamos em várias páginas de um mesmo site, o servidor da página precisa carregar uma a uma à medida em que clicamos em ícones e links . Já nos aplicativos, temos a impressão de que tudo acontece ao mesmo tempo, sem a necessidade de haver um re-carregamento. 

Sendo este um modelo bem visto por profissionais de User Experience (Experiência do Usuário), o SPA vem crescendo entre os desenvolvedores de site.

Reprodução: School Of Net

Com ele, o site todo é carregado em uma única página. Ele exibe as informações como um site normal, trocando a URL e as informações de acordo com a página atual, porém as páginas são carregadas instantaneamente. 

Para fornecer essa experiência em tempo real, os sites que utilizam desse modelo carregam as informações necessárias ao ser acessado pela primeira vez e, conforme o usuário navega, todos os outros conteúdos são carregados no plano de fundo, assim todo o site carrega naturalmente sem a percepção do usuário. 

Os SPAs são bem recebidos pelas ferramentas de testes de performance. Além disso, podem ser ideais para blogs, por exemplo, onde a maior parte dos conteúdos são dinâmicos com layout fixo. 

Conclusão

Com um vasto conteúdo disponível na internet, melhorar a performance do seu site fará seu conteúdo ser notado pelo usuário. Além disso, como você viu, a performance está diretamente ligada à geração de receita da sua empresa.

Sendo assim, é primordial que a performance seja um ponto crítico desde o início do desenvolvimento de até o fim de sua vida útil.

Gostou deste conteúdo?

Que tal assinar nossa newsletter para receber mais conteúdos como esse direto na sua caixa de e-mail?

Deixe seu e-mail abaixo e faça sua inscrição GRÁTIS.

Conteúdo novo toda semana

Entre para nossa lista e receba o melhor conteúdo do blog

E aí,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *