O documento discute como otimizar sites para alta performance. Primeiro, explica porque a velocidade de carregamento é importante para ranqueamento, conversão e satisfação do usuário. Depois, apresenta ferramentas como Pagespeed e GTmetrix para medir o desempenho. Por fim, fornece dicas como escolher hospedagem, configurar servidores, compactar arquivos, usar CDNs e lazy load para melhorar a velocidade.

1. Otimizando seu site para Alta
Performance

2. 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

3. 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

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

5. Ninguém
gosta
de
ficar
esperando!

6. 6
Fonte: http://goo.gl/XPMFUp
1%O Google utiliza a velocidade de carregamento como um
fator de rankeamento para 1% das palavras-chave mais
concorridas

7. 7
Fonte: http://goo.gl/aTk9hg
2Usuários esperam que o seu site irá carregar em 2
segundos ou menos.

8. 8
Fonte: http://goo.gl/aTk9hg
340% dos usuários irão abandonar qualquer website que
demore mais que 3 segundos para carregar.

9. 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

10. 10
Fonte: 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.

11. 11
Fonte: http://goo.gl/DAOkye
52%52% dos usuários dizem que um carregamento rápido é
importante para a lealdade em relação ao website.

12. 12
Fonte: 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.

13. 13
Fonte: 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.

14. 14
Fonte: 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.

15. 15
Fonte: 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.

16. Como
mensurar
o desempenho do
meu website?

17. 17
PAGESPEED
O Pagespeed é a ferramenta da Google utilizada para
mensurar a velocidade de carregamento do website, além
de dar dicas de como otimiza-lo.

18. 18
YSLOW
O Yahoo também disponibiliza uma ferramenta para medir
a velocidade do website de forma gratuita, o YSlow.

19. 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. 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/

21. Como fazer?

22. 22
Hospedagem
Servidores Virtuais ou Dedicados possuem um melhor
desempenho e controle sobre seu website.

23. 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. 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. 25
ImagensOtimize as suas imagens! Coloque as dimensões da
imagem diretamente no HTML. Evite
<img src=“imagem.jpg” />.

26. 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. 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. 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. 29
Minify
“Minifique" os seus arquivos CSS e JavaScript. Com isso os
arquivos ficarão menores e carregarão mais rápido.

30. 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. 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. 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. 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. 34
CACHEOpcode cache, como APC, XCache e Zend Opcache são
ótimas ferramentas para melhorar o desempenho de sua
aplicação.

35. 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. 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. 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.

38. Obrigado!
semduvida.net
www.williamrufino.com.br
william@semduvida.net
twitter.com/williamhrs
facebook.com/williamhrs
38