Experiência do cliente - Performance como vantagem competitiva

Experiência do clientePerformance como vantagem competitiva

Objetivo da conversa: Acabar com a inveja

A loja do meu

concorrente é

mais rápida!

Objetivo da conversa: Direcionar a raiva!

Quem é o maior

culpado?

Plataforma?TI?

Agência?Designers?

A velocidade da sua loja como diferencial competitivo :10 dicas

1. A experiência do usuário e a perfomace da loja?1. Expectativa X Realidade2. Como funciona seu cérebro?3. Como funciona seu Browser?4. As três métricas para avaliação de velocidade

2. Metodologia Profite de análise?1. Matriz Profite de análise2. Aplicação da Matriz 3. Velocidade como oportunidade4. Aplicação com case da platéia

3. Ferramentas para avaliação: 1. Ping don 2. Speedtools3. Webpagetools

4. Conclusão Otimização Front-end1. HTML / CSS / JS / Imagens2. Interface

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?

As três métricas para velocidade

Tempo de carregamentoQuantidade de arquivosSoma total de bytes

Use as métricas para cobrar:

Sua equipeSua AgênciaSua Plataforma de EcommerceSeu Host

AS 03 Métricas para avaliação de velocidade.

tempo de carregamento da loja no browser

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.

AS 03 Métricas para avaliação de velocidade.

Quantidade de arquivos enviados para browser do seu cliente

Quanto maior números de arquivos enviados para o cliente mais tempo a sua loja levará para carregar.

AS 03 Métricas para avaliação de velocidade.

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

Velocidade como oportunidade

Qual a oportunidade?

Velocidade como oportunidade

Velocidade como oportunidade

Velocidade como oportunidade

As três ferramentas para avaliação de performance

Avaliação detalhada

Por ArquivosQualidade de códigoComparação entre playersPor notas e visuais

04>Ferramentas: GOOGLE PAGE SPEED

04>Ferramentas: PingDOM.com

04>Ferramentas: Webpage.org

Soluções simples :

Menos arquivos:SpritesCSS únicoJS único

Menos bytes:MinifyJS e CSS

Compactação de imagens

Usabilidade : Planejamento de usabilidade ( Agência / Criação)

Desenvolvimento: menos arquivos

Sprites :

Unificar as imagens que se repetem na loja em um arquivo único.

CSS únicoJS único

Desenvolvimento: menos bytes

http://javascriptcompressor.com/

http://jsbeautifier.org/

http://www.csscompressor.com/

http://jsbeautifier.org/