Slide 1

Slide 1 text

Amanda Vilela - IBM TechDay

Slide 2

Slide 2 text

Amanda Vilela

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

O Yahoo! descobriu que, para cada 400ms de melhora na performance, seu tráfego aumenta em 9%. Fonte: https://www.slideshare.net/stoyan/yslow-20-presentation

Slide 5

Slide 5 text

Ao cortar 2,2s da landing page do Firefox, a Mozilla aumentou o número de downloads em 15%, totalizando um ganho de mais de 60 milhões de cópias por ano Fonte: http://blog.mozilla.com/metrics/category/website-optimization/

Slide 6

Slide 6 text

A Amazon concluiu que apenas 100ms de melhora aumentam 1% seu faturamento Fonte: https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0

Slide 7

Slide 7 text

Em um de seus vários experimentos, o Google aumentou o número de resultados por página de 10 para 30. Isso aumentou o tempo de carregamento de 0.4s para 0.9s, o que diminuiu em 20% o tráfego das buscas Fonte: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

Slide 8

Slide 8 text

E muitos outros cases na internet Fonte: http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/

Slide 9

Slide 9 text

Usuários não gostam de coisas lentas

Slide 10

Slide 10 text

Sem usuários, sem dinheiro

Slide 11

Slide 11 text

Voltando para o JS...

Slide 12

Slide 12 text

Como o JS impacta a performance?

Slide 13

Slide 13 text

No back-end: Demora para responder as requests

Slide 14

Slide 14 text

No front-end: Demora para carregar a página

Slide 15

Slide 15 text

Como melhorar?

Slide 16

Slide 16 text

Dicas práticas ;)

Slide 17

Slide 17 text

1. dentro do body

Slide 18

Slide 18 text

2. Evite o número de .

Slide 19

Slide 19 text

Reduza os bloqueios. Reduza o número de requisições HTTP. Não use ou reduza scripts inline

Slide 20

Slide 20 text

Minifique e concatene os arquivos .js

Slide 21

Slide 21 text

Gulp

Slide 22

Slide 22 text

3. Use async/defer

Slide 23

Slide 23 text

Scripts bloqueantes nunca mais! O download do script é feito de forma assíncrona enquanto o processo de renderização da página continua a ser feito. O script é executado depois que o download estiver completo.

Slide 24

Slide 24 text

Scripts bloqueantes nunca mais! O download do script é feito de forma assíncrona. Mas sua execução se dá apenas quando todo o processo de renderização estiver concluído.

Slide 25

Slide 25 text

E se usar os dois? Nesse caso, o async prevalece e o defer é ignorado.

Slide 26

Slide 26 text

4. Reduza pesquisa de domínio

Slide 27

Slide 27 text

5. Modularize

Slide 28

Slide 28 text

Variáveis locais são mais rápidas de acessar do que variáveis fora do escopo. Nada de variáveis globais.

Slide 29

Slide 29 text

6. Remova variáveis inúteis

Slide 30

Slide 30 text

7. Só use loops se necessário

Slide 31

Slide 31 text

8. Guarde o tamanho do Array

Slide 32

Slide 32 text

Em vez de : Use:

Slide 33

Slide 33 text

Evite o loop for-in, a menos que você precise iterar sobre uma série de objetos com número de propriedades desconhecido.

Slide 34

Slide 34 text

9. Reduza acesso ao DOM

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

10. Use criação “literal” de arrays/objetos

Slide 40

Slide 40 text

Em vez de :

Slide 41

Slide 41 text

Use:

Slide 42

Slide 42 text

Em vez de :

Slide 43

Slide 43 text

Use:

Slide 44

Slide 44 text

Como mensurar?

Slide 45

Slide 45 text

Benchmarking

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

https://jsperf.com

Slide 48

Slide 48 text

Profiling

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Que tal começar a pensar em performance durante o desenvolvimento?

Slide 52

Slide 52 text

Obrigada :D https://amandavilela.com

Slide 53

Slide 53 text

Referências ● High Performance JavaScript - Nicholas C. Zakas ● https://developer.mozilla.org/pt-BR/docs/Web/HTML/Dicas_para_criar_p%C3 %A1ginas_HTML_de_carregamento_r%C3%A1pido ● http://www.monitis.com/blog/30-tips-to-improve-javascript-performance/ ● https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-ja vascript/ ● https://browserdiet.com/ ● http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizaca o-de-sites/