A velocidade da sua loja como diferencial competitivo :10 dicas

1. A experiência do usuário2. Como funciona seu cérebro?3. Como funciona seu Browser?4. Métricas para avaliação de velocidade.5. Quem é o Culpado?6. Velocidade como oportunidade7. Ferramenta: Ping don 8. Ferramenta: Speedtools9. Ferramenta: Webpagetools10. Otimização para Imagens, JS e CSS

A experiência do usuário

47% dos internautas não irão esperar mais do que

três segundos para o carregamento de um site, em 2006 o tempo era de quatro segundos.

A experiência do usuário

Compradores se tornam desatentos em sites lentos,

14% mudam de loja e 23% desistem da compra

A experiência do usuário

A cada ano a velocidade da

WEB aumenta e os sites carregam

mais rápido?

A experiência do usuário

A cada ano a velocidade da WEB aumenta e os sites carregam mais rápido?

Em geral as lojas ficaram mais lentas.

Não!

A experiência do usuário

A cada ano a velocidade da WEB aumenta e os sites carregam mais rápido?

Estudo com os 2000 top Retail sites USA

2011 -> 5.94sec

2012 -> 6.50secTOP 100 >> 7.14sec

TOP 100 >> 100 files

As stores estão

9% mais lentos do que em 2011

Como funciona seu cérebro?

1. Como funciona seu cérebro

Como funciona seu cérebro?

Como funciona seu Browser?

Métricas para avaliação de velocidade.

Velocidade de carregamento da loja no browser

•tempo que demora do momento que seu cliente clica em um link ou digita o endereço do seu site no browser e este faz a solicitação no servidor para o envio dos arquivos do site

• Assim que o browser começa receber os arquivos ele organiza visualmente os códigos no formato da interface que o cliente utiliza para navegar na sua loja.

Métricas para avaliação de velocidade.

Quantidade de arquivos enviados para browser do seu cliente

Quando o browser monta a interface da sua loja para o cliente, o html para renderizar o site na tela envia arquivos de imagens( Gif, PNG e JPG), java script / Jquery e CSS para o computador de onde se esta acessando a loja. Quanto maior números de arquivos enviados para o cliente mais tempo a sua loja levará para carregar.

Métricas para avaliação de velocidade.

- Quantidade em bytes dos arquivos da sua lojaSoma total em bytes dos arquivos incluindo Html, imagens, css, javascript/jquery, Flash e etc

Métricas para avaliação de velocidade.

Menos arquivos:SpritesCSS únicoJS único

Menos bytes:MinifyJS e CSS

Compactação de imagens

Velocidade como oportunidade

Use as métricas para cobrar:Sua equipeSua AgênciaSua Plataforma de EcommerceSeu Host

Velocidade como oportunidade

Velocidade como oportunidade

Qual a oportunidade?

04>Ferramentas: GOOGLE PAGE SPEED

04>Ferramentas: PingDOM.com

04>Ferramentas: PingDOM.com

04>Ferramentas: Webpage.org

Staples USA X Staples Br

Cameras de segurança X Walamart

Otimização para Imagens, JS e CSS

Otimize o tamanho das suas imagens, reduza sempre que for possível em kbytes os banners da loja. Caso esteja usando pngs, aplique neles ferramentas como compactadores, assim é possível reduzir o tamanho em até 70% destes arquivos.

Um ponto importante é a utilização de SPRITES, eles podem parecer trabalhosos para os desenvolvedores na hora da criação ou manuntenção da sua loja. Mas ao se trabalhar com sprites é reduizido em muito o número de requisição de arquivos ao servidor, fator importante de sucesso na redução da quantidade de requisição de arquivos.

Otimização para Imagens, JS e CSS

Jquery, CSS e HTML – Após o desenvolvimento da codificação destes arquivos é possivel reduzir seu tamanho em até 40%, como? Simplesmente aplicando neles aquivos que chamados minificadores, eles retiram espaços em branco e códigos que não são necessários.

Agora sobre quantidade de arquivos, menos será sempre mais. Então no desenvolvimento da sua loja aponte como meta para o fornecedor de plataforma esta seu pre requisito, e assim ele deverá construir um único arquivo CSS contendo todos os estilos do site. Solicite também que quando for necessário a utilização de Jquery ou Javascripts que estes sejam agrupados em um único arquivo e que sejam escolhidas bilbliotes Jquery já compactadas.