Web Tuning - Speaker Deck

Slide 1

Slide 1 text

Web tuning Carlos Eduardo L. Lopes @_carloslopes @carloslopes

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Performance é importante?

Slide 4

Slide 4 text

Qualquer carregamento de página que demore mais que 2 segundos é um desastre Akamai Set/09

Slide 5

Slide 5 text

47% esperam que uma página carregue em 2 segundos ou menos Akamai Set/09

Slide 6

Slide 6 text

40% abandonam uma página se ela demora mais que 3 segundos para carregar Akamai Set/09

Slide 7

Slide 7 text

52% afirmam que carregamentos rápidos são importantes para fidelidade com o site Akamai Set/09

Slide 8

Slide 8 text

14% começam a comprar em outro site se o carregamento é lento Akamai Set/09

Slide 9

Slide 9 text

64% compradores insatisfeitos comprarão em outro site em uma próxima vez Akamai Set/09

Slide 10

Slide 10 text

Além disso…

Slide 11

Slide 11 text

15% de aumento no tráfego enviado pelo Google, Bing e Yahoo LightSpeedNow

Slide 12

Slide 12 text

A prova de que milissegundos importam

Slide 13

Slide 13 text

Kohavi and Longbotham 2007 Para cada 100ms acrescentados no carregamento da Amazon.com as vendas diminuem 1%

Slide 14

Slide 14 text

bit.ly/WQfyIX Delay de 1s no lonelyplanet(.com) resulta na queda de ~20% da taxa de conversão

Slide 15

Slide 15 text

Yahoo descobriu que uma página 400ms mais demorada tem de 5-9% mais pessoas saindo antes do carregamento finalizar

Slide 16

Slide 16 text

Quais os gargalos de uma aplicação web?

Slide 17

Slide 17 text

Navegador Aplicação Database Webservice I/O

Slide 18

Slide 18 text

Navegador Aplicação Database Webservice I/O

Slide 19

Slide 19 text

Dificilmente o código que executa a aplicação é o gargalo

Slide 20

Slide 20 text

Como resolver?

Slide 21

Slide 21 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 22

Slide 22 text

Minificação e concatenação de assets Front-end

Slide 23

Slide 23 text

Navegador Servidor Documento Javascript CSS

Slide 24

Slide 24 text

Como resolver?

Slide 25

Slide 25 text

jquery.js jquery-ui.js bootstrap.js lists.js home.js bootstrap.css home.css lists.css jquery-plugin.css application.js application.css

Slide 26

Slide 26 text

Remover todos os whitespaces Remover quebra de linhas Remover comentários

Slide 27

Slide 27 text

Navegador Servidor Documento Javascript CSS

Slide 28

Slide 28 text

Assets menores e em menor quantidade Menor número de requests no servidor

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 31

Slide 31 text

Sprites Front-end

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Navegador Servidor Documento Imagens

Slide 34

Slide 34 text

Como resolver?

Slide 35

Slide 35 text

icons.png

Slide 36

Slide 36 text

Navegador Servidor Documento Imagens icons.png

Slide 37

Slide 37 text

Download mais rápido dos ícones Menor número de requests no servidor

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 40

Slide 40 text

CDN Front-end

Slide 41

Slide 41 text

Navegador Servidor Documento Javascript CSS Imagens

Slide 42

Slide 42 text

Servidor da app servindo assets Tamanho dos requests para assets maiores (cookies overhead)

Slide 43

Slide 43 text

Como resolver?

Slide 44

Slide 44 text

Navegador Servidor app CDN CSS Javascript Fontes Imagens Páginas

Slide 45

Slide 45 text

O que é um CDN?

Slide 46

Slide 46 text

Servidor CDN Servidor App User1 User2

Slide 47

Slide 47 text

Menor número de requests no servidor Requests mais leves para obter assets Vantagens que o serviço de CDN oferece Aumenta o número de requests paralelas

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 50

Slide 50 text

Cache de assets Front-end

Slide 51

Slide 51 text

Navegador Servidor / CDN Documento Assets Request Carregamento finalizado Request Carregamento finalizado

Slide 52

Slide 52 text

Conteúdo estático sendo requisitado múltiplas vezes

Slide 53

Slide 53 text

Como resolver?

Slide 54

Slide 54 text

Cache-Control HTTP header

Slide 55

Slide 55 text

Navegador Servidor / CDN Documento Assets Request Carregamento finalizado Request Carregamento finalizado no-cache max-age=31536000 no-cache

Slide 56

Slide 56 text

Navegador Servidor / CDN application.js max-age=31536000 Atualização da app application.js

Slide 57

Slide 57 text

Navegador Servidor / CDN application-XXX.js max-age=31536000 Atualização da app application-YYY.js max-age=31536000

Slide 58

Slide 58 text

Conteúdo estático requisitado apenas quando necessário Menor número de requests no servidor Carregamento mais rápido da página

Slide 59

Slide 59 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 60

Slide 60 text

Cookies leves Front-end

Slide 61

Slide 61 text

#0123 - Playstation 4 - US$399.99 #3242 - Destiny - US$50.00 #6938 - The Last Of Us - US46.60 User #54919 Colorscheme=#1324 Menu=Eletrônicos,Jogos,Apple

Slide 62

Slide 62 text

Para cada 500 bytes no tamanho dos cookies o carregamento da página aumenta 15ms http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

Slide 63

Slide 63 text

Como resolver?

Slide 64

Slide 64 text

Navegador Servidor app user id shopping cart data configuration data

Slide 65

Slide 65 text

Navegador Servidor app Persistência user id shopping cart data configuration data user id

Slide 66

Slide 66 text

Requests mais leves Carregamento mais rápido

Slide 67

Slide 67 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 68

Slide 68 text

Uploads diretos Front-end e Back-end

Slide 69

Slide 69 text

Servidor User1 User2 User3 User4 4mb 2mb 3mb 8mb

Slide 70

Slide 70 text

Processos do servidor presos aguardando uploads

Slide 71

Slide 71 text

Como resolver?

Slide 72

Slide 72 text

Servidor User1 User2 User3 User4 Storage Server 4mb 2mb 3mb 8mb

Slide 73

Slide 73 text

Evita requisições bloqueantes no servidor Processos do servidor ficam disponíveis para ações mais importantes

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 76

Slide 76 text

Engine de busca Back-end

Slide 77

Slide 77 text

1.427.349 produtos

Slide 78

Slide 78 text

SELECT * FROM products WHERE id = ????? ~ 200ms

Slide 79

Slide 79 text

SELECT * FROM products WHERE name LIKE ‘%?%' ~40s e alguns timeouts

Slide 80

Slide 80 text

Como resolver?

Slide 81

Slide 81 text

Aplicação Banco de dados name LIKE ‘%???%' Produto #23242 Produto #54534 Produto #00434

Slide 82

Slide 82 text

Aplicação Banco de dados query match name ??? #23242 #54534 #00434 Engine de busca id IN (?, ?, ?) Produto #23242 Produto #54534 Produto #00434

Slide 83

Slide 83 text

query match name ??? ~ 190ms ???

Slide 84

Slide 84 text

Otimiza o uso do banco de dados Resultados das pesquisas mais relevantes Opcões de pesquisa mais avançadas Responses mais rápidas

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 87

Slide 87 text

Background jobs Back-end

Slide 88

Slide 88 text

Navegador Aplicação Store2 POST /checkout Store1 Store3 SKU #1353 SKU #43 SKU #5463 5s 6s 4s 17s

Slide 89

Slide 89 text

17s

Slide 90

Slide 90 text

Navegador Aplicação Store2 Store1 Store3

Slide 91

Slide 91 text

Navegador Aplicação Store2 Store1 Store3 Background Job POST /checkout Enfileira job 200ms SKU #1353 5s SKU #43 6s SKU #5463 4s GET /order/status not ready ready GET /order/status not ready GET /order/status

Slide 92

Slide 92 text

Evita requests bloqueantes Percepção de maior rapidez para usuário Responses mais rápidas

Slide 93

Slide 93 text

Hangfire HornetQ

Slide 94

Slide 94 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 95

Slide 95 text

Cache de operações custosas Back-end

Slide 96

Slide 96 text

User1 Aplicação Banco de dados GET / Produtos mais vendidos User2 300ms

Slide 97

Slide 97 text

User1 Aplicação Banco de dados GET / Produtos mais vendidos User2 300ms

Slide 98

Slide 98 text

Operação custosa sendo realizada múltiplas vezes

Slide 99

Slide 99 text

Como resolver?

Slide 100

Slide 100 text

User1 Aplicação Banco de dados User2

Slide 101

Slide 101 text

User1 Aplicação Banco de dados User2 Cache store

Slide 102

Slide 102 text

User1 Aplicação Banco de dados User2 Cache store GET / Produtos mais vendidos 300ms Tem os produtos mais vendidos? Não Guarde por 10min 500ms

Slide 103

Slide 103 text

User1 Aplicação Banco de dados User2 Cache store GET / Tem os produtos mais vendidos? Sim 200ms

Slide 104

Slide 104 text

Reaproveita resultado de operações custosas já realizadas Respostas mais rápidas

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 107

Slide 107 text

E assim…

Slide 108

Slide 108 text

Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas

Slide 109

Slide 109 text

Navegador Aplicação Database Webservice I/O

Slide 110

Slide 110 text

Quando é rápido o bastante?

Slide 111

Slide 111 text

Doherty Threshold

Slide 112

Slide 112 text

Speed, Performance, and Human Perception Ilya Grigorik http://www.youtube.com/watch?v=7ubJzEi3HuA

Slide 113

Slide 113 text

1ms - 100ms Instantâneo 100ms - 300ms Delay levemente perceptível 300ms - 1s Delay perceptível Perca de foco 1s+ Alteração de contexto mental 10s+ Vou voltar mais tarde…

Slide 114

Slide 114 text

Obrigado! Carlos Eduardo L. Lopes @_carloslopes @carloslopes