Performance e Otimização (e servidores web)

Performance e Otimização(e servidores web)

JoomlaDay São Paulo 2013Paulino Michelazzo

por quê WPO?web performance optimization

43%

57%

3 sec> 3 sec

57% dos visitantes de

sites de viagens saem após 3

segundos 25% mobile

1 segundo é...

- 11%pageviews

- 7%conversões

- 16%satisfação

1.6 bilhões de dólares em vendas anuais

25% de acréscimo em pageviews7 a 12% aumento nas vendas50% de redução de hardware

definindo performance

é lento ou está lento?

O Joomla é lento?

Não!Desenvolvedores e designers o tornam lento

1ª regra

definir se o website é lento ou se está lento

o que é lento?

aquilo que impacta na conversão de usuários

14% 86%

backend frontend

10.91.6

Top 300K

80 a 90% das lesmas estão no front-end

Mate-as antes

2ª regra

80 ~ 90% no Joomla!

template

• Arquivos JavaScript

• Arquivos CSS

• Imagens

• Requisições HTTP

• DNS Lookup’s

JavaScript

• Colocá-los no fim do código

• Minificar arquivos

• Carregar arquivos externos assincronamente

• Combinar arquivos

Carga assíncrona

var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script, scripts);

FiF - frame in frame(function() { var url = 'http://example.org/js.js'; var iframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0"; iframe.src = "javascript:false"; var where = document.getElementsByTagName('script')[0]; where.parentNode.insertBefore(iframe, where); var doc = iframe.contentWindow.document; doc.open().write('<body onload="'+ 'var js = document.createElement(\'script\');'+ 'js.src = \''+ url +'\';'+ 'document.body.appendChild(js);">'); doc.close();}());

https://www.facebook.com/note.php?note_id=10151176218703920

http://www.facebook.com/l.php?u=http%3A%2F%2Fexample.org%2Fjs.js&h=HAQHSm2Em&s=1

http://www.facebook.com/l.php?u=http%3A%2F%2Fexample.org%2Fjs.js&h=HAQHSm2Em&s=1





CSS

• Colocá-los no início do código

• Minificar arquivos

• Fugir de @import

• Combinar arquivos

98k 25k

73k

Imagens

53k 1.9k51.1k

97%

Imagens

Imagens

• JPG

• Progressivas

• Qualidade

• PNG

• Indexadas

DPI não se usa em monitor!!!

requisições HTTP

• Não fazer

• Não fazer

• Precisa fazer, reduza

• (menos css, menos js, menos imagens)

DNS Lookup’s

• Reduza

• Reduza

• Precisa mesmo? Traga para mais perto(perto = dentro)

3ª regra

10 e 20% = rede e servidor

difícil, mas não impossível

tempo para 1º byte

DNS lookup

Conexão inicial

Tempo de espera

cache

• APC - Alternative PHP Cache

• cache de código PHP

• Memcached

• cache banco e código

• Varnish

• cache não-autenticado

verdades, meias verdades e mentiras

aquilo que nunca contaram para você

vários arquivos pequenos é melhor que

um enorme

Mentira

• + requisições = mais tempo

• Tempo de download menor

• Técnicas de compressão e minificação

servidores no Brasil são melhores

Meia verdade (meinha mesmo)

• 1ª conexão pode ser maior ou menor, dependendo do TLD, rede, etc.

• 150ms podem valer a pena pela tranquilidade com suporte e custo menor.

• A otimização do frontend reduz a necessidade de hosting fora.

template responsivo serve para mobile

Renan Calheiros (aquela mentira!)

• Reponsividade é paliativo.

• Menor performance e pouco uso das funcionalidades de mobile.

• Quer/precisa de velocidade no mobile, faça um site para mobile.

performance começa no servidor

Mentira

• Performance começa no projeto do website.

• Estudo das melhores extensões, módulos e templates.

• Codificação consciente com meta na melhor performance.

otimização de performace é complicada

Verdade

• Possui regras simples mas...

• Tem-se alguma dificuldade para implementação

• Requer conhecimento multidisciplinar na maioria dos casos

performance não é importante

Fale isso para sua namorada, noiva, esposa,

amante...

Last words

• Otimização é trabalhosa(mas o resultado vale a pena)

• Otimização é experiência(combinar ingredientes e cenários)

• Serviços de otimização de performance

• Configurações de servidores de alto desempenho

• Projetos especiais

• Cursos e treinamentos

www.sitelento.com.br

obrigado

Paulino Michelazzo

about.me/pmichelazzo

Technology

Performance e Otimização (e servidores web)