O documento fornece 10 dicas sobre como a velocidade da loja online pode ser um diferencial competitivo, enfatizando a importância da experiência do usuário. Estipula que a maioria dos internautas não espera mais de três segundos pelo carregamento e ressalta a necessidade de otimização de imagens, JS e CSS para melhorar a performance. Além disso, sugere ferramentas como Pingdom e WebPageTest para avaliação da velocidade do site.

6. A velocidade da sua loja como diferencial competitivo :10 dicas
1. A experiência do usuário
2. 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 oportunidade
7. Ferramenta: Pingdon
8. Ferramenta: Speedtools
9. Ferramenta: Webpagetools
10. Otimização para Imagens, JS e CSS

7. A experiência do usuário
47% dos internautas nãoirão esperar mais do que três
segundos para o
carregamento de um site, em 2006 o tempo era de quatro segundos.

8. A experiência do usuário
Compradores se tornam desatentos em sites lentos,
14% mudam de loja e 23% desistem da compra

9. A experiência do usuário
A cada ano a
velocidade da
WEB aumenta e
os sites carregam
mais rápido?

10. A experiência do usuário
Não!
A cada ano a velocidade da
WEB aumenta e os sites
carregam mais rápido?
Em geral as lojas ficaram mais lentas.

11. A experiência do usuário
Estudo com os 2000 top Retail sites USA
A cada ano a velocidade da
WEB aumenta e os sites
2011 -> 5.94sec carregam mais>> 7.14sec
TOP 100 rápido?
2012 -> 6.50sec TOP 100 >> 100 files
As stores estão
9% mais lentos do que em 2011

12. Como funciona seu cérebro?

13. Como funciona seu cérebro?
1. Como funciona seu cérebro

14. Como funciona seu Browser?

15. 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.

16. 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.

17. Métricas para avaliação de velocidade.
- Quantidade em bytes dos arquivos da sua loja
Soma total em bytes dos arquivos incluindo
Html, imagens, css, javascript/jquery, Flash e
etc

18. Métricas para avaliação de velocidade.
Menos arquivos: Menos bytes:
Sprites MinifyJS e CSS
CSS único Compactação de
JS único imagens

19. Velocidade como oportunidade
Use as métricas para cobrar:
Suaequipe
SuaAgência
SuaPlataforma de Ecommerce
Seu Host

20. Velocidade como oportunidade

21. Velocidade como oportunidade
Qual a
oportunidade?

22. 04>Ferramentas: GOOGLE PAGE SPEED

23. 04>Ferramentas: PingDOM.com

24. 04>Ferramentas: PingDOM.com

25. 04>Ferramentas: Webpage.org
Cameras de segurança X Walamart
Staples USA X Staples Br

26. Otimização para Imagens, JS e CSS
Otimizeotamanho das suasimagens, reduzasempreque for possívelemkbytesos banners daloja.
Casoestejausandopngs, apliquenelesferramentascomocompactadores,
assimépossívelreduzirotamanhoematé 70% destesarquivos.
Um pontoimportanteé a utilização de SPRITES,
elespodemparecertrabalhososparaosdesenvolvedoresnahoradacriaçãooumanuntençãodasualoj
a. Masao se trabalhar com sprites éreduizidoemmuitoonúmero de requisição de
arquivosaoservidor, fatorimportante de sucessonareduçãodaquantidade de requisição de
arquivos.

27. Otimização para Imagens, JS e CSS
Jquery, CSS e HTML –
Apósodesenvolvimentodacodificaçãodestesarquivosépossivelreduzirseutamanhoematé 40%,
como? Simplesmenteaplicandonelesaquivosquechamadosminificadores,
elesretiramespaçosembrancoecódigosquenãosãonecessários.
Agora sobrequantidade de arquivos, menosserásempremais. Então no
desenvolvimentodasualojaapontecomo meta paraofornecedor de plataformaestaseu pre
requisito, eassimeledeveráconstruir um únicoarquivo CSS contendotodososestilos do site.
Solicitetambémquequando for necessário a utilização de
JqueryouJavascriptsqueestessejamagrupadosem um
únicoarquivoequesejamescolhidasbilbliotesJqueryjácompactadas.