■ 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