Torne seu site mais rápido e venda mais

(1)

Torne seu site mais

rápido e venda mais

Descubra como criar uma estratégia de aceleração de sites

que deixe seu site mais rápido e aumente sua conversão

(2)

UAIZO

A Uaizo ajuda a sua empresa a definir a es-tratégia ideal de aceleração para o seu site e possui a tecnologia Edgecast de distribuição de conteúdo. A Edgecast é a solução de distribuição de conteúdo mais rápida e confiável do mundo. Contamos com um time de especialistas em infra estrutura que garantem que a implementação da melhor solução, com suporte 24 horas por dia e 7 dias da semana.

(3)

01

Introdução

06

Como o tempo de car-regamento pode afetar o seu negócio?

...

08

Como um site mais rápido pode me ajudar a alcançar um melhor posicionamento no Google? ...

09

O desafio ...

10

Resumo do capítulo

03

Como descobrir qual a melhor solução para o seu site

26

Performance ...

27

Funcionalidades disponíveis ...

28

Atendimento ...

29

Preço

04

Conclusão

30

Resumo do conteúdo ...

Acesse nosso blog

02

Ferramentas disponíveis

12

O que é CDN ...

13

Por dentro de uma página web ...

14

É possível diminuir o tempo de carrega-mento do conteúdo dinâmico? ...

16

Para o desenvolvedor! ...

17

Sua página desenvol-vida pelo melhor pro-gramador do mundo ...

19

Para o desenvolvedor! ...

20

O caminho entre o usuário e o site ...

21

Porque aumentar a banda e o número de servidores não é sufi-ciente?

...

23

Resumo do capítulo ÍNDICE

(4)

Introdução

01

(5)

Esteja você no banco, no trânsito ou até mesmo em momentos de lazer, como na fila do cinema, a verdade é que você odeia esperar. O mesmo comportamento acon-tece quando navegamos na web. Um estudo realizado pela Forrester aponta que 47% dos visitantes esperam que uma página da web carregue em 2 segundos ou menos, e 40% abandonam o site se o tempo de carrega-mento demorar mais que 3 segundos. O mesmo estudo aponta que os consumidores associam o tempo de carregamento com a percepção de credibilidade e quali-dade da marca: 27% aponta que um site lento deixa-os mais propensos a visitar um concorrente.

Tempo de carregamento ideal Demora de 3 segundos Sites lentos

2 segundos ou menos Abandono da página 27% visitam o concorrente

Torne seu site mais rápido e venda mais

06

Introdução

(6)

Google

Cada 500 milisegundos de lentidão equivale a uma redução de

20% na receita de anúncios.

Microsoft Bing

Cada 2 segundos de lentidão equivale a uma diminuição de 2,5%

nas consultas e nos cliques em geral.

Amazon

Cada 100 milisegundos a mais para carregar uma página (1/10 de

segundo) pode significar 1% a menos em receita.

Yahoo!

Uma melhoria de 400 milisegundos no carregamento configura

9% de aumento de tráfego.

Os usuários esperam que os sites carreguem rápido, e isso você já sabe. Mas o que talvez você não saiba é o impacto que um site lento pode ter no seu faturamento. Pesquisas apontam que cada segundo a mais de demo-ra pademo-ra carregar uma página impacta em 10% a menos em conversões.*

Alguns dos maiores sites do mundo analisaram a rela-ção significativa entre tempo de carregamento dos sites e sua receita.

Como o tempo de carregamento

pode afetar o seu negócio?

Sites são criados para envolver os usuários de alguma forma e convertê-los em usuários ativos. Seja para divul-gar uma empresa, distribuir conteúdo, realizar cadastros em formulários de contato, vender online ou qualquer outra forma de conversão, seu site precisa ser rápido se deseja alcançar os objetivos do negócio.

06

Introdução

(7)

Todos esses números nos apontam para o cenário atual da web. Um cenário onde não podemos mais culpar a internet discada pela lentidão do site. O Brasil possui um índice de 8,6 acessos por 100 habitantes, 67º lugar de penetração da banda larga fixa entre 177 países**. Um cenário onde existe tecnologia disponível para ace-lerar o carregamento das páginas. E principalmente, um cenário onde o tempo de carregamento de um site não é algo abstrato que apenas profissionais especializados conseguem notar.

07

Introdução

contato@uaizo.com

*Fonte: Edgecast

(8)

Como um site mais rápido pode

me ajudar a alcançar um melhor

posicionamento no Google?

Por meio de um algoritmo que envolve uma série de fatores o Google classifica os resultados de busca de acordo com a relevância que a página terá para o usuário. Recentemente o Google anunciou que o tempo de carregamento é um dos fatores avaliados para clas-sificar a relevância dos sites.

Nada mais natural tendo em mente que o Google tem como objetivo primordial a satisfação do usuário, e, como já apontado anteriormente, a experiência do usuário está ligada diretamente ao tempo de carrega-mento das páginas.

08

Introdução

(9)

O desafio

S

e o tempo de carregamento dos sites é um ponto cru-cial no aumento da receita e, como falaremos ao longo desse ebook, existe tecnologia disponível, provavel-mente a tendência é que os sites estejam cada vez mais rápidos não é mesmo? Na realidade o que vem acon-tecendo é o contrário disso. Um estudo realizado pela Radware revelou que 22% dos sites de varejo ficaram mais lentos em 2012, demorando em média 7,25 segun-dos para carregar, enquanto em 2011 demoravam em média 5,94 segundos.

A verdade é que os usuários são exigentes quando se trata de tempo de carregamento dos sites, mas o nível de exigência não se esgota aí. A expectativa também está em torno do nível de interatividade do site, perso-nalização, imagens em alta qualidade, vídeos em HD. E todos esses recursos aumentam drasticamente o tama-nho e a complexidade das páginas da web

.

www.siteanos90.com.br www.site2003.com.br

website anos 90 website 2003 website 2013

www.site2013.com.br

T

09

Introdução

(10)

A importância de um rápido carregamento

do site:

• Os usuários tem altas expectativas em

relação ao tempo de carregamento dos

sites

• Sites lentos são mal vistos pelos usuários

• Sites lentos convertem menos

• Sites lentos são mal vistos pelo Google

• Recursos como vídeos e imagens em alta

qualidade tornam os sites mais pesados e

difíceis de serem carregados.

(11)

02 Ferramentas

disponíveis: o desafio

em busca de solução

(12)

O que é CDN

CDN, ou Content Delivery Network, consiste em uma rede de distribuição de conteúdo, como o próprio nome já diz. Um sistema de servidores distribuídos em pon-tos estratégicos ao redor do mundo, salvam uma cópia do conteúdo dos sites em cache. Desse modo, toda vez que uma página é carregada a distância que o conteúdo precisa viajar é minimizada, e assim, o tempo de carre-gamento para o usuário final é otimizado.

Vamos citar um exemplo. Suponhamos que um site que não possui CDN receba uma visita de um usuário de Florianópolis e seu servidor esteja localizado em Boston. Desse modo, o conteúdo precisa viajar a distância de Boston a Florianópolis para responder a cada solicitação desse usuário.

Se esse site tiver um CDN, os pedidos desse usuário serão encaminhados para o servidor mais próximo e rápido. Desse modo, o servidor iria disponibilizar o conteúdo do seu datacenter de São Paulo, por exemplo. Isso minimiza o tempo de carregamento e os possíveis problemas de conexão. Podemos afirmar que CDN’s são verdadeiras vias expressas que pegam um caminho melhor e mais rápido para fugir do trânsito da web.

(13)

Por dentro de uma página web

A maioria dos sites são constituídos por dois tipos de conteúdo: conteúdos estáticos e dinâmicos. Conteúdo estático é aquele que não é alterado constantemente: imagem, flash, mídia, javascript, CSS,etc. Já o conteúdo dinâmico é alterado constantemente, como feed de notícias, ou também onde há interações dos visitantes, como fóruns e carrinhos de compras de e-commerces. Em geral os sites são constituidos majoritariamente por

conteúdo estático, e o CDN torna possível armazenar em cache esses conteúdos que não mudam e são solicita-dos com frequência pelos usuários. Com isso se evita, por exemplo, que toda vez que algum usuário entrar em um e-commerce todas as imagens dos produtos pre-cisem ser carregadas, o que tornaria o site mais lento e sobrecarregaria os servidores.

13

Ferramentas disponíveis: o desafio em busca de solução

(14)

É possível diminuir o tempo de

carregamento do conteúdo dinâmico?

Como o conteúdo dinâmico muda frequentemente ele não pode ser salvo em cache, consequentemente ele não será acelerado pelo CDN, certo? Na realidade o con-teúdo dinâmico muda frequentemente, mas sua mudan-ça pode ser previsível. Podemos citar 3 tipos de html, que se caracterizam por diferentes tempos de mudanças das páginas.

• HTML que consiste em um conteúdo igual para todos os usuários e que se altera com pouca frequência. A página de detalhes de um produto em e-commerces geralmente se altera com pouca frequência e por isso é possível configurar um tempo de cache mais longo. • HTML que consiste em um conteúdo igual para todos

os usuários e que se altera com muita frequência. Por exemplo, a home de um portal de notícias é igual para todos os usuários mas precisa ser atualizada com frequência, sempre que houver uma nova notí-cia. Nesse caso é necessário configurar um tempo de

cache mais curto, como por exemplo, de 2 minutos.

• HTML que consiste em um conteúdo específico para cada usuário. Um carrinho de compras em um e-commerce por exemplo é diferente para cada usuário, e por isso, apesar de ser possível, há pouco

ganho em salvar esse tipo de conteúdo em cache.

14

(15)

Entendemos portanto, que por mais que um site so-fra alterações constantes é possível salvá-lo em cache programando a atualização para 1 em 1 hora ou até de minuto a minuto. Se nesse 1 minuto 100 usuários carregarem o site ele precisará ser carregado apenas uma vez. Na primeira vez que um usuário entrar no site ele será carregado e salvo em cache. Todos os demais usuários irão visualizar aquele conteúdo salvo, elimi-nando a necessidade de carregamento. Isso torna o site mais rápido para os usuários e economiza o gasto com link no servidor.

Além disso, nem todo o conteúdo da página é dinâmi-co. Provavelmente o logotipo da empresa, o rodapé, o menu e outros elementos não mudam e também podem ser salvos em cache para assegurar um carregamento mais rápido da página.

Há alguns anos atrás não existiam CDN’s que permitiam configurar o tempo de carregamento do cache, o que impedia que o conteúdo dinâmico fosse acelerado. Além disso, não era possível escolher quais elementos da pá-gina seriam salvos em cache, o que impossibilitava que os elementos estáticos fossem salvos em páginas que continham conteúdo dinâmico. Nem todas as empresas que comercializam CDN possuem essas ferramentas de personalização, mas são elas que permitem que grande parte do conteúdo dinâmico seja carregado muito mais rápido.

15

contato@uaizo.com

Todos os demais

usuários irão

visual-izar aquele conteúdo

salvo, eliminando a

necessidade de

car-regamento. Isso

tor-na o site mais rápido

para os usuários e

economiza o gasto

com link no servidor.

(16)

O modo como os sites são programados pode tornar o carregamento do conteúdo estático mais rápido. Lista-mos aqui alguns pontos que devem ser considerados pelo desenvolvedor:

O ideal é que na troca de imagens ou arquivos estáticos o nome do arquivo também seja alterado, o que não obriga o sistema a expirar o cache da imagem sempre que houver alteração e permite o uso de cache no nave-gador.

A quantidade de arquivos CSS e Javascript afeta o tem-po de carregamento da página, tem-por isso o ideal é usar o menor número de arquivos possível. O carregamento de 10 arquivos de 10k é mais lento que o carregamento de 1 arquivo de 100k.

Para otimizar o carregamento das páginas é recomen-dado que o conteúdo estático esteja em um domínio diferente que o conteúdo dinâmico. Desse modo, é pos-sível aplicar uma regra de configuração do CDN para o domínio estático diferente do domínio dinâmico. Por exemplo, o domínio estático terá um tempo de cache de 3 em 3 dias e o domínio dinâmico um tempo de cache mais curto, de 1 em 1 minuto por exemplo. Alguns CDN’s conseguem, no entento, resolver isto automatica-mente.

É possível fazer a programação de modo que áreas da página que se alteram com mais frequência utilizem re-quisições separadas, via ajax. Desse modo, por exemplo, a página de detalhes de um produto em e-commerces poderia ter as áreas de avaliações e preço carregando via ajax. Assim, todo o conteúdo poderia ser configu-rado com um tempo de cache de meses (pois quase não se altera), enquanto o preço seria cacheado de 1 em 1 minuto e as avaliações de 3 em 3 horas.

Para o desenvolvedor!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

(17)

Sua página desenvolvida pelo melhor

programador do mundo

Já apresentamos acima o CDN, uma solução que torna possível acelerar os sites ao salvar em cache o conteúdo estático e parte do conteúdo dinâmico. Mas ainda existe aquele html que consiste em um conteúdo específico para cada usuário, e esse não consegue ser salvo em cache. Como então otimizar o carregamento desse tipo de conteúdo? Além disso, existe alguma outra forma de acelerar o carregamento do conteúdo estático?

No desenvolvimento dos sites vários elementos que passam despercebidos para os programadores podem fazer com que o carregamento das páginas demore mais. Uma aplicação de otimização de páginas, ou Google Page Speed como é mais conhecida, é capaz de interpretar a estrutura das páginas e realizar otimi-zações inteligentes no conteúdo com base nas melhores práticas de programação do mundo. Essas otimizações aceleram consideravelmente o carregamento tanto do conteúdo estático como do conteúdo dinâmico. A acele-ração de páginas consegue tornar mais rápido inclusive o carregamento de conteúdos que não são salvos em cache.

17

(18)

Para e-commerces, sites em que a conversão implica a finalização de uma compra, o uso de tecnologias de aceleração de páginas pode garantir uma excelente experiência do usuário ao tornar o carregamento muito mais rápido. Você não quer que seu cliente abandone o carrinho na boca do caixa devido a uma fila extensa, não é mesmo?

18

(19)

Listamos aqui algumas otimizações que o Page Speed faz na página, tornando o tempo de carregamento dos sites mais rápido:

O Page Speed analisa todas as imagens para garantir que elas estejam realmente com o menor tamanho possível. Caso as imagens possam ser diminuídas sem perda de qualidade, ele corrige os arquivos automat-icamente, para não depender de um designer atualizar todas as imagens do site para o tamanho ideal.

O Page Speed compacta os arquivos Javascript e CSS, diminuindo o número de arquivos, o que torna o car-regamento mais rápido. (Lembre-se: o carcar-regamento de 10 arquivos de 10k é mais lento que o carregamento de 1 arquivo de 100k.)

O Page Speed otimiza os arquivos Javascript e CSS ao retirar as funções não utilizadas, o que além de tornar o arquivo menor possibilita que o browser renderize a página mais rápido.

O Page Speed reorganiza o html, de modo que o brows-er consiga desenhar a parte de cima do site mais rápido, seguindo o fluxo de navegação do usuário. Ou seja, desse modo, o topo do site será carregado mais rápido e para o usuário o carregamento será mais rápido.

Para o desenvolvedor!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Existem mais

al-gumas dezenas

de otimizações.

Para mais

deta-lhes,

clique aqui

.

(20)

O caminho entre o usuário e o site

Toda vez que um usuário carrega uma página, o con-teúdo viaja pela web e precisa atravessar uma série de servidores intermediários. Ao passar por esses servi-dores o conteúdo pode experimentar problemas que gerariam atrasos no carregamento do site para o usuário final.

Como o CDN armazena o conteúdo em cache, ele não precisa passar por todo esse caminho quando o usuário entra no seu site. Assim, além de reduzir consideravel-mente a distância que o conteúdo precisa viajar para chegar ao usuário final, o CDN reduz o número de saltos entre servidores, eliminando os gargalos que atrasam a comunicação.

(21)

Porque aumentar a banda e o número

de servidores não é suficiente?

Quando o site apresenta problemas de lentidão, é muito comum que as empresas comprem mais servidores e uma banda mais larga, que consequentemente su-portam um maior número de acessos. Com um plano melhor seu site pode até suportar um maior volume de tráfego, mas como volume suportado ainda é fixo e o número de usuários que trafega no site variável, você está apenas adiando o problema.

Esta solução não é suficiente, e sequer pode ser vista como a mais econômica. Ao pagar por um servidor ro-busto ou um link maior, normalmente esta capacidade é superior ao que o site utiliza no dia a dia. Ou seja, é um desperdício de recursos. Ainda assim, quando houve-rem picos de acesso há grandes chances do site cair por ultrapassar aquilo que foi contratado. O ideal portanto é pagar pelo volume de tráfego e não pelo tamanho do link, e por um serviço que ofereça banda ilimitada, como é o caso do CDN.

21

contato@uaizo.com

Ao pagar por um

servidor robusto ou

um link maior,

nor-malmente esta

ca-pacidade é superior

ao que o site utiliza

no dia a dia. Ou seja,

é um desperdício de

recursos

(22)

O outro ponto que causa lentidão nos sites é a existên-cia de gargalos entre os servidores que o conteúdo percorre para comunicar o usuário ao servidor do site. Ao atravessar uma série de servidores intermediários, o conteúdo pode pode enfrentar problemas na entrega em cada um deles, gerando atraso no carregamento do site. Esse problema facilmente resolvido com o uso de um CDN que salva o conteúdo em cache eliminando a dis-tância que o conteúdo precisa viajar para chegar ao usuário final, persiste quando o site aumenta a largura do link no servidor. Afinal, uma banda mais larga não elimina a necessidade de percorrer esse caminho toda vez que a página for carregada.

22

contato@uaizo.com

Ao atravessar uma

série de servidores

intermediários, o

conteúdo pode pode

enfrentar problemas

na entrega em cada

um deles, gerando

atraso no

carrega-mento do site.

(23)

CDN é uma rede de distribuição de conteúdo que salva cópias dos arquivos do site para garantir que o site carregue através do servidor mais próximo e rápido do usuário.

É possível utilizar CDN para acelerar páginas que possuem conteúdo dinâmico. Para isso é necessário configurar o tempo de cache e apontar elementos estáticos da página que podem ser salvos em cache. O Page Speed faz a otimização das páginas com base nas melhores práticas de programação do mundo, garantindo um carregamento ainda mais rápido.

O CDN reduz o número de saltos entre servidores, eliminando os gargalos que atrasam a comuni-cação.

Dar um upgrade do servidor não é suficiente para acelerar o site, além de não ser a solução mais econômica.

(24)

Como descobrir qual a

melhor solução para o

seu site

(25)

Você já está familiarizado com as soluções de aceleração de sites e agora está se perguntando como saber qual a tecnologia ideal, e ainda, qual a melhor opção para o seu caso. Existe uma série de perguntas que precisam ser respondidas antes de contratar qualquer serviço. Seu site possui predominantemente arquivos estáticos? Ou o seu gargalo está no carregamento de conteúdos dinâmicos? Você precisa de suporte 24 horas? Seu su-porte precisa falar português? O ideal agora é listar suas necessidades e para ajudá-lo organizamos esse pro-cesso dividindo seus requisitos em quatro categorias: performance, recursos, atendimento e custos.

25

Como descobrir qual a melhor solução para o seu site

(26)

Performance

Se o objetivo é tornar seu site mais rápido, você precisa avaliar a velocidade em que o CDN entrega os arquivos para os usuários finais.Além disso, a solução de acelera-ção já apresentada no e-book é fundamental. A otimiza-ção dos elementos da página auxilia um carregamento muito mais rápido.

Uma forma de avaliar o serviço é realizar alguns testes de desempenho para que você tome a decisão com base na performance do CDN nas condições reais do seu site. No site www.webpagetest.org você consegue executar um teste de velocidade gratuito alterando as variáveis (localização do usuário e browser utilizado) para visu-alizar as velocidades reais de conexão com os seus usuário

26

(27)

Funcionalidades disponíveis

É necessário observar o conteúdo do site para identificar o que o CDN deve ser capaz de fazer.

HTTPS:

seu site é seguro? E-commerce ou quaisquer outros sites que tenham áreas de usuários precisam de um ambiente seguro, por isso é importante que o CDN consiga salvar em cache as páginas em https.

Aceleração de páginas:

seu site tem muito conteúdo dinâmico específico para cada usuário? Em qualquer site que possui uma área particular do usuário o page speed, ou aceleração de páginas, é muito importante pois é o único recurso que consegue efetivamente acelerar esse conteúdo.

Ferramentas de customização:

em sites que pos-suem muito conteúdo dinâmico é fundamental que o CDN ofereça ferramentas de customização que permi-tam a definição do tempo de cache e de quais elementos da página deverão ser salvos em cache.

Relatórios:

relatórios analíticos são sempre importan-tes para que você saiba o desempenho do site e detecte problemas que precisam ser corrigidos. Qual o tipo de ferramenta analítica o CDN possui? As ferramentas são fácei de usar?

27

(28)

Atendimento

Um bom atendimento e suporte é fundamental, princi-palmente se tratando da área de TI na qual você pode precisar do conhecimento e disposição dos prestadores de serviço.

Diagnóstico:

se sua empresa não possui uma área de TI com alto conhecimento sobre o assunto é interes-sante que você procura um fornecedor de CDN que ofer-eça serviço de diagnóstico para te ajudar a encontrar a melhor solução.

Disponibilidade:

a maioria dos sites, como e-com-merces por exemplo, precisam de um suporte 24/7/365, afinal se o seu site cair no final de semana pode resultar em um grande prejuízo. Se esse é o seu caso é funda-mental que seu fornecedor de CDN ofereça atendimento full time.

Sinergia:

como qualquer serviço contratado é impor-tante que você tenha sinergia com o fornecedor para que haja um bom relacionamento, e que o mesmo seja baseado em confiança de ambas as partes.

28

(29)

Preço

As soluções de aceleração de sites (CDN e Page Speed) possuem o melhor custo/benefício quando se trata de tornar o site mais rápido. Clientes que utilizam essas tecnologias observam uma melhora de até 5 vezes na performance do site, o que como já dito anteriormente reflete diretamente no aumento da receita.

A utilização do CDN também diminui consideravel-mente os gastos com servidores, pois eles suportam a maioria do tráfego dos sites. Assim sendo, torna-se desnecessária a contratação de uma banda larga e você passa a pagar por aquilo que realmente usa.

Empresas fornecedoras de CDN cobram por gigabyte, ou seja, a cobrança é feita de acordo com a quantidade de Bytes que o site trafegou. Normalmente, os sites se comprometem com um valor mensal baseando-se na quantidade de gigabyte que costumam utilizar. Em casos de gasto inferior ao comprometido o site paga o que comprometeu, e caso gaste mais paga o excedente. Esse valor combinado permite uma negociação com o fornecedor que diminui o valor por gigabyte.

29

contato@uaizo.com

Clientes que utilizam

essas tecnologias

ob-servam uma melhora

de até 5 vezes na

performance do site,

o que como já dito

anteriormente

re-flete diretamente no

aumento da receita.

(30)

Conclusão

04

(31)

Nesse ebook, passamos pelos principais pontos para que você possa conhecer ferramentas disponíveis para deixar seu site mais rápido e aumentar sua conversão. Passamos pelos principais conceitos para que você possa planejar sua estratégia de aceleração de sites com o máximo de segurança e conhecimento. Agora está em suas mãos. Que tal melhorar tornar seu site mais rápido, melhorar a experiência do usuário e ver de perto as consequências de um site mais ágil? Entre em contato com a Uaizo e conheça nossas soluções, será um prazer acessorá-lo e acompanhar a sua evolução. No nosso blog apresentamos diversos conteúdos sobre acelera-ção de sites, não deixe de conferir.

Torne seu site mais rápido e venda mais contato@uaizo.com

31 Conclusão