View
424
Download
3
Category
Preview:
Citation preview
■ Programador PHP há mais de 10 anos
■ Trabalhou em grandes projetos nacionais para o governo e telecomunicações
■ Interesse em P&D/Performance
Palestrante
■ Web APP desenvolvido em HTML5 e PHP
■ Problemas de performance
✗ Lentidão na abertura inicial✗ Travamentos
Projeto Web APP Mobile
Arquitetura decomunicação mobile
■ Maior latência (Round-trip delay time)
✓ 3G: 100ms ✓ EDGE: 300ms✓ Wifi: 2ms
300ms 30ms
■ Utilizar como base 300ms RTT (EDGE)■ EDGE: 250Kbps = 31,25KBps■ Google Devtools
Meta (6 hits/requisição)
1 Hit Dinâmico > 300ms RTT + até 150ms5 Hits Estáticos > 1500ms RTT + 5x10ms
Total: ~2 segundos
Por que isso éum malabarismo?
Recursos estáticose sua influência
PercepçãoA forma como se otimiza pode ser ruim para o usuário
■ Priorize conteúdo
Ordem correta de otimização
✓ Agrupe o restante do JS
✓ Atrase o carregamento do JS✓ Coloque inline o CSS do carregamento inicial✓ Adicione um fallback para biblioteca JS
Mas isso não é carregado apenas uma vez? Por que eu preciso me preocupar com isso?Essa palestra é de front-end?Onde é a saída?
✓ Agrupe o CSS✓ Minifier✓ GZIP✓ Não use QueryString
O WebView e WebAPP desgastando DEV’s
■ Android 4.3 < WebView é Chrome 11 (2010)
■ Android 4.4 > WebView é Chrome 30 (2013)
■ Versão atual do Chrome é 39 (2014)
■ O iOS segue a mesma lógica
WebAPP, WebView e HTML5
Chrome for Android 39 WebView e Chrome 11
polymer-project.orgAndroid 4.3
Android WebKit Browser Ops...
Android 4.4polymer-project.org
Versão Nome Distribuição
2.2 Froyo 0.5%
2.3.3 -2.3.7
Gingerbread 9.1%
4.0.3 -4.0.4
Ice Cream Sandwich
7.8%
4.1.x Jelly Bean 21.3%
4.2.x 20.4%
4.3 7.0%
4.4 KitKat 33.9%
Versões Android
Fonte: Dashboards | Android Developers
Por que eu preciso saber isso!?
HTML5, JS, CSS, Imagens, Fontes... Apenas XHTML, CSS e imagens
9 Hits - 13KB - 0,7 Segundos
29 Hits - 398KB - 13 Segundos
35 Hits - 306KB - 4 Segundos
211 Hits - 1.8MB - 8 Segundos
143 Hits - 3.6MB - 27 Segundos
Folha 9 Hits 13KB 0,75 Segundos
Estadão 29 Hits 398KB 13 Segundos
Mobile Básico
Folha 35 Hits 306KB 4 Segundos
Globo 211 Hits 1.8MB 8 Segundos
New York Times 143 Hits 3.6MB 27 Segundos
Mobile Avançado
■ Coloque o máximo de dados comuns ■ Faça invalidação na gravação■ Não é necessário excluir um item
Melhor Aplicabilidade de Memcache
ITENS NO CACHE
Tempo
Qtd
Hits Sessão por hit Memória Servidor
10 1MB 10MB
100 1MB 100MB
100 10MB 1GB
1000 1MB 1GB
Sessão + Memcache
■ O Memcache permite que a sessão fique descentralizada
■ Retira o acesso ao disco e melhora a leitura
■ O que não resolve✗ Todo session_start() adiciona o dado na
memória do servidor
■ Adicione apenas dados básicos
Memcache e acesso compartilhado
Hits Memcache Servidor Total Sem Memcache
10 10MB + 10MB 60MB 80MB 170MB
100 10MB + 100MB 600MB 710MB 1.7GB
300 10MB + 300MB 1.8GB 2.1GB 5.1GB
■ 10MB comum + 1MB específico
Pool Memcache
■ Leitura mais rápida e escrita mais lenta■ Leitura é frequente, escrita não
1x 4GB 4x 1GB
Cruzamento de dados relevantes■ Considere apenas hit dinâmico
Calculando...
■ PV/Requisição ~> Analytics
■ Hit/PV ~> DevTools
Otimização
11 19 209 Antes
16 7 119 Depois
■ Redução na quantidade de hits dinâmicos
■ Após melhorias o número de usuários cresceu...
Feedback
VisitantesVisitantes Únicos
Visualização de páginaAcessos
■ ...e o servidor esfriou também
Mês
HITs
MEMCACHE
Ações■ Garantir que será mantido durante
manutenção
✓ Uglify
✓ CSSmin
Desenvolvimento
Produção
■ Lembra da pergunta? Aqui +90% é acesso sem cache algum!
■ Como dimensionar? Utilize os dados que você tem!
201 milhões de habitantes
142 milhões de eleitores
107 milhões votaram
20 milhões para cada umdos 5 maiores veículos
5500 visitantes simultâneos
275 (5%) vai para mobile
250 novos visitantes únicos
49750 Hits
Eleições ‘14
Fluxo de acesso
PROXY REVERSO
PHP
Tráfego
Mês
Mês
Tempo deprocessador
BANCO DE DADOS
MEMCACHEHITs
Dias
Mês
Load
Agradecimentos e contato
http://about.me/webystherGoogle It! Webysther
❖ Folha de S.Paulo❖ GitHub❖ Google
Recommended