Se você se preocupa com SEO, saiba medir a velocidade do seu site corretamente.

Se você busca ser um especialista em SEO já deve ter ouvido falar que o desempenho do website afeta seu posicionamento na SERP do Google. Essa discussão teve origem em 2010, quando o Google anunciou que passaria a usar o desempenho do site como um sinal em seus algoritmos de ranking. O motivo da inclusão se deve ao resultado de estudos internos da empresa, que indicaram que quando um site responde lentamente, os visitantes passam menos tempo nele. O efeito dessa decisão pode ser visualizado em um estudo conduzido em 2013, que indicou uma correlação entre a posição nas buscas e o tempo de resposta do primeiro byte (TTFB), como pode ser visto abaixo.

Média do tempo de First Byte por posição na página de pesquisa

Porém, a falta de clareza de como o Google usa as informações de desempenho em seus algoritmos conduz muitos desenvolvedores e analistas de SEO ao erro, ao fazerem testes que podem conduzi-los a caminhos opostos aos objetivos ou gastarem tempo excessivo otimizando métricas que geram pouco impacto. Todo mês converso com dezenas de pessoas realizando seus testes equivocadamente, por isso achei muito importante desenvolver esse artigo para ajudar outras pessoas que passam pelo mesmo problema.

Dessa forma, espere ver neste artigo os seguintes assuntos:

  • Cuidado com métricas que não te levam a lugar nenhum;
  • Você pode estar configurando as ferramentas de teste de forma errada;
  • Você não deve se contentar apenas com ferramentas de teste.

Preocupe-se com a experiência do usuário e não com métricas pontuais

Uma das métricas mais comentadas quando se trata de otimização de desempenho de páginas web é Load Time (tempo de carregamento total da página). Porém, a suspeita de que essa não seja uma métrica ideal começa com a mesma pesquisa citada acima que indicou correlação entre TTFB e a posição no ranking do Google, quando também indicou a inexistência de correlação entre o Load Time e o posicionamento, independente do método de cálculo.

Não foi fornecido texto alternativo para esta imagem

O próprio uso do TTFB como critério de indexação pelo Google foi negado no Twitter pelo conhecido integrante da empresa, John Mueller. Mas calma, isso não significa que a métrica ou o próprio desempenho não seja importantes. No mesmo tweet, ele afirma que o TTFB é um bom indicador para o desempenho sentido pelo usuário e, mais importante, “se você está focando em velocidade somente por razões de SEO, você está fazendo isso errado”.

Não foi fornecido texto alternativo para esta imagem

Portanto a dica está dada: o Google procura que você faça uma página que seja rápida na percepção do usuário e não uma página otimizada para métricas específicas. Se fizer isso, por consequência, isso impactará no SEO.

Neste artigo, o Google apresenta um bom framework de como analisar se uma página é rápida. Coloque-se no lugar do usuário e faça as seguintes perguntas durante a navegação:

  • A página está funcionando?
  • A página é útil?
  • A página pode ser usada?
  • A página é agradável?

A experiência do usuário se baseia no quão rápido essas perguntas são respondidas. Por isso o Load Time não é uma métrica precisa. O carregamento total é um evento simplório que ocorre após todas essas perguntas terem sido respondidas. Já o TTFB, apesar de não dever ser o foco, como ocorre antes e é um limitante para o tempo em que todos esses eventos acontecem, tem bastante uso na hora de debugar e entender onde estão alguns gargalos que comprometem a experiência de navegação.

Como visto acima, a experiência do usuário na navegação é um assunto que pode ser extenso, portanto, para não deixar este artigo extenso, publicaremos em breve outro artigo explorando como analisar se sua página oferece uma experiência rápida ao visitante. Quer ser notificado quando for lançado? Clique aqui.

Use as ferramentas de teste corretamente

Quando vejo pessoas procurando testar a performance de seus websites, a maioria usa o PageSpeed Insights, o GT-Metrix e em menor proporção, o Webpagetest.org. O grande problema reside na forma como os testes são feitos: muitos usuários não conhecem as limitações, configurações e funcionamento de cada ferramenta de teste, executam os testes nas configurações padrão e obedecem cegamente às recomendações dadas nos resultados, podendo tomar decisões que deixarão seus sites mais lentos para os usuários e não o contrário.

Por exemplo, você sabia que o PageSpeed Insights, muito provavelmente, executa seus testes em um servidor localizado fora do Brasil? A localização exata não é conhecida, mas já fizemos testes internos que deram indícios que os IPs de onde partiam as requisições dos testes apresentavam menor latência para a Flórida, nos EUA. Por causa disso, se seu website tiver audiência brasileira e seus servidores estiverem localizados no Brasil, você pode receber uma recomendação de reduzir o TTFB, mesmo que seu website ofereça uma resposta rápida aos visitantes.

Quer outro exemplo? O GT-Metrix executa seus testes, por padrão, de uma instância localizada em Vancouver no Canadá, causando o mesmo problema citado acima sobre o PageSpeed Insights, se você não configurar corretamente. E você sabia que o GT-Metrix não detecta todas as CDNs que existem?

Isso não significa que você não deva usar essas ferramentas, basta entender seu funcionamento corretamente. No caso do PageSpeed Insights, você pode usar seu algoritmo, o Lighthouse, em suas próprias instâncias de teste, podendo realizar os teste em condições de localização que simulem melhor a localização de seus usuários. Você pode inclusive fazer o teste de seu próprio navegador: a partir da versão 60, o Chrome disponibiliza o Lighthouseem suas ferramentas de desenvolvedor, localizado na aba “Audits”. Já o GT-Metrix permite, para usuários logados, escolher a instância de teste (uma delas é no Brasil) e configurar para que ele reconheça sua CDN, caso não seja detectada.

Não foi fornecido texto alternativo para esta imagem

O uso correto das ferramentas de teste também é um tema extenso e que merece ser abordado com atenção, por isso, lançaremos nos próximos dias publicaremos um guia de como aproveitar ao máximo as ferramentas de teste de desempenho. Clique aqui para receber em primeira mão.

Vá a campo

Por último, uma coisa precisa ser dita. Ferramentas de teste retratam apenas um pequeno pedaço da realidade sobre o desempenho de seu site. Diferentes usuários possuem diferentes dispositivos, navegadores, provedores de internet, localização, etc., o que faz variar bastante a experiência de um para outro. Elas são boas para fornecer um ambiente controlado para testar otimizações, mas existem formas mais apuradas de saber se seu site é realmente rápido.

W3C lançou há alguns anos a padronização para as APIs Navigation Timing e Resource Timing, uma interface a partir da qual webmasters podem consultar os tempos que o usuário experimentou em sua navegação pelo website. As versões mais novas da maior parte dos navegadores suportam essas APIs, permitindo a geração de dados de grande parte das visitas.

Existem algumas opções de ferramentas que exploram essa API. O PageSpeed Insights, por exemplo, oferece uma análise dos últimos 30 dias das métricas Primeira Exibição de Conteúdo e Atraso na Primeira Interação.

Como pode ser visto na imagem abaixo, as barras verdes indicam qual porcentagem dos usuário tiveram uma experiência considerada rápida, as barras laranja uma experiência média e as barras vermelhas, uma experiência lenta.

Não foi fornecido texto alternativo para esta imagem

Existem outras ferramentas mais completas para essa análise, denominadas Real User Monitoring (RUM), como o New Relic Browser e Pingdom. Elas oferecem a visão de diversas métricas do ponto de vista dos visitantes. Caso você não tenha orçamento para contratar essas ferramentas, o Google tem um artigo que introduz como começar a aferir os tempos de navegação reais usando as APIs Navigation Timing e Resource Timing.

Conclusão

Como você pode ver acima, não existe uma métrica chave de velocidade para otimizar o SEO de seu website. Como o próprio Google busca informar, se você oferecer uma boa experiência de navegação ao visitante, isso poderá impactar o seu ranking. E você só poderá otimizar essa experiência de forma efetiva olhando para as métricas corretas e fazendo as avaliações corretamente. Fique atento que em breve lançaremos dois artigos: um retratando quais as melhores métricas de velocidade com foco no usuário e como aferir corretamente a velocidade de um site.

Se estiver com pressa em otimizar, te convidamos a fazer um teste gratuito de nossa CDN. A partir dela, seu website será entregue aos usuários em servidores mais próximos, contribuindo para reduzir o tempo de carregamento da maioria dos elementos de sua página, o que melhora sensivelmente a velocidade percebida pelo usuário. Quando for se cadastrar, entre em contato, que teremos o prazer em ajudá-lo na configuração e a testar devidamente a evolução do desempenho. Conheça em: https://www.gocache.com.br/cdn-inteligente-brasil/.

Funil de Conversão: aplique esse conceito e melhore seus resultados

Funil de Conversão: aplique esse conceito e melhore seus resultados

Está querendo aprender sobre funil de conversão, mas acha diferentes conceitos pela internet?

 

Para quem já trabalha com marketing digital sabe que existem diversos nomes para os funis, as vezes associa-se o funil de marketing com o funil de vendas, o funil de vendas com o funil de conversão ou então todos os funis em um só.

 

A verdade é que realmente existem vários conceitos que podem deixar a gente confuso. E é por isso que criamos esse post para conceituar de vez o que é funil de conversão, suas etapas, como montá-lo e também dicas para conseguir os melhores resultados. Vamos lá?

O que é funil de conversão

Funil de conversão, são as etapas que um cliente passa desde a sua visita no site até a compra do serviço ou produto da sua empresa.

 

Essas etapas geralmente são definidas pelos nomes:

 

  • Lead (a primeira conversão de um usuário)
  • MQL ou Marketing Qualified Lead (quando esse lead se torna qualificado pela área de marketing)
  • SQL ou Sales Qualified Lead (quando esse lead se torna qualificado pela área de vendas)

 

Falaremos detalhadamente sobre essas etapas ainda nesse artigo, antes vamos desmistificar a diferença entre funil de conversão e o funil de marketing.

Diferença funil de conversão para o funil de marketing

Para poder diferenciar o funil de conversão do de marketing, vamos descrever o que é funil de marketing:

 

Funil de marketing são as etapas que representa toda a jornada do consumidor desde a sua descoberta do problema até a escolha de qual empresa ele vai contratar para resolver esse problema.

E o que é funil de conversão?

 

Já o funil de conversão são as conversões que o consumidor percorre até a compra da solução da sua empresa, ou seja, ele começa convertendo de visitante para lead até virar cliente após a etapa SQL.

 

A verdade é que o funil de conversão está dentro do funil de marketing, ele faz parte de todo esse caminho que um usuário percorre. Só é uma forma de acompanhar melhor como estão suas conversões em cada etapa.

 

Antes de pensar nas estratégias de conversão do seu funil (abordaremos no próximo tópico) é importante ter definido o seu público alvo e sua jornada de compra.

Etapas do funil de conversão e dicas

Agora que conseguimos diferenciar os conceitos e definir o que é funil de conversão, vamos detalhar cada etapa e as melhores dicas para otimizar suas conversões.

Lead

Lead por definição é um potencial cliente para sua empresa que manifesta interesse em adquirir a sua solução. Ele demonstra esse interesse fornecendo dados em algum formulário de material rico (e-book, infográficos, webinars, etc) ou newsletter da sua empresa.

 

Como escrevemos na própria definição, para um visitante converter em lead, sua empresa deve ter uma estratégia de conteúdo que desperte interesse para o visitante e convença-o de fornecer seus dados.

 

A nossa dica para melhorar a conversão nessa etapa é criar landing pages com as seguintes características:

 

  • Tire todas as distrações possíveis como menu, barra lateral ou rodapé para o visitante se manter focado em somente uma ação que é a conversão.
  • Escreva os títulos e conteúdos na “linguagem” do seu público alvo e com técnicas de copywriting
  • Use cores harmônicas seguindo a identidade da sua empresa e insira destaques com cores contrastantes
  • Solicite somente informações necessárias no formulário (evite pedir dados pessoais no nessa etapa de topo de funil, como documentos, salário, receita etc.) e faça um CTA chamativo focada no problema do seu público alvo.

 

Caso queira saber mais dicas de conversões de leads, você pode conferir o artigo completo taxa de conversão de leads

MQL (Marketing Qualified Lead)

Após o visitante entrar no funil de conversão pela etapa Lead, a maioria das empresas fazem uma estratégia de nutrição para fazê-los receber mais conteúdos e educá-los para percorrerem o funil de marketing (nesse caso de marketing mesmo, pois está relacionado a jornada do usuário como um todo).

 

Após o lead estar bem educado com os conteúdos, percorrer até o final do seu funil de marketing, ele pode ser considerado um lead que teoricamente já está pronto para comprar a sua solução.

 

Para empresas que tem um time de vendas, esse lead teoricamente está no momento certo para um vendedor entrar em contato.

 

Enfatizamos e repetimos a palavra “teoricamente”, pois para o marketing esse lead está qualificado (por isso a abreviação significa Marketing Qualified Lead).

 

Acontece que devemos ver na prática se realmente esse lead está qualificado, e é esse o trabalho do vendedor, entrar em contato para ver se o MQL realmente está qualificado para comprar a sua solução.

 

Já que a maior parte de uma estratégia nutrição de conteúdos é feita por e-mails (e essa é a ferramenta mais poderosa que você terá), vamos dar dicas de conversão relacionadas a e-mails:

 

  • Coloque assuntos chamativos e no contexto da etapa do lead
  • Use no máximo 45 caracteres no assunto do e-mail
  • Prenda a atenção do leitor usando números e também fazendo perguntas
  • Personalize o assunto do email colocando o nome do Lead
  • Faça o conteúdo do e-mail de forma objetiva e clara (você pode usar algumas dicas de landing page que ajudarão no conteúdo do e-mail)
  • Faça testes A/B para experimentar diferentes versões e melhorar o engajamento

 

SQL ou Sales Qualified Leads

Após o lead ser considerado um MQL, chegou o momento do time comercial validar se ele realmente está qualificado.

 

Algumas empresas fazem um departamento chamado de pré-vendas que são pessoas dedicadas somente para validar os MQLs e enviar o contato para o vendedor.

 

Pode ser que o lead não retorne o contato que o vendedor tente fazer, por isso, as nossas dicas para converter mais nessa etapa são:

 

  • Lembre-se que isso não é uma venda, você somente tem que conversar com o MQL para saber se realmente ele está qualificado para receber uma proposta.
  • Faça um fluxo de cadência com os tipos de contatos estabelecidos. Dificilmente um MQL irá responder no primeiro e-mail ou ligação, estabeleça um fluxo com vários contatos em um período de tempo para converter o SQL.
  • Não seja invasivo! A maioria das pessoas não gostam de ligação de telemarketing pelo motivo dos atendentes ligarem em uma hora inapropriada e sem permissão ficam querendo vender algo. A nossa dica é ligar para o MQL, pedir um melhor horário para conversar e explicar o motivo.

 

Se o MQL foi validado como qualificado, o time comercial aceita esse lead para poder entrar no funil de vendas e finalizar o processo para ele virar cliente.

Dica final para um funil de conversão

Esperamos que tenha tirado as suas dúvidas sobre o que é funil de conversão e conseguido o diferenciar do funil de marketing e vendas.

 

Quando o assunto é conversão poderíamos abordar muitos tópicos e metodologias para melhorar a taxa de conversão do seu negócio. O mais importante é estar sempre acompanhando suas taxas e testando novas estratégias para aumentar ainda mais suas conversões e vendas.

 

Esse conteúdo foi escrito pela Supersonic que é uma empresa focada em otimização de conversão (CRO) para trazer mais vendas para seus clientes sem gastar um centavo a mais com publicidade.

 

Como Otimizar meu Site? 1o. Otimizando Imagens e Fotos…

Por que otimizar meu site?

Sabemos que atualmente o tempo que seu site leva para carregar é algo muito importante, tanto para os mescanismos de busca (SEO), como o Google, como para a experiência do usuário na sua webpage. Uma pagina rápida é mais agradável e gera maior engajamaneto de seus visitantes.

Mas quais são os pontos mais importantes para Otimizar o seu site? Veja abaixo uma checklist dos itens que você sempre deve olhar. Iremos trabalhar cada um deles em diferentes artigos:

1) Otimizar Imagens (neste artigo)
2) Otimizar Scripts
3) Otimizar Hospedagem (próximos artigos)

Otimizando as Imagens:

Normalmente as imagens são a parte mais pesada no carregamento de um site e existem alguns principais pontos para você otimizar:

1) A resolução das imagens:

A imensa maioria dos monitores atuais utiliza a resolução de 1366×768 pixels, podendo chegar a até 1920×1080.
Em celulares isso é ainda menor: mesmo os celulares com displays do tipo “retina”, com altíssima resolução, utilizam o que chamamos de resoluções virtuais, que é a adaptação da resolução real para uma resolução que você conseguirá ver confortavelmente em uma tela pequena (você não conseguiria ler nada se seu celular apresentar as páginas com mais de 1000 pixels de resolução). Desta forma, a resolução virtual usada em celulares é de “somente” 360×640 pixels.

Então, qual é o sentido de colocar aquelas fotos da sua super câmera com 10 ou 20 megapixels?
Isso é algo por volta de 6000×3000 pixels… Essas fotos são enormes e não serão aproveitadas pelo monitor ou display do celular.

Por isso, antes de fazer upload, verifique que tamanho você quer suas fotos na tela. Se forem ocupar meia tela, pense em redimensioná-las para 600 pixels de largura. Se for tela inteira, 1200 ou 1500 pixels já é mais que suficiente.
Essa simples alteração na resolução poderá deixar suas imagens de 4 a 10 vezes menores, portanto, de 4 a 10 vezes mais rápidas para carregar.

2) Tipo de Imagens: Devo usar PNG ou JPG?

O dois formatos mais usados para exibir imagens em site são: JPG e PNG. Mas qual a diferença entre JPEG e PNG? Qual você deve usar e quando?

Resumidamente, fotos ou imagens complexas, com muitas cores, normalmente devem utilizar o formato JPEG, pois é o que consegue maior compressão nesses casos e com perdas pouco perceptíveis (O JPEG é um formato que admite alguma perda de qualidade para aumentar a compressão).

Já se você precisa de imagens com regiões transparentes ou com poucas cores chapadas, você deve optar pelo formato PNG, mais específico para esses casos, pois suporta transparências e não há perda de qualidade. Esse formato é muito utilizado, por exemplo, para Logotipos ou desenho simples.

Veja abaixo um teste com JPEG. A imagem original deste gatinho fofo, em minha câmera fotográfica, tem uma tamanho de 4 Megabytes, usando a resolução de 5000×3330 pixels.

Quando redimensionei a foto para o tamanho que desejo exibi-la na tela, ou seja, aprox.  500×333, eu já reduzi em 10 vezes sua largura e sua altura.
Em seguida, salvei a foto nos dois formatos para compararmos a qualidade e os tamanhos resultantes.

imagem gato sem otimizar
gato.PNG – 315KBytes
imagem gato otimizada
gato.JPG – 76KBytes

O formato .PNG gastou 315KBytes, ou seja, mais de 12 vezes menor que a foto no tamanho original. Já o formato JPEG gastou apenas 76KBytes, ou seja 50 vezes menos que a foto original!!!!

Acho que nem precisamos de mais argumentos, ficou claro que você deve usar o formato JPG nesse caso, não?

Agora vamos para nosso segundo teste. Vamos comprimir um logotipo.

Logo de início, se você precisar de áreas transparentes na sua imagem, obrigatoriamente deverá utilizar o formato PNG, pois o JPEG não suporta transparências. Mas vamos supor que utilizará seu logotipo em um site com fundo branco (ou outra cor simples), então poderia talvez utilizar o formato .JPG

Salvamos abaixo o mesmo logotipo nesses dois diferentes formatos. Veja os resultados:

imagem gocache sem otimizar
logo_gocache.JPG – 27KBytes
imagem gocache otimizada
logo_gocache.PNG – 19KBytes

Escolhemos um alto grau de compressão para o arquivo JPG, pra ver se ele conseguiria competir com o PNG. Isto não resolveu o problema de tamanho, pois o JPG continuou maior, e ainda piorou a qualidade da imagem (veja que está um pouco quadriculada e embaçada).

Já o PNG é um algoritmo LossLess, ou seja, sem perdas de qualidade da imagem e, mesmo assim, conseguiu comprimir muito mais que o JPG. Além disso, de brinde, pudemos utilizar o fundo transparente para nosso logotipo.

Mas vamos confessar, algumas vezes ainda não será claro qual formato utilizar, então se você tiver tempo tente os dois formatos, faça a recompressão como mostraremos na próxima seção, e escolha o que ficar melhor.

Veja, por exemplo, a imagem que chamamos de “panda” e que foi utilizada na próxima seção, inicialmente ficou menor usando .JPG, mas quando recomprimimos, a versão em .PNG foi a que venceu.

processo de otimizacao

3) Recompressão das Imagens:

Nos testes feitos acima, utilizamos o programa Photoshop para gravar as imagens nos formatos .JPG e .PNG, utilizando o algoritmo padrão de compressão, existente neste software.

No entanto, existem softwares específicos para comprimir imagens para a internet. Eles e conseguem recomprimir consideralvemente as imagems, pois utilizam algoritmos específicos e também removem qualquer informação desnecessária que esteja nos arquivos.

Veja os resultados que conseguimos com nossas imagens anteriores, utilizando o site http://tinypng.com

processo de compressao

Conseguimos reduzir ainda em 30% a nossa já super comprimida foto do gatinho laranja (JPG). E reduzimos em quase 3 vezes, ou seja, 300%, a imagem do logotipo da GoCache (PNG).

Como havíamos comentado, sempre que estiver em dúvida sobre usar PNG ou JPG, faça o teste com os dois. Sobre essa imagem acima, com o Panda, esperávamos que teríamos o melhor resultado utilizando o formato JPG. Isto até foi verdade quando salvamos no Photoshop, mas quando recomprimimos no TinyPNG, olhem só a surpresa: o PNG ficou muuuito menor.

png ou jpg

 

4) Evite carregar imagens que não serão exibidas:

Muitas vezes nossas página tem bastante conteúdo e, por isso, algumas imagens só são exibidas quando rolamos a página para baixo.

No entanto, mesmo que sejam raramente exibidas, as imagens que estão mais “pra baixo” no texto geralmente serão desnecessariamente carregadas. Isto deixa sua página lenta e gasta banda do seu servidor.

No entanto, pra evitar isso, existe uma técnica chamada Lazy Load, que só carrega as imagens quando eles forem realmente ser exibidas para seus visitantes.

Existem vários scripts na internet para fazer o Lazy Load de imagens. Dê uma procurada no Google por “Lazy Load” para saber mais!

 

5) Configurar a Cache das Imagens

Existe um recurso onde você consegue pedir para o navegador de seu visitante guardar as imagens de seu site em disco (cache). Desta forma, quando seu cliente voltar a visitar seu site, o navegador não precisará de baixar novamente as imagens, pois elas já foram armazenadas na última visita. Isso acelera muito o carregamento de um site.

Se o servidor web do seu site utilizar Apache, é bem simples configurar isto, bastando colocar as linhas abaixo no arquivo .htaccess, que fica na raiz da pasta onde estão seus arquivos de internet:

<filesMatch "\.(gif|jpg|jpeg|png)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</filesMatch>

6) Utilizar uma CDN

Por fim, um recurso que tem sido muito utilizado para otimizar sites, acelerando o carregamento das imagens, são as chamadas CDNs, ou Content Delivery Network.

Resumidamente, uma CDN é uma rede de computadores, espalhados pelo mundo, que armazenam o conteúdo do seu site (incluindo imagens) e, quando um visitante tentar entrar em seu site, será atendido por um computador mais próximo e mais rápido. Clique na imagem abaixo para entender melhor:

o que é cdn?

Além disso, as CDNs já configuram automaticamente recursos como Cache e Compressão de Imagem, para facilitar sua vida e otimizar seu site.

Veja esse artigo para saber em detalhes os benefícios que o uso de uma CDN trazem ao seu site.

 

Em breve a segunda parte desta série, otimização de scripts!