otimizando seu site para alta performance - conasearch
DESCRIPTION
Slides da palestra ministrada no ConaSearch, sobre otimizar a velocidade de carregamento do website.TRANSCRIPT
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
twitter.com/williamhrs
facebook.com/williamhrs
38