Otimizando seu site para Alta Performance

William Rufino

2

Bacharel em Ciência da Computação

Mestrando em Sistemas de Informações e Gestão do Conhecimento

Sócio e professor de SEO no SEM Dúvida

CRONOGRAMA

1. Por que se preocupar com a velocidade de carregamento?

2. Como medir o desempenho do seu website?

3. Como melhorar o desempenho do website?

3

Por que se preocupar com a velocidade de carregamento?

Ninguém gosta

de ficar

esperando!

6Fonte: http://goo.gl/XPMFUp

1%O Google utiliza a velocidade de carregamento como um

fator de rankeamento para 1% das palavras-chave mais concorridas

7Fonte: http://goo.gl/aTk9hg

2Usuários esperam que o seu site irá carregar em 2

segundos ou menos.

8Fonte: http://goo.gl/aTk9hg

340% dos usuários irão abandonar qualquer website que

demore mais que 3 segundos para carregar.

9

16%Um atraso de 1 segundo(ou 3 segundos esperando)

diminui a satisfação do usuário em cerca de 16%.

Fonte: http://goo.gl/DAOkye

10Fonte: http://goo.gl/DAOkye

33%33% dos usuários pesquisados esperam que um site móvel

carregue tão ou mais rápido que um site para desktop.

11Fonte: http://goo.gl/DAOkye

52%52% dos usuários dizem que um carregamento rápido é

importante para a lealdade em relação ao website.

12Fonte: http://goo.gl/oT7Kbg

YahooCom um tempo de carregamento 400ms mais devagar, o Yahoo descobriu que tem uma queda de 5% a 9% no seu

tráfego.

13Fonte: http://goo.gl/Aslklj

FirefoxA equipe do Firefox diminuiu em 2,2s a média de

velocidade de carregamento e, consequentemente, aumentou o número de downloads em 15.4%, gerando mais de 60 milhões de downloads adicionais por ano.

14Fonte: http://goo.gl/Aslklj

AmazonA Amazon, através de testes, descobriu que cada 100ms

reduzido no tempo de carregamento, gera um aumento de 1% no faturamento.

15Fonte: http://goo.gl/Aslklj

GoogleO Google aumentou seu número de resultados de 10 para

30 por página, o que causou um aumento de 0.5s no tempo de carregamento, diminuindo em 20% do tráfego

das buscas.

Como mensurar

o desempenho do meu website?

17

PAGESPEEDO Pagespeed é a ferramenta da Google utilizada para

mensurar a velocidade de carregamento do website, além de dar dicas de como otimiza-lo.

18

YSLOWO Yahoo também disponibiliza uma ferramenta para medir

a velocidade do website de forma gratuita, o YSlow.

19

GTMETRIXO GTmetrix é uma ferramenta que utiliza dados do YSlow

e Pagespeed para mensuração da performance do website. A sua vantagem é unir os dados das duas

ferramentas anteriores em uma única interface.

20

PINGDOMO PINGDOM também possui uma ferramenta para a

mensuraçào do desempenho de websites. Ele também lhe da várias dicas de como melhorar o desempenho.

http://tools.pingdom.com/fpt/

Como fazer?

22

HospedagemServidores Virtuais ou Dedicados possuem um melhor

desempenho e controle sobre seu website.

23

ServidorNão só a escolha do software! A sua configuração correta é necessária. É facil achar pesquisas mostrando o por que

do Nginx ser melhor que o Apache.

24

GZIPUma das configurações mais fáceis de ser feita, é o GZIP.

Com ele todo conteúdo de texto (HTML, CSS, JS) é comprimido o que pode cortar até 50% do tráfego.

25

ImagensOtimize as suas imagens! Coloque as dimensões da

imagem diretamente no HTML. Evite <img src=“imagem.jpg” />.

26

ImagensOtimize as suas imagens! Não faça o redimensionamento

das imagens via HTML, ou seja, redimensione suas imagens antes do upload ou via servidor.

27

ImagensOtimize as suas imagens! Softwares como o Smuth.it do Yahoo, optipng, e jpegoptim podem ajudar a reduzir o

tamanho da imagem, removendo metadados que não são necessários.

28

SpritesUtilize CSS Sprites onde for possível. Com o seu uso, o

número de requisições é reduzido, causando assim uma melhora no desempenho.

29

Minify“Minifique" os seus arquivos CSS e JavaScript. Com isso os

arquivos ficarão menores e carregarão mais rápido.

30

CombinarCombine os arquivos Javascript e CSS para diminuir a

quantidade de requisições. Há diversas ferramentas para fazer isso somente em produção, no deploy ou

dinâmicamente.

31

JS E CSSColoque seus CSS’s no topo e JS’s no fim da página.

Javascript’s no topo impedem a renderização da página, já o CSS no topo impede que a página carregue antes do

estilo.

32

HTMLA compressão do HTML, removendo espaços, comentários, e caracteres desnecessários também reduz o tamanho do

arquivo, fazendo com que seja carregado mais rápido.

33

CACHEConfigure os headers corretamente para que os arquivos

estáticos possam ser “cacheados" pelo navegador, evitando assim, novas requisições quando o usuário visitar

novamente a página.

34

CACHEOpcode cache, como APC, XCache e Zend Opcache são ótimas ferramentas para melhorar o desempenho de sua

aplicação.

35

CDNUm CDN (Content Distribution Network) pode ajudar a servir arquivos estáticos do seu website, geralmente da

localização geográfica mais próxima, melhorando assim o tempo de resposta.

36

PLUGINSPara quem faz uso de CMS’s como o WordPress, verifique quais plugins estão consumindo mais recursos e veja se

podem ser substituídos. Muitos plugins são mal programados, em que não existe a preocupação com o

desempenho. Há plugins que podem auxiliar nessa análise, como o P3 Profiler.

37

LAZY LOADUtilize Lazy Load para só carregar imagens e outros

componentes quando o usuário fizer o scroll da página. Além de carregar mais rápido, irá também economizar

banda.

Obrigado!

semduvida.net

www.williamrufino.com.br

william@semduvida.net

twitter.com/williamhrs

facebook.com/williamhrs

38